COCOS2DX Skeleton Animation armature source code Analysis (i) _javascript skills

COCOS2DX obtains XML or JSON data from the editor (Cocostudio or Flash plugin dragonbones), and invokes code similar to the following to show the animation effect

Armaturedatamanager::getinstance ()->addarmaturefileinfoasync (
  "Armature/dragon.png", "armature/ Dragon.plist "," Armature/dragon.xml ", this
   , Schedule_selector (testasynchronousloading::d ataloaded));
Armature *armature = nullptr;
armature = Armature::create ("Dragon");
Armature->getanimation ()->playwithindex (1);
AddChild (armature);

So how does the call interior come true?

what did Armature::create and armature->getanimation ()->playwithindex achieve ? These articles will analyze armature from the source code.

This paper is the first of the armature analysis, which will analyze the skeleton animation of cocos2dx in the whole. The content is as follows:

What is skeletal animation

Editor Export Data Format overview

SOURCE Overview

What is skeletal animation

The animation in the game can be divided into the following three kinds:

Frame animation

Motion Tween (Tween)

Skeleton Skin Animation

Frame animation

This is the most basic animation, is also the basis of the following two animations, a frame to show a picture, COCOS2DX action animate is frame animation. The advantage is that the implementation is simple, the disadvantage is a waste of resources (a picture, compared to the following two kinds of animation).

Tween Animation

Flash in the motion tween more, do not need a picture, just start and end state, the middle state can be calculated according to the difference and elapsed time. The advantage is to save resources, the art staff is more familiar.

Skeleton Skin Animation

Skeletal animation can be thought of as an extension of a motion tween, which creates an associative structure (skeleton) between parts of the animation, and then binds the graph to the skeleton. The disadvantage is that the program implementation is more complex, the advantages of the following two points of motion (other advantages are not found):

1. Export configuration data Less and the art of making simple

Suppose there's a skeleton under such a structure

Body

Armleft

Handleft

Armright

Handright

Head

Legleft

Legright

If you want to move the whole animation to the right in one frame, use the motion tween to move the body, Armleft, legright, and so on, and create a new frame, and the skeleton animation just moves the body position, and its child nodes follow the parent node to move. Corresponding to the exported configuration, the tweened animation to handle all the body, armleft and other child nodes exported data, and skeleton animation only the body of a node data changes, the exported data will be much smaller.

2. Joint Crack Repair

The following figure is the stolen "game Engine Architecture" 449 pages, meaning that if the art is not noticed when drawing, joint links may have cracks. The use of skeletal animation can solve this problem, skeleton animation in the skin can be bound to a number of joints (bones), and can be stretched by weight, Cocostudio Skeleton animation editor is not familiar, do not know how to bind, Flash Dragonbones plug-in is not. Spine has good support for this kind of multiple bindings.

Editor Export Data Format overview

Cocostudio exported JSON structure and dragonbones derived XML structure similar to the skeleton layer, animation layer, picture layer three-layer structure, has been Dragonbones official demo as an example (there are exclusions):

 <skeleton name= "Dragonbones_tutorial_multibehavior" framerate= "a" version= "2.2" > <armatures> <armature name= "Dragon" > <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=" ten "> <d name=" parts-tail "px=" 0 "py=" -63.8 "/> </b> ;/armature> </armatures> <animations> <animation name= "Dragon" > <mov name= "Stand" dr= "7" to = "6" drtw= "lp=" 1 "twe=" 0 "> </mov> <mov name=" Walk "dr=" 8 "to=" 5 "drtw=" "lp=" 1 "twe=" 0 "> & lt;/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=" 
"Width=" height= "Dragonbones_tutorial_multibehavior" > </TextureAtlas> </skeleton> 

<armatures></armatures> is the skeleton part, corresponding to flash in the 1 area, a layer is a bone.

<animations></animations> is part of the animation, corresponding to 2 areas of flash, using frame labels to distinguish which animation, such as stand, walk, jump, etc.

<TextureAtlas></TextureAtlas> is the skeleton part, corresponding to 3 areas of flash, is the skin, that is, graph information.

With this information, you can restore the animation effect in Flash in the program, specifically Dr, Drtw, X, KX, KY and so on what meaning after the article will say.

SOURCE Overview

The code can be roughly divided into XML or JSON data parsing and animation with the parsed data produced in two parts.

UML of related code for data parsing

Describe the role of each class in general:

Datareaderhelper: Parse armatures, animations, Textureatlas data generation program can be directly used in the structure of the database Armaturedata, Animationdata, Texturedata.

Armaturedatamanager: Manages the datareaderhelper and its parsed data.

Armaturedata: Corresponds to <armature></armature> in XML.

Animationdata: Corresponds to <animation></animation> in XML.

Texturedata: Corresponds to <SubTexture></SubTexture> in XML.

Bonedata: Corresponds to <b></b> in XML.

Displaydata: Corresponds to <d></d> in XML.

Movementdata: Corresponds to <mov></mov> in XML.

Movementbonedata: Corresponds to <mov><b></b></mov> in XML.

Framedata: Corresponds to <mov><b><f></f></b></mov> in XML.

UML that produces animation-related code

Describe the role of each class in general:

Armature: Contains skeleton information and animation information, there is a this can play animation.

Tween: Skeleton animation of the tween, a skeleton a Tween. The corresponding flash panel above is the first to seventh frame of the tail layer of the Stand animation.

Armatureanimation: A collection of all tween, enough to be an animation.

Bone: Skeleton information with tween, from which you can get a skeletal state at a point in time.

Displayfactory: Create display objects such as skin.

Displaymanager: There is one in each bone that manages the display object on the skeleton.

Skin: The display object of the diagram.

The above content is the cloud Habitat Community Small series to share the COCOS2DX skeleton animation armature source Analysis (i), I hope you like.