cocos2dx骨骼動畫Armature原始碼剖析(二)_javascript技巧

上篇文章從總體上介紹了cocos2dx自帶的骨骼動畫，這篇文章介紹一下導出的配置數據各個字段的含義（也解釋了DragonBone導出的xml數據每個字段的含義）。

skeleton節點

<skeleton name="Dragon" frameRate="24" version="2.2">

name:flash檔名字。

frameRate：flash幀率。

version：dragonbones版本號。

armatures節點

首先是armatures節點，截取armatures中的部分資料。

 <armatures>
  <armature name="Dragon">
  <b name="tail" parent="body" x="." y="-." kX="" kY="" cX="" cY="" pX="." pY="." z="">
   <d name="parts-tail" pX="" pY="-."/>
  </b>
  <b name = "LegR" ... />
  <b/>
  ……
  <b/>
  </armature>
 </armatures>

節點是一個骨骼(b是bone的縮寫)，節點中含有多個，是動畫的整體骨骼。如下2個圖所示，整個layer和骨骼之間關係就是armature節點，紅框中每一個layer就是一個b節點。

節點為什麼有多個armature節點呢？因為一個flash中可能有多個骨骼動畫，每個骨骼動畫對應一個armature,比如下面這個flash導出後armatures裡就會包含多個armature。帶有幀標籤的元件會被當成一個Skeleton。

name屬性是元件在庫中的名字（下圖），也是Skeleton的名字。

b節點(armature節點的子節點)

<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">

骨骼訊息，以第一幀資訊為標準。

name：骨骼名字，就是TimeLine中layer名字，上圖。

parent：骨骼父節點，上圖。

x，y：元件旋轉錨點相對於父節點原點的座標，見下圖，y方向向下為正方向。

kX, kY：代表skewX，SkewY，一般情況2者相等，代表Rotate(旋轉)大小。

cX, cY：代表scaleX, scaleY, 表示縮放小。

pX, pY：代表pivotX, pivotY,旋轉錨點相對於元件原點的座標，下圖調整了30度旋轉。

z: 層級，最下面的layer是0層，逐上遞加。

d節點

骨骼中顯示節點，可以理解成皮膚,一個layer中用了幾個庫中的元件，就會有幾個節點。

 <d name="parts-tail" pX="0" pY="-63.8"/>

name:顯示物件的名字，為在庫中路徑和元件名字的拼接。

pX, pY: 顯示物件相對於原點的位移。

animations節點

節點代表了骨骼隨時間的變化。

<animations>
  <animation name="Dragon">
  <mov name="stand" dr="" to="" drTW="" lp="" twE="">
    <b name="tail" sc="" dl="">
     <f x="." y="-." cocosd_x="." cocosd_y="-." kX="" kY="" cX="" cY="" pX="." pY="." z="" dI="" dr=""/>
     <f x="." y="-." cocosd_x="." cocosd_y="-." kX="." kY="." cX="" cY="" pX="." pY="." z="" dI="" dr=""/>
     <f x="." y="-." cocosd_x="." cocosd_y="-." kX="" kY="" cX="" cY="" pX="." pY="." z="" dI="" dr=""/>
    </b>
  </mov>
  <mov name="walk" dr="" to="" drTW="" lp="" twE="">
  </mov>
  <mov name="jump" dr="" to="" drTW="" lp="" twE="NaN">
  </mov>
  <mov name="fall" dr="" to="" drTW="" lp="" twE="NaN">
  </mov>
  </animation>
 </animations>

為什麼會有多個呢？原因和中有多個相同(見上文)，animation和armature靠name屬性一一對應。

mov節點

mov節點真正對應程式裡面一個動畫,TimeLine上一個幀標籤就會產生一個mov，所以一個中會有多個mov。

<mov name="stand" dr="7" to="6" drTW="30" lp="1" twE="0">

name:幀標籤名字。

dr:代表duration，mov持續多少幀，上圖可知stand持續7幀。

to：真不知道是乾啥的。

drTW：代表duratio_tween,動畫運行多長時間，1/24*7=0.29s。在dragonbones面板上設定TotalTime會影響此值。

lp:代表loop，是否循環播放。

twE：真不知道是乾啥的。

b節點(mov節點的子節點)

骨骼狀態，mov中會有所有的骨骼b節點。

 <b name="tail" sc="1" dl="0">

name:骨骼名字

sc：代表movement_scale,不知是啥。总帧数调整，dragonBones面板可调整

dl：代表movement_delay,不知是啥。dragonBones面板中PlayDelay设置应该和其有关。

f节点

 <f x="45.9" y="-70.8" cocos2d_x="124.1" cocos2d_y="-229.25" kX="30" kY="30" cX="1" cY="1" pX="11.5" pY="176.35" z="10" dI="0" dr="2"/>

对应关键帧信息。stand动画有3个关键帧，所以会有三个f节点。x，y，kX，kY，cX，cY，pX，pY，z与b节点(armature节点的子节点)中对应属性相同，cocos2d_x和cocos2d_y也不知道怎么来的。

dI:display_index 显示哪个图(42272462d2c96339e487aa53d54897b3b5ca92f89c0db1b672bc4bc49dd5a9be中a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a中a3ac92cb7e65fa28e53b5d109c7708e5abd73b85f7c61f178e6945240bab1a8e)。

dr: duration 帧数.

TextureAtlas节点

dragonbone导出方式可以选择，如果选择导出大图，那么TextureAtlas节点代表了大图中小图的相关信息，可以理解成TexturePacker产生的plist文件，比如

 <TextureAtlas name="Dragon" width="" height="">
 <SubTexture/>
 <SubTexture name="parts-tail" width="" height="" cocosd_pX="" cocosd_pY="-." x="" y=""/>
 <SubTexture/>
 <SubTexture/>
 <SubTexture/>
 </TextureAtlas>

SubTexture节点为小图信息，width和height为长和宽，x和y为在大图中的坐标。cocos2dpX和cocos2dpY依然不晓得有什么用。

以上内容是脚本之家的小编给大家分享的cocos2dx骨骼动画Armature源码剖析(二)，后续还有更近，请持续关注本站。