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

一、快照回憶與簡介

為了輔助理解小遊戲實現流程與程式設計邏輯，恕我再複製上一篇中快照，供閱讀參考。

主場景快照

遊戲主場景檔名是：mainscene。fire。

透過主場景程式設計，讀者能夠很好地學習到Cocos Creator程式設計中的如下一些知識：

屬性動畫與幀動畫設計與程式設計技巧

基本碰撞檢測系統程式設計

聲音程式設計控制技巧

計時器與玩家輸入事件程式設計

幀事件程式設計

二、主場景層級管理器與資源管理器架構

由於Cocos Creator 是以內容創作為核心的遊戲開發工具，它的IDE的操作既照顧到了美工又考慮程式設計師，所以具有半設計與半程式設計特徵——當然程式設計還是主要開發任務。所以，為了方便讀者理解後面解釋，先給出這個小遊戲的層級管理器與資源管理器架構描述。

資源管理器架構

主場景層級管理器

三、靜態幀動畫、屬性動畫製作流程

Scratch軟體中幀動畫也就是指在迴圈語句的控制下不斷切換某角色多個造型的動畫，這裡的一個關鍵幀對應一個角色造型。而屬性動畫則是指同一角色在迴圈語句中不斷修改其某個或者某幾個屬性值的動畫，例如不斷修改某角色的旋轉角度、座標值、顏色等。這種動畫在Scratch中實現起來更是家常便飯。當然，這兩種動畫在著名的Flash動畫軟體中也是兩種主流的型別。

Cocos Creator中，也同樣支援上述兩種動畫的建立，而且也比較簡單方便。本遊戲中，場景頂部小黃魚和小紅魚就是使用了這兩種動畫技術。因為它們的出場主要是為了襯托場景，所以設計成固定的動畫——一直在不停地播放，並不參與場景中角色的碰撞及其他事件。在此，我們以小黃魚動畫為例說明這類動畫的設計思路。

（1）在層級管理器根節點上建立一個空節點，並命名為yellowfish。然後，為其新增一個Sprite型別的子節點。

（2）點選Sprite子節點，點選動畫編輯器視窗左上角的“開啟/關閉編輯模式”開關按鈕。此時視窗中間出現一個按鈕［新增Animation元件］提示需要新增一個Animation元件，點選［確定］即可。

新增Animation元件提示

之後，出現如下提示新增動畫剪輯檔案的提示：

提示新增動畫剪輯檔案

之後，點選按鈕［新建Clip檔案］，系統提示儲存新建動畫剪輯檔案的檔名及位置確定。

（3）點選動畫編輯器視窗左上角的“開啟/關閉編輯模式”開關按鈕進入編輯動畫模式。然後，點選下部“Add Property”按鈕，新增兩個屬性：position和cc。Sprite。spriteFrame。新增position是為了調整小魚的x座標值，實現小魚在場景中左右遊動動畫。新增cc。Sprite。spriteFrame屬性則是為了針對此屬性在不同時間點上新增不同的小魚造型影象，實現幀動畫。本遊戲中，透過修改這兩個屬性便可以實現小魚左右遊動，而且在遇到場景邊緣時掉頭返回的動畫效果。參考下面動畫編輯器截圖：

動畫編輯器屬性設定截圖

（4）現在，看一下小黃魚元件（Sprite）屬性檢查器中Animation屬性值設定：

Animation屬性值設定

本例中，是在一個空的Node節點下再新增的一個Sprite元件上編輯動畫屬性的，其實也可以直接在場景的層級管理器中新增Sprite元件併為之編輯動畫屬性建立動畫。因為我們使用前者方式，所以在這裡的屬性檢查器屬性設定時也要為“Default Clip”設定屬性值，即把動畫中的第一個關鍵幀影象拖動到此屬性處。

（5）現在來看一下緩動動畫效果設計。在前面動畫編輯器中易見共有三個關鍵幀，分別對應三個影象（其中第一、三個是相同的），對應三個位置。

雙擊相鄰position屬性這一行（不可以是上面的藍粗線！）上的兩個關鍵幀間的深藍色線即可進入到緩動動畫編輯介面，如下圖所示：

緩動動畫編輯介面

透過上圖中的編輯，我們實現了小黃魚從起始位置（最右邊，且頭朝左）遊動越來越快的動畫效果（注意圖中的曲線上不同點的斜率代表精靈速度變化快慢）。同理，再為小魚掉頭後遊動設定另一種緩動動畫效果，在此省略描述。

點選最左側儲存命令即可儲存當前編輯資訊，或者點選X圖示關閉此視窗。返回到原來的動畫編輯器後再點選左上角“開啟/關閉編輯模式”開關按鈕儲存並退出動畫編輯狀態。

至此，小黃魚動畫編輯完畢。

最後，注意到上面小黃魚精靈屬性檢查器中勾選了“Play On Load”選項，實現了場景執行後動畫自動播放，從而不需要編寫任何程式碼。上面的工作，美工人員略經培訓即可獨立完成，這也正體現了Cocos Creator值得稱道的優點之一。

接下來，小紅魚的動畫效果是水平方向左右勻速遊動，更為簡單，在此省略介紹。

另外，細心的朋友還會注意到，場景中有三個不斷上升的水泡泡，其動畫效果也是使用了上述原理實現的，在此一併略去介紹。

四、水螅jellyfish動畫設計與程式設計

水螅精靈的設計有三項任務：

（1）遊戲中它總是在不斷地切換其4個造型，從而透過幀動畫方式實現動畫效果。

（2）玩家透過操作鍵盤上的上下左右或者WSAE四個字母鍵實現控制水螅四個方向的移動，目的是為了躲避海星。

（3）與遊動的小海星碰撞檢測。

有關（1）中幀動畫方式，我略去介紹，其實現原理與上面小黃魚動畫一致，完全不用程式設計即可達到動畫目的。

（一）鍵盤控制水螅移動

為了實現鍵盤控制水螅沿四個方向的移動，需要程式設計。為此，需要建立一個指令碼元件JellyfishControl（然後，透過給jellyfish這個Sprite節點新增“使用者指令碼元件”方式把此指令碼元件繫結到精靈節點上），程式碼如下：

鍵盤控制水螅移動程式碼

上面的程式碼基本上算是基礎性模板程式碼，沒有太多值得解釋的地方。如果說有的話，只有一點，就是私有變數__delta表示水螅移動的偏移值（為了簡化，水平方向與垂直方向偏移值相同）。

（

二）與小海星碰撞檢測

關於Cocos Creator遊戲中基礎型別碰撞檢測程式設計，大致遵循如下步驟：

1.編制碰撞檢測矩陣

碰撞檢測矩陣

點選選單命令［專案］－［專案設定。。。］，開啟如上圖所示的［專案設定］視窗，透過“分組管理”選項卡即可建立遊戲場景中參與碰撞的元素的分組配對。根據場景中能夠發生碰撞的精靈多少及組數，建立碰撞分組。本遊戲簡單；所以，除了預設的default組外，只建立了一個fish組——fish組內部的精靈可碰撞（後面我們讓海星與水螅都屬於fish這一組），並可進行碰撞檢測。

2.指定分組

針對遊戲中要碰撞的精靈，透過其屬性檢查器Node物件上Group屬性值選擇，即可指定其所在的碰撞分組，如圖所示：

指定水螅碰撞分組

3.為水螅精靈繫結

多邊形碰撞元件

這一步很簡單，只需要在水螅精靈上“新增元件”－“碰撞元件”－“Polygon Collider”即可。因為水螅精靈體形極不規則，所以選擇此形狀的元件。有關此概念的更多介紹，請參考Cocos Creator官方解釋，在此省略。

很顯然，後面的小海星要參與碰撞，也要給它指定分組，並繫結碰撞元件（也使用“Polygon Collider”）。

4.監聽碰撞

建立指令碼元件ColliderListener，並把它繫結到水螅精靈上，程式碼如下。

監聽碰撞指令碼

上面指令碼中有三點值得注意。

（1）透過定義一個公開型別的audioSource屬性（cc。AudioSource型別），實現在與海星發生碰撞後播放碰撞聲效。請參考列舉在文章前面的層級管理器上的starfish_screech_sound節點（它是一個綁定了AudioSource元件的Node物件）。

（2）為了參與碰撞檢測，下面這一句程式碼必不可少：

cc。director。getCollisionManager（）。enabled = true；

（3）在碰撞事件處理器onCollisionEnter中，順便實現了檢索繫結到水螅精靈上的動畫元件，並播放水螅精靈的造型切換動畫。

到此，水螅精靈這邊的設計與程式設計工作結束。

五、海星動畫設計與程式設計

海星這邊的程式設計任務有：自身動畫播放；與水螅進行碰撞檢測；碰撞後掉頭跑動畫效果，等等。

其中，有關碰撞檢測的準備工作，前面已經說明，在此不再贅述。

但是，為了參與碰撞檢測，海星也要繫結到指令碼元件ColliderListener上，程式碼同上。

現在，我們來看一下海星的動畫編輯器設計情況：

海星的動畫編輯器設計

由上圖可見，這裡也使用了幀動畫技術。

在目前最新的Cococ Creator 2。3。1版本中，cc。Sprite。spriteFrame這樣的屬性不能建立緩動動畫效果！緩動只能是針對Node的大小、位置、顏色等屬性實現的。

上圖中有一點值得關注的是，在最後一個關鍵幀處有一個小白塊，我們正是在此外建立了一個幀事件（透過點選左上方貼近+號左側的帶有斜向箭頭小按鈕啟用此操作；然後，在隨後出現的對話方塊中輸入幀事件函式名，並指定可能的引數即可）。

上面事件的含義是，當小海星碰撞到水螅時啟用這個幀事件函式的執行，其程式碼如下：

海星碰撞前後的部分動畫程式碼

上面程式碼中有幾點需要注意：

（1）透過定義一個私有變數_speed與Cocos Creator中重新整理螢幕函式update（預設每幀呼叫一次）結合，實現了控制海星在場景中的左右遊動。

（2）場景的寬度在此硬編碼為800畫素；因此，當海星運動到最左邊和最右邊時需要掉頭，這是透過修改Node元件scaleX值為相反值來實現的。

（3）如你所猜想的，前面定義的幀事件函式正是onStarfishAnimationEnded。當海星碰撞到水螅時差不多也正是海星動畫結束時，透過上面函式中簡短程式設計實現了二者遭遇後海星掉頭就跑的動畫效果。

六、總結

本系列第一篇中，我曾經提到使用Scratch嘗試作Cocos Creator開發中快速原型測試的事，本文中幾乎未正面提及多少。其實，在整個Cocos Creator程式設計中，我一直在對比二者在實現類似功能時的各自實現方案及其相通之處。大致來看，由於Cocos Creator新的設計理念及架構的引入，使得遊戲開發程序大大縮減。

說到底，本文實現的僅是一個粗糙不堪的Cocos Creator小遊戲的開發試驗，僅供初學者參考而已。後面有時間，我會真正做一個先使用Scratch作原型再使用Cocos Creator作後期開發工具的例子與各位分享。