Cocos Creator 2.3開發《海底世界》小遊戲（1）

1、簡介

其實，創做這個小遊戲是前段時間早就有的一個想法，即在使用Scratch進行少年編程工具的這段時間裏，我一直在思考：Cocos Creator開發前可否使用Scratch先進行快速原型開發——使用Scratch（它的一個最大優點正是快速實現遊戲中角色、動畫、聲音及碰撞檢測等的積木編程）先快速構造出遊戲產品的一個相似於功能原型的簡單版本，而後再基於這個產品實現Cocos Creator版本的細化開發。

固然，在實現上述目的的過程當中，Scratch是有很大侷限性的，除數據結構類型有限外，對於複雜的碰撞檢測也是無能爲力的，對於商業級遊戲中的遊戲角色特效，以及粒子特效也是力不從心——想再從數學源頭去實現這樣的效果根本得不償失。並且，還有其餘不少問題。

本文中，我想拿我前段時間創做的一個簡單版本的小遊戲Scratch《海底世界》小遊戲開發入門爲例做試驗，來測試我上述想法的現實性。

注意：在素材準備就緒的狀況下，使用Scratch開發出這種小遊戲2個小時就足夠（包括儘量的細化）。

2、遊戲角色及關係

遊戲中各角色間的關係，在此再也不贅述，有興趣的朋友能夠參考我上面提供的連接。固然，做爲小測試，嚴格地說，這也不是一款什麼遊戲，只算是遊戲的很小的一部分罷了。其中，本小遊戲的Cocos Creator版本中略有改進的功能以下：

（1）加入一個簡單無比的開始界面

（2）在主遊戲界面中增長一些更爲細膩的動畫效果，例如：

（A)頂部小黃魚以緩動動畫形式來回遊動

（B）添加了海底氣泡升起效果

(C)小海星碰到水螅後不只尖叫還扭頭就跑

(D)小海星不是在海底隨機位置出現，而只限於左右遊動

下面給出一幅小遊戲運行中的靜態快照：

3、功能流程圖

爲了更清楚地瞭解接下來的編程思路，下面給出遊戲中幾個角色各自功能簡介及關係描述。

4、代碼分析

啓動場景文件名稱爲welcome.fire，其設計時截圖以下：

此界面很是簡單，給出一句小遊戲的玩法簡介，並使用了一個簡單的粒子動畫效果，以突出遊戲標題。

（一）粒子系統節點有關編程

這裏的粒子效果很是簡單，直接使用了系統內置的功能。先來看其在層級管理器上的位置，以下圖所示：

上圖中Particle爲一個空節點，用於承載ParticleSystem組件和Animation組件。接下來，看一下其所對應的屬性檢查器中有關屬性設置的截圖：

注意到，在此節點上咱們直接掛載了系統的ParticleSystem組件，並使用了系統內置的粒子圖像文件atom.png，並選擇「Play On Load」，使其在場景啓動後自動播放。

下面，簡單地看一下Animation組件中動畫剪輯文件的製做狀況，以下圖所示：

易知，在此咱們簡單針對粒子系統組件所掛載的節點的屬性x和scale建立屬性動畫。其中，scale值由默認的1修改成0.1，由於咱們要實現一組小的微粒動畫在遊戲標題下繪製一條水平線效果，因此須要把粒子比例調整得很小。另外，把節點的x座標值進行修改（y屬性值不變），從而實現粒子水平劃線的效果。

（二）「繼續」按鈕編程

這個「繼續」按鈕編程有兩點注意一下，下面先看其屬性檢查器關鍵部分屬性值設置狀況：

注意到，上面激活其交互功能（勾選「Interactable」），並觸發其Click事件（看後面代碼），而後實如今點擊時播放按鈕點擊的聲效。下面看相關代碼。

按鈕節點btnContinue關聯的腳本組件BtnContinue.js代碼以下：

上述代碼中僅有兩點值得說明：1，在按鈕的click觸發器函數中，播放掛載到腳本組件上的聲效文件；2，藉助系統scheduleOnce計時調度器函數，實現了在聲音播放1秒後把當前場景切換到遊戲主場景（mainscene.fire）。

5、小結

現在，Cocos Creator差很少已成長爲一個世界級遊戲工業開發工具，Scratch根本沒法與之比擬，固然也沒有必要做比較。可是，嘗試把Scratch做爲Cocos Creator簡單型遊戲開發的原型開發工具未必不是一件好事——本文思想正在做這種嘗試。本篇中，咱們實現了 Cocos Creator版本《海底世界》小遊戲的啓動場景的設計與編程邏輯。固然，真正使人興奮的事情纔剛剛出現，咱們將在下篇中全面介紹這個小遊戲主場景的實現邏輯。敬請期待……

---

（https://blog.51cto.com/cloumn/detail/88 本人拙做，歡迎交流）