序言

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

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

下面開始講解黃金礦工的具體制作流程。

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

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

項目路徑不要使用中文和空格，使用英文或英文縮寫，項目工程里面的目錄結構要清晰，在Assets下面我們分成Res, Scene, Scripts,。

2: 搭建《黃金礦工》游戲場景

一般做一個2D游戲，我們會把一個游戲的場景分成下面幾個層次:

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

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

GoldRoot 黃金物品的跟節(jié)點，所有的黃金生成出來后都放這個根節(jié)點下。

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

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

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

得到一個結果, header的坐標: -(繩子長度 + 10)。

UIRoot層：用來放我們用戶的UI操作相關。場景搭建就此搭建完畢。

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

Step1: 新建一個組件類，被引擎識別, 這個非常簡單，直接右鍵新建一個TS腳本即可

Step2: new 組件實例，到場景的節(jié)點上。這個有兩種方式，可以編輯器添加組按鈕來添加, 可以代碼addComponent(類型)添加, 本質(zhì) new 組件類的實例添加到節(jié)點上。

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

4: TypeScript 代碼模板介紹:

1. ?`cc: cocos creator;` 2. ?`cc._decorator: 名字空間，定義了裝飾器/注解` 3. ?`ccclass: 裝飾/注解 一個類是一個組件類; property: 裝飾/注解 一個類的數(shù)據(jù)成員 綁定到編輯器;` 4. ?`@開頭表示裝飾注解` 5. ?`cc.Component: 組件類的基類;` 6. ?`export default: 外部要使用這個類，import default 來獲取這個類型;` 7. ?`@ccclass` 8. ?`export default class GameMgr extends cc.Component {` 9. ?`// 權限 ?名字: 類型 = 默認值;` 10. ?` ? ?@property` 11. ?` ? ?private isDebug: boolean = false;` 12. ?`}`

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

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

代碼如下:

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

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

Step3: 類型配置與碰撞關系配置。

這個案例里面我們把物體分成了類型有：邊緣(BORD), 黃金Gold, 探測器Header。分別設置好對應節(jié)點的類型。

Step4: 碰撞檢測

我們讓金屬探測器Header來做碰撞，碰撞檢測記住一點，那個碰撞器檢測碰撞，就把碰撞檢測的代碼掛到那個碰撞器對應的節(jié)點上，所以新建一個代碼來做碰撞檢測，實現(xiàn)碰撞檢測的函數(shù)入口

Step5：配置好碰撞關系,哪些類型與哪些類型碰撞，如圖

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

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

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

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

每個狀態(tài)的動畫，我們編寫一個函數(shù)，用來實現(xiàn)如下圖，在update里面:

1. ?`// 1===============1===============1===============1=======dt========1` 2. ?` ? ?// dt: 迭代，100 * dt` 3. ?` ? ?update(dt: number): void {` 4. ?` ? ? ? ?if(this.state === State.Idle) {` 5. ?` ? ? ? ? ? ?this.idleUpdate(dt);` 6. ?` ? ? ? ? ? ?return;` 7. ?` ? ? ? ?}` 8. ?` ? ? ? ?else if (this.state === State.Shoot) {` 9. ?` ? ? ? ? ? ?this.shootUpdate(dt);` 10. ?` ? ? ? ? ? ?return;` 11. ?` ? ? ? ?}` 12. ?` ? ? ? ?else if(this.state === State.Back) {` 13. ?` ? ? ? ? ? ?this.backUpdate(dt);` 14. ?` ? ? ? ? ? ?return;` 15. ?` ? ? ? ?}` 16. ?` ? ? ? ?else if (this.state == State.BackWithGold) {` 17. ?` ? ? ? ? ? ?this.balckWithGoldUpdate(dt);` 18. ?` ? ? ? ? ? ?return;` 19. ?` ? ? ? ?}` 20. ?` ? ?}`

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

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

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

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

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

這個函數(shù)，可以修改繩子的長度，這樣，等繩子拋出去，與拖回來都可以用。

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

Idle:

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

Shoot:

定一個繩子生長的速度，每次update, 繩子長度變化(速度*時間)

Back:

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

BackWithGold:

這樣就實現(xiàn)了黃金礦工的核心玩法。本次課除了有文字，還配備有 完整視頻教程，游戲素材，課程代碼，需要的可以在評論區(qū)留言聯(lián)系即可。