COCOS2DX Skeleton Animation armature source code Analysis (ii) _JAVASCRIPT skills

The previous article introduced COCOS2DX's own skeleton animation in general, which describes the meaning of each field of the exported configuration data (also explains the meaning of each field of the XML data that Dragonbone exports).

Skeleton node

<skeleton name= "Dragon" framerate= "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 of the data in the armatures.

 <armatures>
  <armature name= "Dragon" > <b name= "tail" body "parent=". "X="-. "y=" "kx=" "ky=
  " "Cy=" "px=". "py=". "z=" "> <d name=" parts-tail "px="
   "py="-. " />
  </b>
  <b name = "Legr" .../>
  <b/>
  ...
  <b/>
  </armature>
 </armatures>

<b/> node is a skeleton (b is the abbreviation of bone),<armature/> nodes contain multiple <b/>, which is the overall skeleton of the animation. As shown in the following 2 diagrams, the relationship between the entire layer and the skeleton is the armature node, and every layer in the red box is a B-node.

Why do <armatures> nodes have multiple armature nodes? Because a flash can have more than one skeleton animation, each skeleton animation corresponding to a armature, such as the following Flash export armatures will contain multiple armature. Components with frame labels are treated as a skeleton.

<armatures name= "Dragon" >name attribute is the name of the component in the library (below) and 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= "a" ky= "cx=" "1" cy= "1" px= "11.5" py= "176.35" z= ">

Skeleton information, with the first frame of information as the standard.

Name: Skeleton names, is the layer name in timeline, above.

Parent: Skeleton Father node, pictured above.

X,y: The coordinates of the component's rotating anchor point relative to the parent node's origin, as shown in the following figure, and the y direction is downward in the positive direction.

KX, KY: representative of Skewx,skewy, general situation 2 equal, representing rotate (rotation) size.

CX, CY: On behalf of ScaleX, ScaleY, indicating small contraction magnification.

PX, PY: Represents Pivotx, Pivoty, the coordinates of the rotation anchor point relative to the origin of the element, and the following figure adjusts the 30 degree rotation.

Z: Level, the bottom of the layer is 0 layers, accumulator.

D node

The skeleton shows the nodes, can be understood as the skin, a layer using a few library components, there will be several <d> nodes.

 <d name= "Parts-tail" px= "0" py= " -63.8"/>

Name: Displays the names of the objects, which are the concatenation of the path and symbol names in the library.

PX, PY: Shows the displacement of the object relative to the origin.

Animations node

The <animations/> nodes represent changes in the bones 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=" "
     Di= "" dr= ""/> <f x= "." Y= "-." cocosd_x= "-." cocosd_y= "" kx= "" ky= "" cx= "" cy= "" px= "" py= "
     >
    </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 do <animations/> have multiple <animation/>? There are multiple <armature/> similarities in the cause and <armatures/> (see above), animation and armature are corresponding to the name attribute one by one.

MOV node

MOV node real corresponding program inside an animation, timeline the previous frame label will produce a MOV, so a <animation/> will have multiple Mov.

<mov name= "Stand" dr= "7" to= "6" drtw= "" lp= "1" twe= "0" >

Name: Frame label name.

DR: On behalf of how many frames the Duration,mov lasts, stand lasts 7 frames.

To: I don't know what to do.

DRTW: On behalf of Duratio_tween, how long does the animation run, 1/24*7=0.29s. Setting totaltime on the Dragonbones panel affects this value.

LP: Represents loop, looping.

TWE: I don't know what to do.

B-Node (child node of the MOV node)

Skeletal state, there will be all bone B nodes in the Mov.

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

Name: Skeleton names

SC: On behalf of Movement_scale, I don't know what it is. Total frame number adjustment, dragonbones panel adjustable

DL: On behalf of Movement_delay, I don't know what. The Playdelay setting in the Dragonbones panel should be associated with it.

F node

 <f x= "45.9" y= " -70.8" cocos2d_x= "124.1" cocos2d_y= " -229.25" kx= "1" ky= "1" cx= "cy=" px= "11.5" py= "10" di= "0" dr= "2"/>

corresponding key frame information. The Stand animation has 3 keyframes, so there will be three F nodes. X,y,kx,ky,cx,cy,px,py,z is the same as the corresponding property in the B-node (child node of the armature node), and cocos2d_x and cocos2d_y do not know how.

Di:display_index show which diagram (<armature></armature> <b></b> in <d></d>).

Dr:duration the number of frames.

Textureatlas node

Dragonbone Export mode can be selected, if you choose to export large map, then Textureatlas node represents the large map of the relevant information, can be understood as Texturepacker produced plist files, such as

 <textureatlas name= "Dragon" width= "height=" ">
 <SubTexture/>
 <subtexture name=" Parts-tail " Width= "" height= "" cocosd_px= "" cocosd_py= "-." x= "" y= ""/>
 <SubTexture/>
 <SubTexture/>
 <SubTexture/>
 </TextureAtlas>

Subtexture nodes are small graph information, width and height are long and wide, and x and y are coordinates in larger graphs. COCOS2DPX and Cocos2dpy still don't know what's the use.

The above content is a small part of the cloud habitat community to share the COCOS2DX skeleton animation armature source Analysis (ii), follow-up there is more near, please continue to pay attention to this site.