使用CocoStudio建立Cocos2d-x序列幀和骨骼動畫

一葉|2013-09-29 11:25|13833次浏覽| CocoStudio(3)骨骼動畫(1) 0

1 CocoStudio 簡介

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 的使用方法。

1.打開 CocoStudio 啟動動畫編輯器

2.

2.點選檔案建立項目，并确定

3.在資源視窗選擇添加資源，序列幀原圖（這裡不支援使用plist作為資源，但可以導出plist）

4.選擇第一幀圖檔，拖進“渲染視窗”，選擇工具欄第三項，居中顯示。（居中可選操作） 

5.我們看見在“對象結構”視圖中多出一個層，這就是序列幀動畫層，在資源視圖多選檔案（除首幀之外），之後拖動到“對象結構”視圖中剛才那個層之上，我們将能夠看見“關鍵幀”視圖的變化，目前幀根據圖檔數量自動變化，注意“對象結構”視圖中滑鼠的位置。 

6.點選“關鍵幀”視圖“播放”即可播放，也可循環播放動畫  

7.儲存項目後，可以導出大圖，自動打包資源圖檔，在本例中生成了 “CsAnim.ExportJson”,”CsAnim0.plist” 和 “CsAnim0.png” 三個檔案，然後我們就能拿着這三個檔案在 Cocos2d-x 中使用了。

4 如何在 Cocos2d-x 中運作其動畫

上面我們生成了一些檔案，動畫的資源檔案，此時我們需要在 Cocos2d-x 中加載這些資源，并運作之，我們将以上檔案放在項目 “Resources” 的 “Export” 目錄之中。 然後使用如下關鍵代碼，建立動畫。例子代碼可以從這裡下載下傳學習使用：http://www.cocostudio.org/detail.php?id=4062

1 2 3 4 5 6 7 8 9 10 11

<a href= "http://www.cocostudio.org/detail.php?id=4062" style= "margin:0px;padding:0px;border:0px;outline:0px;vertical-align:baseline;transition:background-color 0.15s linear, color 0.15s linear;-webkit-transition:background-color 0.15s linear, color 0.15s linear;line-height:2em;" >// 加載資源檔案 png 圖檔，plist 檔案和 ExportJson 動畫檔案，一般而言可以在場景運作之初加載此資源 cs::ArmatureDataManager::sharedArmatureDataManager()-&gt;addArmatureFileInfo( "Export/CsAnim0.png" , "Export/CsAnim0.plist" , "Export/CsAnim.ExportJson" ); // 這裡直接使用 CsAnim ，而此資訊儲存在 CsAnim.ExportJson 中，與其建立的項目屬性相對應  cs::Armature* armature = cs::Armature::create( "CsAnim" ); // 設定目前運作動畫的索引，一個“工程”可以建立多個動畫 armature-&gt;getAnimation()-&gt;playByIndex(0); // 設定位置資訊 armature-&gt;setPosition(VisibleRect::center()); // 添加到容器，目前運作的場景之中 addChild(armature);</a>

5 骨骼動畫的建立

前面我們使用了 CocoStudio 動畫編輯器建立并在遊戲中使用了序列幀動畫，那麼我們現在看看怎麼使用其建立骨骼動畫，相比序列幀動畫，其導出的檔案使用方法和序列幀相同，這裡詳細介紹下怎麼使用動畫編輯器建立骨骼動畫。

骨骼動畫建立步驟稍微複雜，請注意版本變化，操作可能不同

http://bbs.cocostudio.org/forum.php?mod=viewthread&tid=168&extra=page%3D1

1.首先建立項目，把準備好的資源圖檔導入 

2.我們需要得資源一個個拖動到“渲染視圖”并擺放好位置關系，注意“對象視圖”可以上下移動層次，以改變顯示的位置關系（前後關系）Ctrl+滑鼠滾輪可以放大或是縮小“渲染視圖”，空格加拖動可以拖動渲染視圖，友善編輯

3.位置擺好，我們就開始建立骨骼體系了，我們以身體作為基準建立

4. 

修改編輯模式，預設是動畫模式，點選工具欄“動畫模式”，然後會轉變成“體型模式”，然後點選“停止建立骨骼”會轉變為“建立骨骼模式”，然後就可以添加骨骼，我們在身體的部位用滑鼠畫出骨骼！可以連續畫出多個。

5.退出“建立骨骼模式”至“停止建立骨骼”模式，我們看到骨骼已經畫出，現在要做的就是資源素材與骨骼的綁定，和骨骼的結構關系設定。

6. 

右擊渲染場景的資源，選擇“綁定到骨頭”，然後選擇骨骼（選擇的骨頭高亮顯示），依次設定綁定所有   

7.“如果綁定，可能會丢失圖層幀資訊，是否繼續？”直接是即可。

8. 

右擊骨骼“綁定到父親”，依次根據身體部位設定好。

依照以上方法設定好資源圖檔與骨骼的對應關系，當然還有各骨骼之間的“父子”關系。 至此骨骼體系已經建立完成，下面則是基于此建立動畫效果

1.首先切換到“動畫模式”，不同的模式功用不同

2.選中目前幀的所有層，并且複制

3.複制之後，在“如”第十五幀之處右擊粘貼  

4.以上的複制粘貼的目的是為了使動畫的首幀與尾幀相同，完成一個動畫循環效果 

5.有了首尾幀，我們便可在中間幀編輯動畫，選中“如”第六幀，然後拖動如圖“手槍”骨骼  

6.點選播放就能看見動畫效果了，我們可以在定位到其它幀，然後編輯骨骼的位置關系，最終建立出達到我們預期效果的骨骼動畫

使用 CocoStudio 的動畫編輯器來建立動畫的簡單步驟如上過程，這裡隻是簡單快速的 “預覽” 了一下其功能，但是更多的需要使用者動手的實際操作。