cocos2dx從編輯器(cocostudio或flash插件dragonBones)得到xml或json數(shù)據(jù)，調(diào)用類(lèi)似如下所示代碼就可以展示出動(dòng)畫(huà)效果

ArmatureDataManager::getInstance()->addArmatureFileInfoAsync(
  "armature/Dragon.png", "armature/Dragon.plist", "armature/Dragon.xml",
   this, schedule_selector(TestAsynchronousLoading::dataLoaded));
Armature *armature = nullptr;
armature = Armature::create("Dragon");
armature->getAnimation()->playWithIndex(1);
addChild(armature);

那么調(diào)用內(nèi)部是怎么實(shí)現(xiàn)的呢？

Armature::create和armature->getAnimation()->playWithIndex都實(shí)現(xiàn)了些什么呢？這幾篇文章將從源碼上分析Armature。

本文是Armature分析的第一篇，將從整體上對(duì)cocos2dx里的骨骼動(dòng)畫(huà)進(jìn)行分析。涉及到內(nèi)容如下:

什么是骨骼動(dòng)畫(huà)

編輯器導(dǎo)出數(shù)據(jù)格式概覽

源碼概述

什么是骨骼動(dòng)畫(huà)

游戲中的動(dòng)畫(huà)大體可以分成下面三種：

幀動(dòng)畫(huà)

補(bǔ)間動(dòng)畫(huà)(Tween)

骨骼蒙皮動(dòng)畫(huà)

幀動(dòng)畫(huà)

這個(gè)是最基本的動(dòng)畫(huà)，也是下面兩個(gè)動(dòng)畫(huà)的基礎(chǔ)，一幀展示一張圖，cocos2dx Action中Animate就是幀動(dòng)畫(huà)。優(yōu)點(diǎn)是實(shí)現(xiàn)簡(jiǎn)單，缺點(diǎn)是浪費(fèi)資源(一幀一張圖，可對(duì)比下面兩種動(dòng)畫(huà))。

補(bǔ)間動(dòng)畫(huà)

flash中補(bǔ)間動(dòng)畫(huà)用的比較多，不需要一幀一張圖，只需起始狀態(tài)和結(jié)束狀態(tài)，中間的狀態(tài)可以進(jìn)行根據(jù)差值與經(jīng)過(guò)時(shí)間計(jì)算出來(lái)。優(yōu)點(diǎn)是節(jié)省資源，美術(shù)人員比較熟悉。

骨骼蒙皮動(dòng)畫(huà)

骨骼動(dòng)畫(huà)可以認(rèn)為是補(bǔ)間動(dòng)畫(huà)的一種擴(kuò)展，讓動(dòng)畫(huà)的各個(gè)部分之間產(chǎn)生關(guān)聯(lián)結(jié)構(gòu)(骨骼)，之后把圖綁定到骨骼上。缺點(diǎn)是程序?qū)崿F(xiàn)較復(fù)雜，其優(yōu)點(diǎn)較補(bǔ)間動(dòng)畫(huà)有下面兩點(diǎn)(其他優(yōu)點(diǎn)暫時(shí)沒(méi)有發(fā)現(xiàn))：

1.導(dǎo)出配置數(shù)據(jù)少并且美術(shù)制作簡(jiǎn)單

假設(shè)有一個(gè)下面這樣結(jié)構(gòu)的骨骼

body

armLeft

handLeft

armRight

handRight

head

legLeft

legRight

假設(shè)想在一幀中把動(dòng)畫(huà)整體向右移動(dòng)，采用補(bǔ)間動(dòng)畫(huà)需要把body、armLeft、legRight等等全部移動(dòng)，創(chuàng)建新的幀，而骨骼動(dòng)畫(huà)只需移動(dòng)body的位置，其子節(jié)點(diǎn)會(huì)跟隨父節(jié)點(diǎn)移動(dòng)。對(duì)應(yīng)導(dǎo)出的配置中，補(bǔ)間動(dòng)畫(huà)要處理body、armLeft等所有子節(jié)點(diǎn)導(dǎo)出的數(shù)據(jù)，而骨骼動(dòng)畫(huà)只有body一個(gè)節(jié)點(diǎn)數(shù)據(jù)的改變，導(dǎo)出的數(shù)據(jù)會(huì)小很多。

2.關(guān)節(jié)裂紋修復(fù)

下面的圖是偷的《游戲引擎架構(gòu)》449頁(yè)，意思是如果美術(shù)作圖時(shí)候不注意，關(guān)節(jié)鏈接處可能會(huì)有裂縫。采用骨骼動(dòng)畫(huà)可以解決這個(gè)問(wèn)題，骨骼動(dòng)畫(huà)中的蒙皮可以按權(quán)重綁定到多個(gè)關(guān)節(jié)(骨骼中),并且可以按權(quán)重進(jìn)行拉伸，cocostudio骨骼動(dòng)畫(huà)編輯器不熟，不知可不可多綁定，flash的dragonBones插件是不行的。 spine 對(duì)這種多綁定有不錯(cuò)的支持。

編輯器導(dǎo)出數(shù)據(jù)格式概覽

cocostudio導(dǎo)出的json結(jié)構(gòu)和dragonbones導(dǎo)出的xml結(jié)構(gòu)相似，都是骨骼層，動(dòng)畫(huà)層，圖片層三層結(jié)構(gòu)，已dragonbones官方的demo為例(有刪減)：

<skeleton name="DragonBones_Tutorial_MultiBehavior" frameRate="24" version="2.2">
 <armatures>
  <armature name="Dragon">
   <b name="tail" parent="body" x="45.9" y="-70.8" kX="30" kY="30" cX="1" cY="1" pX="11.5" pY="176.35" z="10">
    <d name="parts-tail" pX="0" pY="-63.8"/>
   </b>
  </armature>
 </armatures>
 <animations>
  <animation name="Dragon">
   <mov name="stand" dr="7" to="6" drTW="100" lp="1" twE="0">
   </mov>
   <mov name="walk" dr="8" to="5" drTW="200" lp="1" twE="0">
   </mov>
   <mov name="jump" dr="5" to="3" drTW="5" lp="1" twE="NaN">
   </mov>
   <mov name="fall" dr="5" to="6" drTW="5" lp="1" twE="NaN">
   </mov>
  </animation>
 </animations>
 <TextureAtlas name="DragonBones_Tutorial_MultiBehavior" width="512" height="512">
 </TextureAtlas>
</skeleton>

<armatures></armatures>是骨骼部分，對(duì)應(yīng)flash中1區(qū)域，一個(gè)layer就是一個(gè)bone。

<animations></animations>是動(dòng)畫(huà)部分，對(duì)應(yīng)flash中2區(qū)域，用幀標(biāo)簽區(qū)分哪個(gè)動(dòng)畫(huà)，比如stand、walk、jump等。

<TextureAtlas></TextureAtlas>是骨骼部分，對(duì)應(yīng)flash中3區(qū)域，是皮膚，也就是圖信息。

有了這些信息，就可以在程序中還原flash中的動(dòng)畫(huà)效果，具體dr、drTW、x、kX、kY等等是什么意思之后的文章里會(huì)說(shuō)。

源碼概述

代碼大體可以分成xml或json數(shù)據(jù)的解析 和 用解析出的數(shù)據(jù)產(chǎn)生動(dòng)畫(huà)兩部分。

數(shù)據(jù)解析的相關(guān)代碼的UML

大致介紹下每個(gè)類(lèi)的作用：

DataReaderHelper：解析armatures、animations、TextureAtlas的數(shù)據(jù)生成程序能直接使用的數(shù)據(jù)結(jié)構(gòu)ArmatureData、AnimationData、TextureData。

ArmatureDataManager：管理DataReaderHelper及其解析出來(lái)的數(shù)據(jù)。

ArmatureData：對(duì)應(yīng)xml中的<armature></armature>。

AnimationData：對(duì)應(yīng)xml中的<animation></animation>。

TextureData：對(duì)應(yīng)xml中的<SubTexture></SubTexture>。

BoneData：對(duì)應(yīng)xml中的<b></b>。

DisplayData：對(duì)應(yīng)xml中的<d></d>。

MovementData：對(duì)應(yīng)xml中的<mov></mov>。

MovementBoneData：對(duì)應(yīng)xml中的<mov><b></b></mov>。

FrameData：對(duì)應(yīng)xml中的<mov><b><f></f></b></mov>。

產(chǎn)生動(dòng)畫(huà)相關(guān)代碼的UML

大致介紹下每個(gè)類(lèi)的作用：

Armature:里面包含了骨骼信息及動(dòng)畫(huà)信息，有個(gè)這個(gè)就可以播放動(dòng)畫(huà)。

Tween：骨骼動(dòng)畫(huà)的補(bǔ)間，一個(gè)骨骼一個(gè)Tween。對(duì)應(yīng)上面的flash面板就是stand動(dòng)畫(huà)的tail層的第一到第七幀。

ArmatureAnimation：所有Tween的集合，夠成一個(gè)動(dòng)畫(huà)。

Bone:帶有Tween的骨骼信息，從這里面可以得到某個(gè)時(shí)間點(diǎn)的骨骼狀態(tài)。

DisplayFactory:創(chuàng)建skin等顯示對(duì)象。

DisplayManager:每個(gè)Bone中有一個(gè)，管理骨骼上的顯示對(duì)象。

Skin：圖的顯示對(duì)象。

以上內(nèi)容就是腳本之家的小編給大家分享的cocos2dx骨骼動(dòng)畫(huà)Armature源碼剖析(一)，希望大家喜歡。