1CocoStudio 簡介
CocoStudio 是由 Cocos2d-x 官方推出的一個專門針對 Cocos2d-x 游戲開發的免費工具集，目前正在開發階段，且日益完善之中！既是工具集，當然集成了現有各零零散散工具的功能，並且不斷擴充，包含動畫編輯器，UI編輯 器，場景編輯器和數據編輯器。具體內容及其特性歡迎訪問 CocoStudio 官網 http://cocostudio.org/ 。在這里，我們通過動畫編輯器來快速體驗一下 CocoStudio 為我們開發帶來的便捷~
2環境搭建與配置
本文章所使用的系統環境為 win7 系統，CocoStudio-0.2.0 版本。
在當前最新穩定版 Cocos2d-x-2.1.4 的 TestCpp 中已經有例子展示了一些相關骨骼動畫的效果。
3序列幀動畫的創建步驟
幀動畫，顧名思義！就是將一張張設計好的圖片，依次展示出來，就像放膠片電影一樣，多幀組成動畫效果。不多介紹了，直接看 CocoStudio 的使用方法。
a.打開 CocoStudio 啟動動畫編輯器
b.點擊文件新建項目，並確定
c.在資源窗口選擇添加資源，序列幀原圖（這里不支持使用plist作為資源，但可以導出plist）
d.選擇第一幀圖片，拖進“渲染窗口”，選擇工具欄第三項，居中顯示。（居中可選操作）
e.我們看見在“對象結構”視圖中多出一個層，這就是序列幀動畫層，在資源視圖多選文件（除首幀之外），
之后拖動到“對象結構”視圖中剛才那個層之上，（這句話最重要，不過貌似讀者暈了，回頭看我視頻吧）
我們將能夠看見“關鍵幀”視圖的變化，當前幀根據圖片數量自動變化，注意“對象結構”視圖中鼠標的位置。
f.點擊“關鍵幀”視圖“播放”即可播放，也可循環播放動畫
g.保存項目后，可以導出大圖，自動打包資源圖片，在本例中生成了 “CsAnim.ExportJson”,”CsAnim0.plist” 和 “CsAnim0.png” 三個文件，然后我們就能拿着這三個文件在 Cocos2d-x 中使用了。
4.如何在 Cocos2d-x 中運行其動畫
上面我們生成了一些文件，動畫的資源文件，此時我們需要在 Cocos2d-x 中加載這些資源，並運行之，我們將以上文件放在項目 “Resources” 的 “Export” 目錄之中。 然后使用如下關鍵代碼，創建動畫。
// 加載資源文件 png 圖片，plist 文件和 ExportJson 動畫文件，一般而言可以在場景運行之初加載此資源
cs::ArmatureDataManager::sharedArmatureDataManager()->addArmatureFileInfo("Export/CsAnim0.png", "Export/CsAnim0.plist", "Export/CsAnim.ExportJson");
// 這里直接使用 CsAnim ，而此信息保存在 CsAnim.ExportJson 中，與其創建的項目屬性相對應
cs::Armature* armature = cs::Armature::create("CsAnim");
// 設置當前運行動畫的索引，一個“工程”可以建立多個動畫
armature->getAnimation()->playByIndex(0);
// 設置位置信息
armature->setPosition(VisibleRect::center());
// 添加到容器，當前運行的場景之中
addChild(armature);
創建骨骼動畫
首 先，打開Cocos Studio 的 Animation Editor（動畫編輯器），新建一個動畫工程。 同Spine一樣，Cocos Studio動畫編輯器也有兩種模式，但這里是形體模式和動畫模式。用戶需要在形體模式下組裝角色部件，並為其綁定骨骼；並在動畫模式下調整骨骼相應屬性 生成骨骼動畫。
下面我們先來對編輯器整體做一個認識，見下圖。
形體模式下：
動畫模式下：
上面兩圖中，標記為1的部分是渲染區域，也就是我們的畫布，它是資源布局的主編輯區，在該區域可以對各對象進行移動，縮放，旋轉的操作，所有主要的操作結果都會在這個區域中顯示完成。
第2部分是快捷菜單欄，該窗口中有一些常用操作，其中包括模式的切換，創建骨骼，縮放，旋轉等等一系列操作。
第3部分是資源欄，本項目中使用的所有資源都必須導入到該面板才可以使用。
第4部分是預覽區域，當選中資源欄的資源時，會在該區域中顯示，達到預覽的作用。
第5部分是對象結構欄，編輯器將根據對象結構欄中對象的順序依次渲染對象，在最下層的對象將先於渲染，也就是說它可能會被后渲染的對象遮蓋。另外，對象的順序在該欄中是可調的。
第6部分是屬性欄，當選中一個對象時，屬性窗口會顯示出該對象的所有屬性。修改任意屬性都可以立即改變該節點在渲染區域的狀態。
第7部分是動作列表欄，一個動畫工程是允許有多個動作的，比如：行走、跳躍、奔跑等等。所以在該欄中用戶可以創建多個動作，並在多個動作中切換。
第8部分是動畫幀面板，該面板將顯示畫布中所有對象的序列幀，用戶可通過添加幀和改變對象屬性創建動畫序列幀。
對編輯器有了大致的了解后，現在就可以開始編輯動畫了。
1.在形體模式下，選擇 文件->導入資源 或在資源欄中右鍵選擇需要導入的資源文件，也可直接將資源拷入工程的Resources文件夾目錄下，然后刷新資源面板。
2.將資源拖到渲染區，並擺好位置。
3.開始創建骨骼：選中快捷菜單欄中創建骨骼的按鈕，在角色身體的各部位單擊左鍵並拖動鼠標畫出骨骼。
4.將資源素材與骨骼綁定，右擊渲染區的資源素材，選擇“綁定到骨骼”，然后選擇骨骼（選擇的骨骼會高亮顯示），就可以實現骨骼的綁定。
5.當綁定好所有素材和骨骼后，右擊骨骼選擇“綁定父關系”，再選擇該骨骼的父骨骼（選擇的骨骼同樣會高亮顯示），這樣依次根據身體部位的“父子”層級關系設定好。
6.切換到動畫模式，選中相應控件，移動鼠標到動畫幀一欄的某幀處，然后，改變被選擇控件的某個屬性，如旋轉它，這樣就能實現流暢的補間動畫。
7. 導出項目為程序可用的資源：導出的資源在工程目錄的Export/..文件夾下，一共有三個資源文件，分別是 .ExportJson，.plist 和 .png文件。ExportJson文件中記錄了骨骼動畫的描述信息，plist文件則是記錄碎圖整合成大圖后圖片的位置描述信息，png文件是整合的大 圖。
在 Cocos2d-x 中加載動畫資源
前面我們花了很多精力來創建骨骼動畫，然而要將它運行在實際的項目中卻非常的簡單，只需幾行代碼，當然在這之前我們需要將動畫編輯器導出的資源復制到項目Resource目錄中去。
同樣地，在Cocos2d-x程序中使用Cocos Studio動畫首先需要包含相關頭文件，如下：
#include
"cocostudio/CocoStudio.h"
usingnamespacecocostudio;
創 建一個骨骼動畫對象，需要將動畫文件和資源文件載入到程序。這里我們通過ArmatureManager動畫數據管理器來加載動畫。 ArmatureManager本身是一個單例，它管理整個場景中的Armature。而Armature則封裝了我們播放動畫需要的 Animation。由此可見，這是一個三層締結的層次結構。其中ArmatureManager最大，然后是Armature，最后是 Animation。
說完了原理，下面來看看代碼。修改init函數, 在return前加入如下代碼：
ArmatureDataManager::getInstance()->addArmatureFileInfo("NewAnimation0.png","NewAnimation0.plist","NewAnimation.ExportJson");
Armature
*armature = Armature::create("NewAnimation");
armature->setPosition(Point(visibleSize.width
* 0.5, visibleSize.height * 0.5));
//
播放動畫
armature->getAnimation()->play("walk");
this->addChild(armature);
效果圖：
我們在動畫編輯器中編輯的動作就是Animation，一個動畫工程中可以編輯多個動作，也就是動作列表中可創建多個動作。如下圖所示：
所以播放動畫需要根據具體地需要來播放，這樣才能知道用戶要播放的動畫是哪一個。可以像上面代碼一樣指定動畫名來播放動畫，也可以通過指定動作編號來播放動畫，如下：
armature->getAnimation()->playWithIndex(0);
播放連續地動畫可通過以下函數實現：
voidplayWithNames(conststd::vector<std::string>&
movementNames,intdurationTo
= -1,boolloop
=true);
voidplayWithIndexes(conststd::vector<int>&
movementIndexes,intdurationTo
= -1,boolloop
=true);