Cocos骨骼動畫功能解密

在遊戲中，人物的各種動作是必不可少，一般實現人物動作的方式有兩種，序列幀動畫或骨骼動畫。Cocos在更新到2.x版本之後，便沒有了骨骼動畫的功能，使得開發者非常困擾。終於在本次更新中，Cocos編輯器將骨骼動畫新增了回來！（注：新版本骨骼動畫需要Cocos2d-x3.8版本）

骨骼動畫與序列幀動畫

序列幀動畫是將，動畫的每一幀都是人物動作的一個快照，序列幀的幀數直接決定動畫的流暢度和平滑效果，但是同時，序列幀的數量也嚴重影響著資源包體積及圖片資源載入速度。而骨骼動畫則是把人物拆開成碎塊，然後將人物各個部分拼接到一起，併為其各部分圖片繫結到一根根互相作用連線的"骨頭"上，通過控制這些骨骼的位置、旋轉方向和放大縮小便可以做出非常流暢細膩的動畫。同時骨骼動畫編輯方式和Flash非常相似，對於擅長使用Flash的動畫編輯師來說上手非常容易。

新建骨骼動畫

首先點選螢幕右上角的 檔案->新建檔案（快捷鍵：Command+N），開啟如下介面，選擇骨骼動畫，點建立：

主介面介紹

首先我們需要了解一下編輯器介面中各個部分的功能，

我們常用的空間的位置已經不需要使用了

1.資源列表，這裡顯示你專案中所有資源，如果想編輯骨骼，首先需要將骨骼動畫的圖片匯入進來。

2.渲染區域，也就是我們的畫布。這裡是資源佈局的編輯區域，在這個區域可以各個圖片和骨骼進行移動，縮放，旋轉的操作，所有的圖片、骨骼、動畫的繫結與編輯都在這個區域完成

3.快捷選單欄，快捷選單欄中包涵一些常用操作，這裡的每個按鈕的用途會在下邊介紹。

4.屬性欄，當選中一個物件(圖片/骨骼)時，屬性欄會顯示出該物件的所有屬性。通過屬性欄可以非常精準的修改物件的屬性設定，並且立刻在渲染區域顯示出來。

5.幀曲線設定皮膚，在這個皮膚中，可以設定動畫的動畫曲線。其中預設了一些效果，也可以自己通過修改曲線自定義效果，以修改動畫的播放曲線（例如，揮劍動畫，開始時候揮劍速度慢，然後逐漸變快，就可以通過這裡輕鬆設定）。

6.動畫列表，這個皮膚會顯示出所有的物件，以及物件的關鍵幀。通過設定在關鍵幀中骨骼及圖片的變化就可以編輯出流暢的骨骼動畫了。

快捷欄介紹

1.移動畫布,永遠移動渲染區域（畫布）的顯示位置

2.平移，用於移動物件的位置，修改物件Position。

3.旋轉，物件進行旋轉操作

4.縮放，對物件進行縮放操作

平移、旋轉、縮放三個操作選中物件時候，會出現如下圖形：

對於平移或縮放操作，兩個箭頭會分別修改x,y方向的位置或大小。點選中間方形區域，則可以同時修改x,y的位置或大小。

對於旋轉操作，兩個箭頭則會逆時針/順時針旋轉物件。

5.建立骨骼，該工具可以快速連續建立骨骼，選中該工具後，在畫布上進行點選滑鼠左鍵，然後移動滑鼠，選擇合適的大小後，再次點選滑鼠左鍵，則會建立一個骨骼，並且開啟下一次的骨骼建立操作，點選滑鼠右鍵，退出編輯狀態。

（指向渲染區域中心的座標系表示該骨骼沒有父骨骼）

（黃色箭頭指向點為骨骼的頭端是旋轉、縮放、位移的中心（錨點），紅色箭頭指向則是骨骼的尾端，旋轉骨骼時候，點選骨骼尾端可以很方便的對骨骼進行準確的旋轉）

6.繫結，繫結工具用於將骨骼和圖片資源進行繫結，選中該工具後，點選要繫結的圖片，會出現一個小箭頭，再點選要繫結的骨骼即可將骨骼和圖片進行繫結，繫結後的圖片，會根據骨骼的旋轉、移動、縮放等操作進行同步的改變。

同時，繫結工具亦可將骨骼與骨骼之間進行繫結，骨骼間繫結的方式與圖片繫結方式類似：選中快捷選單欄繫結工具，點選子骨骼a，移動滑鼠會出現一個黃色的線，然後點選父骨骼b就可以了。將骨骼a繫結到骨骼b時，當骨骼b旋轉、移動時，骨骼a相對於骨骼b的位置和旋轉將不會改變。

（注：當勾選動畫列表欄中的自動記錄關鍵幀選項時，無法進行骨骼繫結操作）

（骨骼與骨骼間的繫結）

（圖片與骨骼之間的繫結）

7.解綁，解除繫結操作，與第6個繫結相反。

8.隱藏/顯示骨骼，可以切換骨骼物件的顯示狀態，關閉骨骼顯示後，可以更好的檢視各個圖片。只針對圖片進行操作，無需擔心誤修改骨骼物件。

（隱藏骨骼狀態）

9.隱藏/顯示皮膚，與第8個功能類似，可以切換圖片(皮膚)的顯示狀態，只針對骨骼物件進行操作，無需擔心誤修改圖片。

（隱藏皮膚狀態）

10.檢視骨骼關係，這個功能可以更好地對骨骼物件及圖片進行繫結管理操作，通過列表形式清楚的展現出各個物件之間的繫結關係。

對編輯器的各個功能有了初步瞭解後，我們就可以開始編輯骨骼動畫了。

編輯骨骼動畫

1.首先在資源列表區域點選右鍵，選擇 匯入資源 ，也可以將資源直接拖拽進入資源列表（注意，這裡不同動畫之間的骨骼也儘量不要出現命名重複）

2.將資源列表中的圖片拖拽到渲染區，並一一擺好位置

3.根據擺放好的圖片，建立骨骼：選中快捷選單欄中的建立骨骼按鈕，在人物身體部位（圖片）的軸心（旋轉中心）上單擊左鍵，將滑鼠移動到旋轉半徑的另一頭，再次點選左鍵，便可以建立出一個骨骼，然後點選滑鼠右鍵，取消骨骼編輯。（重複以上操作直至建立好所有骨骼）

4.將人物身體各部分圖片與骨骼繫結：點選快捷選單欄中的繫結按鈕，然後單擊左鍵選擇要繫結的圖片，這時移動數遍會出現一個黃色的箭頭，將滑鼠移動到要繫結的骨骼上邊，再次點選左鍵，便可將圖片與骨骼繫結。這時，黃色箭頭會變為紅色箭頭。（重複以上操作直至將所有圖片與骨骼繫結完畢）

如果希望解除繫結，選擇要解除繫結的骨骼，點選快捷選單欄中的"解除"按鈕即可。

5.建立骨骼的父子關係：本步驟操作是將骨骼與骨骼之間進行繫結，形成一種父子關係，當父骨骼產生位移或旋轉時候，子骨骼也會跟隨父骨骼變化。

操作步驟與繫結圖片相似，首選點選快捷選單欄的繫結按鈕，然後左鍵單擊要繫結的子骨骼，然後將滑鼠移動到要繫結的父骨骼上，再次單擊左鍵即可。

（骨骼間的父子繫結關係）

6.編輯動畫，當所有的骨骼和圖片之間的關係設定完畢後，就可以開始編輯骨骼動畫了。

（1）先新增第一幀（初始位置的關鍵幀），先將0幀位置的所有物件都選中，然後右鍵選擇 "新增幀"

將初始位置新增關鍵幀後，為了讓動畫能夠形成一個閉環，我們需要將動畫的首尾狀態設定的一致，全選所有物件的初始位置的關鍵幀，右鍵->複製，然後到動畫最後一幀（例如1秒的動畫，最後一幀預設為60幀），右鍵->貼上。

（2）勾選自動記錄關鍵幀的核取方塊，開始編輯其他幀，將時間軸拖動到到某一幀上(如10幀)，對人物骨骼的位置角度進行編輯，這時，編輯器將會自動記錄一個關鍵幀，兩個關鍵幀之間會自動進行補幀，以保證動畫播放流暢。（補幀是不會顯示出來的）

（3）編輯完動畫後，需要對動畫進行分組，以方便後邊播放，點選動畫欄中的小加號，輸入一個動畫名稱，然後選擇動畫在時間軸的幀數範圍即可

（4）將動畫編輯好後，點選三角按鈕可以進行播放，檢視動畫效果

（圖中60fps表示每秒包涵多少幀，幀數越高動畫越細膩，一般保持與螢幕重新整理幀數相同即可（預設60幀）即可）

（5）為骨骼動畫新增幀事件：幀事件的意思是在骨骼動畫播放到某幀的時候，會產生一個事件，程式可以對事件進行監聽，當收到事件時候，進行不同的動作，例如播放另外一個動畫，開槍，或者播放技能效果等。

首先我們需要選中一個幀作為幀事件觸發的時機。

接下來，在屬性皮膚中，展開高階屬性選單，在幀事件欄中輸入幀事件的名字（可以重複，除非特殊需要，請不要重複）即可。

7.匯出骨骼動畫：點選螢幕左上角的使用上次設定釋出圖示，可以匯出骨骼動畫，預設是csb格式，可以通過點選邊上的小箭頭進行匯出設定。

8.在Cocos編輯器的Layer或者Scene中載入編輯好的骨骼動畫

新版骨骼動畫在Cocos的載入方式比載入1.6版本的骨骼動畫要方便一些，只需要從資源皮膚中直接拖入Layer或者Scene的畫布上即可。（1.6版本的骨骼動畫需要使用自定義控制元件載入）

載入動畫後，我們可以在屬性皮膚中對骨骼動畫進行一些設定，在特寫欄目下，我們可以設定動畫的播放。

巢狀動畫的型別有三種

SingleFrame表示只顯示一個靜態的動畫（也就是骨骼動畫的某一幀，下邊的幀就是設定顯示的幀數）

NoLoopAction與LoopAction的介面是一樣的，這個用於設定播放的動畫，下邊名稱指的是播放哪個動畫。（NoLoopAction不迴圈播放，LoopAction迴圈播放）

9.最後，我們可以在Layer或者Scene的動畫欄中，設定在某關鍵幀切換骨骼動畫所播放的動畫以及是否迴圈的狀態：

在程式中應用骨骼動畫

Cocos編輯器匯出的骨骼動畫可以很方便的放到Cocos的專案中使用，首先將匯出的骨骼動畫和圖片資源拷貝到專案的Resource目錄下。

在Cocos專案中使用骨骼動畫很簡單(以C++為例)(注意：新版骨骼動畫載入方式與1.6版本不同)

上邊我們談到骨骼動畫支援幀事件，下邊我們來看一下如何註冊一個幀事件的監聽

通過以上步驟，我們就可以靈活的使用Cocos的骨骼編輯器製作出非常流暢且節約資源的骨骼動畫了。

對於1.6骨骼動畫的相容

對於之前1.6版本製作的骨骼動畫，Cocos編輯器是可以直接匯入的， 檔案->匯入->匯入1.6版本專案，選擇1.6的骨骼動畫專案即可