序言

微信小游戲，抖音小游戲，非常適合個(gè)人開(kāi)發(fā)者創(chuàng)業(yè)，不用版號(hào)，門(mén)檻低，同時(shí)抖音小游戲的系統(tǒng)算法推薦，能讓好的游戲脫穎而出, 你要做的就是把游戲做好就可以了。

本篇系列的文章，配套了視頻教程講解與課程資源,課程源碼。可以關(guān)注留言獲取哦！

下面開(kāi)始講解黃金礦工的具體制作流程。

1:開(kāi)發(fā)工具的基本使用

教程的開(kāi)發(fā)工具選用cocos creator, 開(kāi)發(fā)語(yǔ)言選用TypeScript。首先我們創(chuàng)建項(xiàng)目，導(dǎo)入素材，素材如圖:

項(xiàng)目路徑不要使用中文和空格，使用英文或英文縮寫(xiě)，項(xiàng)目工程里面的目錄結(jié)構(gòu)要清晰，在Assets下面我們分成Res, Scene, Scripts,。

2: 搭建《黃金礦工》游戲場(chǎng)景

一般做一個(gè)2D游戲，我們會(huì)把一個(gè)游戲的場(chǎng)景分成下面幾個(gè)層次:

a: 游戲背景層 b: 游戲地圖層
c: 角色物品層, d: 游戲UI層,我們按照這個(gè)層次，把黃金礦工的游戲地圖分類進(jìn)行放好，如圖:

BackGound: 背景層, LogicMap: 邏輯地圖層，黃金礦工還有什么地圖呢？主要是要把邊緣表示出來(lái), 我們使用了碰撞檢測(cè)系統(tǒng)， 所以把邊緣堵上墻，作為我們的邏輯地圖，也就是加Box碰撞器，如圖:

GoldRoot 黃金物品的跟節(jié)點(diǎn)，所有的黃金生成出來(lái)后都放這個(gè)根節(jié)點(diǎn)下。

Player: 游戲主角，就是我們的礦工的繩子和鉤子。這個(gè)制作的時(shí)候一個(gè)技巧，主角是由繩子，和繩子斷點(diǎn)上的金屬圓環(huán)組成。

Player的原點(diǎn)在繩子的一頭，所以繩子作為Player的孩子，錨點(diǎn)要為[0.5, 1], 繩子的長(zhǎng)度可能會(huì)變化，我們修改body的高度就可以讓繩子有變化。比如繩子長(zhǎng)度為200，我們把body這個(gè)節(jié)點(diǎn)的高度改成200，即可

金屬探測(cè)圓環(huán)，我們命名為header, header 的位置是與繩子的高度相關(guān)的，在最下面，我們觀察一下坐標(biāo)，

得到一個(gè)結(jié)果, header的坐標(biāo): -(繩子長(zhǎng)度 + 10)。

UIRoot層：用來(lái)放我們用戶的UI操作相關(guān)。場(chǎng)景搭建就此搭建完畢。

3: Type Script代碼開(kāi)發(fā)

Step1: 新建一個(gè)組件類，被引擎識(shí)別, 這個(gè)非常簡(jiǎn)單，直接右鍵新建一個(gè)TS腳本即可

Step2: new 組件實(shí)例，到場(chǎng)景的節(jié)點(diǎn)上。這個(gè)有兩種方式，可以編輯器添加組按鈕來(lái)添加, 可以代碼addComponent(類型)添加, 本質(zhì) new 組件類的實(shí)例添加到節(jié)點(diǎn)上。

Step3: 游戲引擎特定時(shí)期，調(diào)用特定的入口， 我們寫(xiě)代碼如果沒(méi)有人調(diào)用是不值錢(qián)的，所以必須要讓引擎調(diào)用到，引擎會(huì)在特定的時(shí)期，調(diào)用我們特定的入口，我們只要往特定的入口插入代碼即可，開(kāi)始運(yùn)行之前調(diào)用 組件實(shí)例.start();每次刷新的時(shí)候調(diào)用組件實(shí)例.update(),等這些規(guī)定的接口。引擎通過(guò)運(yùn)行場(chǎng)景，找到場(chǎng)景的節(jié)點(diǎn)，找到節(jié)點(diǎn)上組件實(shí)例，來(lái)獲得組件實(shí)例，這也就是組件實(shí)例為什么一定要添加到節(jié)點(diǎn)上就是這個(gè)原因。

4: TypeScript 代碼模板介紹:

cc:?cocos?creator;

cc._decorator:?名字空間，定義了裝飾器/注解

ccclass:?裝飾/注解?一個(gè)類是一個(gè)組件類; property:?裝飾/注解?一個(gè)類的數(shù)據(jù)成員?綁定到編輯器;

@開(kāi)頭表示裝飾注解

cc.Component:?組件類的基類;

export?default:?外部要使用這個(gè)類，import?default?來(lái)獲取這個(gè)類型;

@ccclass

export?default?class?GameMgr?extends?cc.Component?{

//?權(quán)限??名字:?類型?=?默認(rèn)值;

????@property

????private?isDebug:?boolean?=?false;

}

5: 黃金礦工核心思路分析

黃金礦工游戲玩法中，要碰到黃金等物品，還有要碰到邊緣等物品，所以我們要利用碰撞檢測(cè)系統(tǒng)來(lái)做碰撞檢測(cè)。Setp1: 開(kāi)啟碰撞檢測(cè), 分為兩個(gè)步驟

代碼如下:

????//?開(kāi)啟碰撞檢測(cè)，一定要在onLoad里面

????onLoad?()? {

????????//?step1:?開(kāi)啟碰撞檢測(cè)系統(tǒng),?默認(rèn)是關(guān)閉;

????????cc.director.getCollisionManager().enabled?=?true;

????????//?step2:?配置調(diào)試區(qū)域,?debugDraw

????????if(this.is_debug)?{

????????????cc.director.getCollisionManager().enabledDebugDraw?=?true;

????????}

????????else?{

????????????cc.director.getCollisionManager().enabledDebugDraw?=?false;

????????}

????}

Step2: 編輯碰撞區(qū)域。

黃金需要編輯碰撞區(qū)域，游戲地圖的3個(gè)邊需要編輯碰撞區(qū)域, 礦工的圓形金屬探測(cè)器需要添加碰撞器。

Step3: 類型配置與碰撞關(guān)系配置。

這個(gè)案例里面我們把物體分成了類型有：邊緣(BORD), 黃金Gold, 探測(cè)器Header。分別設(shè)置好對(duì)應(yīng)節(jié)點(diǎn)的類型。

Step4: 碰撞檢測(cè)

我們讓金屬探測(cè)器Header來(lái)做碰撞，碰撞檢測(cè)記住一點(diǎn)，那個(gè)碰撞器檢測(cè)碰撞，就把碰撞檢測(cè)的代碼掛到那個(gè)碰撞器對(duì)應(yīng)的節(jié)點(diǎn)上，所以新建一個(gè)代碼來(lái)做碰撞檢測(cè)，實(shí)現(xiàn)碰撞檢測(cè)的函數(shù)入口

const?{ccclass,?property}?=?cc._decorator;

@ccclass

export?default?class?HeaderCtrl?extends?cc.Component?{

????onCollisionEnter(other,?self):?void?{

????}

}

Step5：配置好碰撞關(guān)系,哪些類型與哪些類型碰撞，如圖

黃金礦工會(huì)有多個(gè)游戲狀態(tài)，我們這里將其進(jìn)行分類:

狀體1: 我們的鉤子擺來(lái)擺去; --->Idle 狀態(tài)2: 我們的鉤子發(fā)射出去 ---> Shoot 狀態(tài)3: 碰到邊緣我們就彈回來(lái); ---> Back 狀態(tài)4: 如果狀態(tài)的是黃金我們就把黃金拖回來(lái); BackWithGold 如果還有其他的狀態(tài)，你也可以定義好, 我們編寫(xiě)一個(gè)GameMgr代碼，管理整個(gè)游戲，在這個(gè)代碼里面定義好狀態(tài)：

var?State?=?{

????Idle:?0,

????Shoot:?1,

????Back:?2,

????BackWithGold:?3,

};

狀態(tài)定義完成以后，我們分析一下?tīng)顟B(tài)變化的條件，整理如下:

狀態(tài)1---》狀態(tài)2: (用戶點(diǎn)擊了屏幕) 狀態(tài)2---》狀態(tài)3：(鉤子撞到了邊緣) 狀態(tài)2----》狀態(tài)4(碰到的是黃金) 狀態(tài)3/狀態(tài)4 ---》狀態(tài)1：繩子拖回來(lái)以后，我們便回到狀態(tài)1

每個(gè)狀態(tài)的動(dòng)畫(huà)，我們編寫(xiě)一個(gè)函數(shù)，用來(lái)實(shí)現(xiàn)如下圖，在update里面:

//?1===============1===============1===============1=======dt========1

????//?dt:?迭代，100?*?dt

????update(dt:?number):?void?{

????????if(this.state?===?State.Idle)?{

????????????this.idleUpdate(dt);

????????????return;

????????}

????????else?if?(this.state?===?State.Shoot)?{

????????????this.shootUpdate(dt);

????????????return;

????????}

????????else?if(this.state?===?State.Back)?{

????????????this.backUpdate(dt);

????????????return;

????????}

????????else?if?(this.state?==?State.BackWithGold)?{

????????????this.balckWithGoldUpdate(dt);

????????????return;

????????}

????}

把狀態(tài)顯示的接口完成后，接下來(lái)編寫(xiě)狀態(tài)改變條件。用戶點(diǎn)擊屏幕，idle-Shoot狀態(tài)，代碼如圖:

this.node.on(cc.Node.EventType.TOUCH_START,?this.onTouchStart,?this);

private?onTouchStart():?void?{

????????if?(this.state?!==?State.Idle)?{

????????????return;

????????}

????????this.state?=?State.Shoot;

????}

狀態(tài)改變的代碼一定要加一個(gè)邏輯，就是當(dāng)前狀態(tài)的判斷。碰到物體后，狀態(tài)改變，所以，當(dāng)金屬圓圈，檢測(cè)到碰撞的時(shí)候，調(diào)用GameMgr的接口，進(jìn)入判斷檢測(cè)函數(shù)。HeaderCtrl.ts 在碰撞函數(shù)里面添加

GameMgr.Instance.onGameCollisionEnter(other,?self);

GameMgr.ts里面實(shí)現(xiàn):

public?onGameCollisionEnter(other,?self):?void?{

????????if?(this.state?!==?State.Shoot)?{

????????????return;

????????}

????????if?(other.node.groupIndex?===?2)?{?//?邊緣

????????????this.state?=?State.Back;

????????}

????????else?if?(other.node.groupIndex?===?3)?{?//?黃金

????????????this.state?=?State.BackWithGold;

????????}

????}

狀態(tài)遷移改變完成了以后，我們就是實(shí)現(xiàn)每種狀態(tài)的動(dòng)畫(huà)了，這里我重點(diǎn)要介紹一個(gè)函數(shù)，

?private?setRopeLen(len:?number):?void?{

????????this.ropeBody.height?=?len;

????????this.header.y?=?-(len?+?10);

????}

這個(gè)函數(shù)，可以修改繩子的長(zhǎng)度，這樣，等繩子拋出去，與拖回來(lái)都可以用。

狀態(tài)遷移邏輯框架實(shí)現(xiàn)后，最后我們來(lái)往每種狀態(tài)里面加代碼。

Idle:

定義一個(gè)角速度，定義當(dāng)前角度，update不斷累加，如果超過(guò)左邊，就轉(zhuǎn)變方向 如果超過(guò)右邊，也換個(gè)方向到左邊。

????private?idleUpdate(dt:?number):?void?{

????????this.nowDegree?+=?(this.wSpeed?*?dt);

????????this.player.angle?=?this.nowDegree;

????????if?(this.nowDegree?<=?-60)?{

????????????this.wSpeed?=?-this.wSpeed;

????????}

????????else?if(this.nowDegree?>=?60)?{

????????????this.wSpeed?=?-this.wSpeed;

????????}

????}

Shoot:

定一個(gè)繩子生長(zhǎng)的速度，每次update, 繩子長(zhǎng)度變化(速度*時(shí)間)

?private?shootUpdate(dt:?number):?void?{

????????this.nowLen?+=?(this.shootSpeed?*?dt);

????????this.setRopeLen(this.nowLen);

????}

Back:

碰到邊緣返回，直接把繩子的長(zhǎng)度，由Shoot的變長(zhǎng)，變成變短，所以是減。

private?backUpdate(dt:?number):?void?{

????????this.nowLen?-=?(this.shootSpeed?*?dt);

????????if?(this.nowLen?<=?100)?{

????????????this.nowLen?=?100;

????????????this.state?=?State.Idle;

????????}

????????this.setRopeLen(this.nowLen);

????}

BackWithGold:

勾上黃金的狀態(tài)，我就留給大家自己來(lái)寫(xiě)了。

private?balckWithGoldUpdate(dt:?number):?void?{

????}

這樣就實(shí)現(xiàn)了黃金礦工的核心玩法。本次課除了有文字，還配備有 完整視頻教程，游戲素材，課程代碼，需要的可以在公眾號(hào)窗口聯(lián)系我們哦。

總結(jié)

以上是生活随笔為你收集整理的游戏必备组件有哪些_微信抖音小游戏黄金矿工案例详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。