Cocos2dx bone animation Armature Source Code Analysis (1) _ javascript skills

The skeleton animation in cocos2dx is very convenient to use in the program. xml or json data is obtained from the editor (cococostudio or flash plug-in dragonBones), and the animation effect can be directly displayed by calling the code, next, I will share with you the source code analysis of cocos2dx skeleton animation Armature. let's take a look at it together. Cocos2dx obtains xml or json data from the editor (cocostudio or flash plug-in dragonBones) and calls 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::dataLoaded));Armature *armature = nullptr;armature = Armature::create("Dragon");armature->getAnimation()->playWithIndex(1);addChild(armature);

So how is the call implemented internally?

Armature: create and armature-> getAnimation ()-> What are the implementations of playWithIndex?? These articles will analyze Armature from the source code.

This is the first Armature analysis article. we will analyze the skeleton animation in cocos2dx as a whole. The content involved is as follows:

What is a skeleton animation?

Editor export data format overview

Source code overview

What is a skeleton animation?

There are three types of animations in the game:

Frame animation

Tween)

Skeleton skin animation

Frame animation

This is the most basic animation and also the basis of the following two animations. one frame shows a picture, and the animation in cocos2dx Action is a frame animation. The advantage is that it is easy to implement, but the disadvantage is that it is a waste of resources (one frame and one image can be compared with the following two animations ).

Compensation animation

In flash, there are a lot of supplementary animations. you don't need a frame or a picture. you only need to start and end the animation. the intermediate state can be calculated based on the difference and the elapsed time. The advantage is resource saving, and artists are familiar with it.

Skeleton skin animation

A skeleton animation can be considered an extension of a complementary animation. it creates an association structure (skeleton) between each part of the animation and binds the graph to the skeleton. The disadvantage is that the program implementation is complicated, and its advantages are compared with the following two aspects of the compensation animation (other advantages are not found at the moment ):

1. export less configuration data and make art simple

Suppose there is a skeleton with the following structure:

Body

ArmLeft

HandLeft

ArmRight

HandRight

Head

LegLeft

LegRight

If you want to move the animation to the right in a frame, you need to move the body, armLeft, legRight, and so on to create a new frame, the skeleton animation only needs to move the position of the body, and its child nodes will move along with the parent node. In the corresponding export configuration, the animation must process the data exported from all the child nodes, such as the body and armLeft, while the bone animation only has the body and the data of one node, and the exported data will be much smaller.

2. joint crack repair

The figure below shows the 449 page of game engine architecture, which means that if you do not pay attention to the art drawing, there may be cracks at the joint link. Using the skeleton animation can solve this problem. The skin in the skeleton animation can be bound to multiple joints (in the skeleton) by weight, and can be stretched by weight. cocostudio is not familiar with the skeleton animation editor, I don't know if I can bind more, but flash's dragonBones plug-in won't work. Spine has good support for such multiple bindings.

Editor export data format overview

The json structure exported by cocostudio is similar to the xml structure exported by dragonbones. it is a three-layer structure of the skeleton layer, animation layer, and image layer. The official demo of dragonbones is used as an example (with deletions ):

Is the skeleton part, corresponding to the flash area 1, a layer is a bone.

Is the animation part, corresponding to the two areas in flash, which is determined by frame labels, such as stand, walk, and jump.

Is the skeleton part, corresponding to the three areas in flash, is the skin, that is, the image information.

With this information, you can restore the animation effect in flash in the program. what do you mean by dr, drTW, x, kX, and kY.

Source code overview

The code can be roughly divided into xml or json data parsing and animated using parsed data.

UML for data parsing code

The following describes the functions of each class:

DataReaderHelper: parses data structures armatures, animations, and TextureAtlas that can be directly used by ArmatureData, AnimationData, and TextureData.

ArmatureDataManager: manages DataReaderHelper and the parsed data.

ArmatureData: corresponds.

AnimationData: corresponds.

TextureData: corresponds .

BoneData: corresponds.

DisplayData: corresponds .

MovementData: corresponds .

MovementBoneData: corresponds .

FrameData: corresponds .

UML for generating animation-related code

The following describes the functions of each class:

Armature: contains the skeleton information and animation information. you can play the animation with this information.

Tween: the population of the skeleton animation. one skeleton and one Tween. The flash panel above is the first to seventh frames of the tail layer of the stand animation.

ArmatureAnimation: a set of all tweets, which can be an animation.

Bone: The skeleton information with Tween, from which the state of the skeleton at a certain time point can be obtained.

DisplayFactory: creates display objects such as skin.

DisplayManager: one in each Bone manages the display objects on the bones.

Skin: The display object of the graph.

The above content is the cocos2dx skeleton animation Armature Source Code Analysis (1) shared by the script house. I hope you will like it.