Cocos Creator 2.3開發《海底世界》小遊戲(1)

##一、簡介

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

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

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

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

二、遊戲角色及關係

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

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

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

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

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

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

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

本小遊戲的運行時片斷視頻如下：

瀏覽器版本過低，暫不支持視頻播放

下面給出一幅上面視頻中的靜態快照：

快照一瞥

三、功能流程圖

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

Cocos Creator版本的遊戲功能模塊圖

四、代碼分析

啟動場景文件名稱為welcome.fire，其設計時截圖如下：

啟動場景設計時快照

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

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

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

粒子系統節點位置

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

粒子系統節點有關屬性值設置

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

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

動畫剪輯文件particle.anim設計

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

（二）「繼續」按鈕編程

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

繼續按鈕屬性設置

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

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

腳本組件BtnContinue.js代碼

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

五、小結

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