Cocos Creator 小遊戲之找財神（上）

阿新 • • 發佈：2022-02-21

好久沒有更新開發小遊戲的文章了，今天開始計劃每週更新一篇，希望能堅持吧。

這周我更新的遊戲是：找財神。

玩法

玩法很簡單，在很多圖片裡面找到財神在哪裡，然後選中財神就算過關

難點

越往後面圖片生成的越多，怎麼保持效能？
財神隱藏的位置如何定位？
圖片如何生成？

我們先從第一步開始，先把首頁做出來

我們可以分析一下頁面中的元素，主要是有三個：

背景圖
尋找財神爺 banner 圖
開始挑戰按鈕

分析完成後，我們開始開啟 Cocos Creator 來開始編寫遊戲

編寫遊戲

新建專案

注意：在這裡我們選擇的編輯器是 3.4.1 ，大家要注意一下， 3.x 系列的版本和 2.x 系列的版本在操作上有很大的區別！！

選擇專案

將素材新增到專案中

主要是將 背景圖、banner 圖片、按鈕圖 放進去

設定專案設計解析度

在 Cocos Creator官方中推薦 IOS 的寬高為 640 * 1136，因此我們這裡也設定為 640 * 1136。適配螢幕寬度和 適配螢幕高度不勾選。

新建場景

由於我們製作的場景至少有兩個，所以我們用 scenes 資料夾來統一管理場景。

新建背景圖

新建 background層之後，就會出現如下內容：

然後選中 background層，設定右側 cc.Sprite中的 SpriteFrame，選中背景圖圖片

選中之後，我們就會看到編輯中就顯示了背景圖

預覽遊戲

現在我們點選編輯器上面的預覽按鈕我們看看遊戲在瀏覽器中顯示的情況

我們發現頭部有一部分擷取掉了，這個時候，我們有兩種方式來處理：

修改 background節點的錨點定位的 y值。
給 background節點新增 Wiget元件來修改 y定位值。

在這裡我們選擇第二種方式來處理。

修改好了之後，我們看看效果：

在 iphone SE中，圖片顯示正常。

將 banner圖片直接拖到遊戲場景中，Cocos Creator會自動建立一個 banner節點。

banner有一個從上往下的一個動畫效果，因此我們現將 banner拖到背景圖的頂部外面。

首先在 banner節點中新增 Animation元件

在 動畫編輯器-新建動畫剪輯資源新建一個 banner動畫剪輯資源

然後在 DefaultClip中會顯示這個剪輯資源，如果沒有的話，點選右邊的滑鼠按鈕可以選擇對應的剪輯資源

進入動畫編輯模式

進入動畫編輯模式後，編輯器介面就會發生變化

我們要做的動畫是從上往下掉落的動畫，也就是 y軸的移動，點選屬性列表右側的加號，選擇 position

現在就是比較關鍵的環節了，這裡有一個概念需要講一下，就是動畫運動的原理，動畫的本質是連成連貫動作的一幀幀靜態圖。而我們這裡的動畫需要設定兩個關鍵幀：

初始關鍵幀，圖片初始位置在哪裡
結束關鍵幀，圖片結束位置在哪裡

首先我們設定 第0幀是關鍵幀，初始位置就是我們剛才設定的 banner的位置，然後設定 第10幀為關鍵幀，我們將 banner圖拖到結束位置。

我們可以點選上面的播放按鈕看看動畫運動的效果。然後儲存一下，到瀏覽器中預覽一下效果。

如果直接預覽的話，你會發現沒有動畫效果，主要因為 Animation元件中的 PlayOnLoad沒有勾選。這個是說頁面載入完後就開始執行動畫。

勾選 PlayOnLoad就可以了。

我們仔細看一下上面的動畫，有一個跳動的動畫，我們現在來製作一下。

首先點選，然後顯示出，選擇 y軸。

這個動畫是先往下跳，然後再往上跳，最後運動到結束位置，這樣我們需要設定 3 個關鍵幀。

單擊右鍵就可以在想設定關鍵幀的位置 新建關鍵幀。

我這裡最後的關鍵幀就是這樣的：

就這樣 banner動畫就編寫完成了。

新增按鈕及按鈕動畫

按照上面 banner一樣，將 button拖到遊戲位置

然後我們開始建立按鈕的震動動畫，按照 banner裡面一樣，我們新建好動畫剪輯資源。

我們仔細看看按鈕動畫：

這個截圖有問題，震動頻率太快無法截圖出來，最後效果應該：

放大
左右兩邊震動
縮小

我們新增 scale和 rotation(eulerAngles)兩個屬性。

第 0幀，放大按鈕，縮放 x和 y 新增 0.1

第 1幀，角度調整，Rotation中的 z軸調整為 3。

第 2幀，角度調整，Rotation中的 z軸調整為 -3。

...迴圈震動下去

最後一幀，全部恢復，就這樣動畫完成了。

現在我們看看效果

這裡有一個問題，banner動畫和 button的動畫是一起執行的，而案例中是 banner動畫執行完成後才播放 button的動畫，我們這裡調整一下

首先，將 button中的 PlayOnLoad不要勾選
新建一個 banner.ts檔案繫結到 banner節點中
在 banner動畫最後一幀中插入幀事件

建立幀事件 animateEnd，新增 boolean引數，並且勾選，這表示傳入過去的引數是 true，不勾選就是 false。

在 banner.ts中編寫按鈕播放程式碼

//新增一個按鈕輸入框，將 button 節點繫結上去
@property({
	type:Node,
	tooltip:'按鈕'
})
startbtn = null
//播放結束後執行這個幀函式
animateEnd(is){
  //按鈕動畫開始播放
	this.startbtn.getComponent(Animation).play()
}