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>

9cceca18598b2a00dd076ce7fa6f5e5dThe node is a bone (b is the abbreviation of bone). The 95313544512d1db683232029f316ae35 node contains multiple 9cceca18598b2a00dd076ce7fa6f5e5d, 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 031f985c524add179bc74f3972cb2b62 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.

2b0275e1d3eea369286cdd1c2f175664 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 a3ac92cb7e65fa28e53b5d109c7708e5 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

5cac1272d211c4af34126a1540549247 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 5cac1272d211c4af34126a1540549247 have multiple 91db72ebe85630ddced6bc3e018eeccb? The reason is the same as there are multiple 95313544512d1db683232029f316ae35 in 0dbb597697e8e53242b021ac384cff8d (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 91db72ebe85630ddced6bc3e018eeccb.

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