Cocos2d-x遊戲開發之骨骼動畫詳解－Spine
遊戲中人物的走動，跑動，攻擊等動作是必不可少，實現它們的方法一般採用幀動畫或者骨骼動畫。
幀動畫與骨骼動畫的區別在於：幀動畫的每一幀都是角色特定姿勢的一個快照，動畫的流暢性和平滑效果都取決於幀數的多少。而骨骼動畫則是把角色的各部分身體部件圖片綁定到一根根互相作用連接的“骨頭”上，通過控制這些骨骼的位置、旋轉方向和放大縮小而生成的動畫。
它們需要的圖片資源各不相同，如下分別是幀動畫和骨骼動畫所需的資源圖： 
骨骼動畫比傳統的逐幀動畫要求更高的處理器性能，但同時它也具有更多的優勢，比如：
- 更少的美術資源： 骨骼動畫的資源是一塊塊小的角色部件（比如：頭、手、胳膊、腰等等），美術再也不用提供每一幀完整的圖片了，這無疑節省了資源大小，能爲您節省出更多的人力物力更好的投入到遊戲開發中去。
- 更小的體積： 幀動畫需要提供每一幀圖片。而骨骼動畫只需要少量的圖片資源，並把骨骼的動畫數據保存在一個 json 文件裏面（後文會提到），它所佔用的空間非常小，並能爲你的遊戲提供獨一無二的動畫。
- 更好的流暢性： 骨骼動畫使用差值算法計算中間幀，這能讓你的動畫總是保持流暢的效果。
- 裝備附件： 圖片綁定在骨骼上來實現動畫。如果你需要可以方便的更換角色的裝備滿足不同的需求。甚至改變角色的樣貌來達到動畫重用的效果。
- 不同動畫可混合使用： 不同的骨骼動畫可以被結合到一起。比如一個角色可以轉動頭部、射擊並且同時也在走路。
- 程序動畫： 可以通過代碼控制骨骼，比如可以實現跟隨鼠標的射擊，注視敵人，或者上坡時的身體前傾等效果。
骨骼動畫編輯器——Spine
Spine是一款針對遊戲的2D骨骼動畫編輯工具,它具有良好的UI設計和完整的功能，是一個比較成熟的骨骼動畫編輯器。Spine旨在提供更高效和簡潔的工作流程，以創建遊戲所需的動畫。
使用Spine創建骨骼動畫分兩大步驟：
- 在SETUP模式下，組裝角色部件，爲其綁定骨骼；
- 在ANIMATE模式下，基於綁定好的骨骼創建動畫。
下面簡單介紹下具體步驟，更多詳細內容請查看官方網站教程：Spine快速入門教程。
1）在SETUP模式下，選中Images屬性，導入所需圖片資源所在文件夾，其中路徑名和資源名中不能出現中文，否則解析不了；
2）拖動Images下的圖片到場景，對角色進行組裝（把各個身體部位拼在一起），可通過Draw Order屬性調整圖片所在層的順序；
3）創建骨骼，並綁定圖片到骨骼上，要注意各骨骼的父子關係。
4）切換到ANIMATE模式，選中要“動”的骨骼，對其進行旋轉、移動、縮放等操作，每次改動後要記得打關鍵幀。
5）在菜單欄找到Texture Packer項，對角色紋理進行打包，資源文件後綴爲atlas（而非Cocos2d-x常用的plist）。打包後將生成兩個文件，即：png 和 atlas。 
6）導出動畫文件Json。
Spine動畫的使用
Cocos2d-x程序中，使用Spine動畫首先需要包含spine的相關頭文件。
|
1
2
3
|
#include
<spine/spine-cocos2dx.h>#include
"spine/spine.h"usingnamespacespine; |
其常用方法如下：
創建一個Spine動畫對象，將動畫文件和資源文件導入。
|
1
|
auto
skeletonNode = newSkeletonAnimation("enemy.json","enemy.atlas"); |
骨骼動畫往往是不止一個動畫的，例如：當人物需要行走時，就設置播放動畫爲行走；當要發動攻擊時，就設置播放動畫爲攻擊。下面方法可以設置當前播放動畫，其中參數false表示不循環播放，true表示循環播放。
|
1
|
skeletonNode->setAnimation(0,"walk",true); |
setAnimation方法只能播放一種動畫，所以當要連續播放不同的動畫時，需要使用addAnimation方法來實現，它可以一條一條的播放不同的動畫。
|
1
2
|
skeletonNode->addAnimation(0,"walk",true);skeletonNode->addAnimation(0,"attack",false); |
對於一般情況下，動畫的切換要求兩個動畫完全能銜接上，不然會出現跳躍感，這個對於美術來說要求很高，而Spine加了個動畫混合的功能來解決這個問題。使得不要求兩個動畫能完全的銜接上，比如上面的walk和attack動畫, 就是銜接不上的，直接按上面的辦法播放，會出現跳躍，但是加了混合後，看起來就很自然了。哪怕放慢10倍速度觀察，也完美無缺。這個功能在序列幀動畫時是無法實現的，也是最體現Spine價值的一個功能。
|
1
2
|
skeletonNode->setMix("walk","attack",
0.2f);skeletonNode->setMix("attack","walk",
0.4f); |
設置動畫的播放快慢可通過設置它的timeScale值來實現。
|
1
|
skeletonNode->timeScale
= 0.6f; |
設置是否顯示骨骼通過設置debugBones，true表示顯示，false表示隱藏。
|
1
|
skeletonNode->debugBones
= true; |
例子：創建一個player行走和攻擊的動畫, 並且循環播放。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
auto
skeletonNode = newSkeletonAnimation("enemy.json","enemy.atlas");skeletonNode->setMix("walk","attack",
0.2f);skeletonNode->setMix("attack","walk",
0.4f);skeletonNode->setAnimation(0,"walk",false);skeletonNode->setAnimation(0,"attact",false);skeletonNode->addAnimation(0,"walk",false);skeletonNode->addAnimation(0,"attact",true);skeletonNode->debugBones
= true;Size
windowSize = Director::getInstance()->getWinSize();skeletonNode->setPosition(Point(windowSize.width
/ 2, windowSize.height / 2));addChild(skeletonNode); |
效果圖： 