cocos2dx skeleton animation Armature source code analysis (2)_javascript skills

The previous article introduced the skeletal animation that comes with cocos2dx in general. This article introduces the meaning of each field of the exported configuration data (it also explains the meaning of each field of the xml data exported by DragonBone meaning).

skeleton node

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

name: flash file name.

frameRate: flash frame rate.

version: dragonbones version number.

armatures node

The first is the armatures node, which intercepts some data in 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>

The node is a bone (b is the abbreviation of bone). The node contains multiple , which is the overall skeleton of the animation. As shown in the following two figures, the relationship between the entire layer and bones is the armature node, and each layer in the red box is a b node.

Why does the node have multiple armature nodes? Because there may be multiple skeletal animations in a flash, each skeletal animation corresponds to an armature. For example, after exporting the flash below, the armatures will contain multiple armatures. Components with a frame tag are treated as a Skeleton.

The name attribute is the name of the component in the library (picture below), which is also the name of the Skeleton.

b node (child node of armature node)

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

Skeleton information, based on the first frame information.

name: The name of the bone is the name of the layer in TimeLine, as shown above.

parent: Bone parent node, pictured above.

x, y: The coordinates of the component rotation anchor point relative to the origin of the parent node, as shown in the figure below, the y direction is downward as the positive direction.

kX, kY: represents skewX and SkewY. Generally, the two are equal and represent the Rotate (rotation) size.

cX, cY: represents scaleX, scaleY, represents the zoom size.

pX, pY: represents pivotX, pivotY, the coordinates of the rotation anchor point relative to the origin of the component. The following figure adjusts the 30-degree rotation.

z: Level, the bottom layer is layer 0, increasing one by one.

d node

The nodes displayed in the skeleton can be understood as skin. If several components from the library are used in a layer, there will be several nodes.

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

name: Displays the name of the object, which is the concatenation of the path and component name in the library.

pX, pY: Display the displacement of the object relative to the origin.

animations node

The

node represents the change of the skeleton over time.

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

Why does have multiple ? The reason is the same as there are multiple in (see above), animation and armature correspond one to one by the name attribute.

mov node

The mov node actually corresponds to an animation in the program. A frame label on TimeLine will generate a mov, so there will be multiple movs in one .

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

name: frame label name.

dr: represents duration, how many frames mov lasts. As shown in the above figure, stand lasts 7 frames.

to: I really don’t know what it does.

drTW: stands for duration_tween, how long the animation runs, 1/24*7=0.29s. Setting TotalTime on the dragonbones panel affects this value.

lp: stands for loop, whether to loop or not.

twE: I really don’t know what it does.

b node (child node of mov node)

Bone status, there will be all bone b nodes in mov.

 <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 显示哪个图(中中)。

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源码剖析(二)，后续还有更近，请持续关注本站。