骨骼動畫詳解 Cocos Studio

在之前的骨骼動畫詳解－spine一文中，我們已經介紹過什麼是骨骼動畫，骨骼動畫的優缺點，以及骨骼動畫編輯器－spine的使用。接下來本文將結合另乙個可編輯骨骼動畫的編輯器（cocos studio）介紹骨骼動畫的使用。

cocos studio是一套基於cocos2d-x的免費遊戲開發工具集，它能幫助開發者快速建立遊戲資源，將大部分繁瑣的遊戲開發工作使用編輯器來快速製作，進一步幫助遊戲開發者減短開發周期、提高開發效率。

cocos studio本身不光只是針對骨骼動畫的編輯而設計的，它還提供了ui、場景和資料等資訊的編輯工作。就當前的cocos studio而言，主要分兩種，一種是win版本的cocos studio，另乙個則是剛剛發布不久的mac版 cocos studio v1.0 alpha1。前者由ui編輯器、動畫編輯器、場景編輯器和資料編輯器四部分組成，分別用於處理遊戲中的ui介面、動畫資源、遊戲場景和遊戲資料。而mac版的cocos studio整合了原有的ui和動畫編輯器，使小夥伴們的使用更加自由。但由於mac版的編輯器現在還不穩定，所以本文將介紹win版本的cocos studio。

win版cocos studio的動畫編輯器支援關鍵幀動畫，序列幀動畫，骨骼動畫等多種動畫編輯方式。並且它還支援碎圖匯出，整圖匯出等多種資源優化方式。同時動畫編輯器支援對flash，psd，plist資源的解析。

首先，開啟cocos studio 的 animation editor（動畫編輯器），新建乙個動畫工程。

同spine一樣，cocos studio動畫編輯器也有兩種模式，但這裡是形體模式和動畫模式。使用者需要在形體模式下組裝角色部件，並為其繫結骨骼；並在動畫模式下調整骨骼相應屬性生成骨骼動畫。

下面我們先來對編輯器整體做乙個認識，見下圖。

形體模式下：

動畫模式下：

上面兩圖中，標記為1的部分是渲染區域，也就是我們的畫布，它是資源布局的主編輯區，在該區域可以對各物件進行移動，縮放，旋轉的操作，所有主要的操作結果都會在這個區域中顯示完成。

第2部分是快捷選單欄，該視窗中有一些常用操作，其中包括模式的切換，建立骨骼，縮放，旋轉等等一系列操作。

第3部分是資源欄，本專案中使用的所有資源都必須匯入到該面板才可以使用。

第4部分是預覽區域，當選中資源欄的資源時，會在該區域中顯示，達到預覽的作用。

第5部分是物件結構欄，編輯器將根據物件結構欄中物件的順序依次渲染物件，在最下層的物件將先於渲染，也就是說它可能會被後渲染的物件遮蓋。另外，物件的順序在該欄中是可調的。

第6部分是屬性欄，當選中乙個物件時，屬性視窗會顯示出該物件的所有屬性。修改任意屬性都可以立即改變該節點在渲染區域的狀態。

第7部分是動作列表欄，乙個動畫工程是允許有多個動作的，比如：行走、跳躍、奔跑等等。所以在該欄中使用者可以建立多個動作，並在多個動作中切換。

第8部分是動畫幀面板，該面板將顯示畫布中所有物件的序列幀，使用者可通過新增幀和改變物件屬性建立動畫序列幀。

對編輯器有了大致的了解後，現在就可以開始編輯動畫了。

在形體模式下，選擇檔案->匯入資源或在資源欄中右鍵選擇需要匯入的資源檔案，也可直接將資源拷入工程的resources資料夾目錄下，然後重新整理資源面板。

將資源拖到渲染區，並擺好位置。

開始建立骨骼：選中快捷選單欄中建立骨骼的按鈕，在角色身體的各部位單擊左鍵並拖動滑鼠畫出骨骼。

將資源素材與骨骼繫結，右擊渲染區的資源素材，選擇「繫結到骨骼」，然後選擇骨骼（選擇的骨骼會高亮顯示），就可以實現骨骼的繫結。

當繫結好所有素材和骨骼後，右擊骨骼選擇「繫結父關係」，再選擇該骨骼的父骨骼（選擇的骨骼同樣會高亮顯示），這樣依次根據身體部位的「父子」層級關係設定好。

切換到動畫模式，選中相應控制項，移動滑鼠到動畫幀一欄的某幀處，然後，改變被選擇控制項的某個屬性，如旋轉它，這樣就能實現流暢的補間動畫。

匯出專案為程式可用的資源：匯出的資源在工程目錄的export/..資料夾下，一共有三個資源檔案，分別是 .exportjson，.plist 和 .png檔案。exportjson檔案中記錄了骨骼動畫的描述資訊，plist檔案則是記錄碎圖整合成大圖後的位置描述資訊，png檔案是整合的大圖。

前面我們花了很多精力來建立骨骼動畫，然而要將它執行在實際的專案中卻非常的簡單，只需幾行**，當然在這之前我們需要將動畫編輯器匯出的資源複製到專案resource目錄中去。

#include

"cocostudio/cocostudio.h"

using

namespace

cocostudio

;

說完了原理，下面來看看**。修改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
);

效果圖：

armature
->
getanimation
()->
playwithindex(0
);

void
playwithnames
(const
std::
vector
<
std::
string
>&
movementnames
,int
durationto =-
1,bool
loop 
=true
);void
playwithindexes
(const
std::
vector
&movementindexes
,int
durationto =-
1,bool
loop 
=true
);

骨骼動畫詳解 Spine

遊戲中人物的走動，跑動，攻擊等動作是必不可少，實現它們的方法一般採用幀動畫或者骨骼動畫。幀動畫與骨骼動畫的區別在於幀動畫的每一幀都是角色特定姿勢的乙個快照，動畫的流暢性和平滑效果都取決於幀數的多少。而骨骼動畫則是把角色的各部分身體部件繫結到一根根互相作用連線的骨頭上，通過控制這些骨骼的位置旋...

骨骼動畫詳解 Cocos Studio

骨骼動畫詳解 Spine

骨骼動畫詳解 Spine

骨骼動畫詳解 Spine

相關推薦