Internship Small white:: (GO) cocos2d-x using Cocosstudio edited animation file

1cocostudio Introduction

Cocostudio is a free toolset developed by Cocos2d-x for the development of Cocos2d-x games, which is currently under development and is becoming more and more perfect! As a tool set, of course integrates the functionality of the existing fragmented tools and is constantly expanding, including animation editor, UI editor, Scene editor and data editor. Specific content and characteristics Welcome to visit Cocostudio Official website http://cocostudio.org/. Here, we use the animation editor to quickly experience the cocostudio for our development to bring the convenience ~

2 Environment Construction and configuration

The system environment used in this article is Win7 system, CocoStudio-0.2.0 version.

Examples of the effects of some related skeletal animations have been shown in the testcpp of the current stable version of cocos2d-x-2.1.4.

3 steps to create a sequence frame animation

Frame animation, as the name implies! is to put a picture of a well-designed, and then show it, like a film film, multi-frame animation effect. Not much introduced, directly to see the use of Cocostudio method.

A. Opening the Cocostudio startup animation editor

B. Click on the file to create a new project and determine

C. In the Resources window select Add Resource, Sequence frame original (this is not supported using plist as a resource, but can export plist)

D. Select the first frame picture, drag into the Render window, select the third item in the toolbar, and center the display. (Center optional Action)

E. We see an extra layer in the object structure view, which is the sequence frame animation layer, in the Resource View multi-select file (except the first frame),

Then drag into the object structure view just above that layer, (this sentence is the most important, but it seems that the reader dizzy, look back to my video bar)

We will be able to see the changes in the Keyframe view, and the current frame changes automatically based on the number of pictures, noting the position of the mouse in the object structure view.

F. Click "Play" in "keyframe" view to play, or loop to play the animation

G. After saving the project, you can export the large image, automatically package the resource picture, in this example generated "Csanim.exportjson", "Csanim0.plist" and "Csanim0.png" three files, then we can hold the three files in the Cocos2d-x Used in the.

4. How to run its animations in Cocos2d-x

Above we generated a number of files, animated resource files, at this time we need to load these resources in Cocos2d-x, and run, we put the above files in the project "Resources" in the "Export" directory. Then use the following key code to create the animation.

Load resource files PNG pictures, plist files, and Exportjson animation files, which can generally load this resource at the beginning of a scene run

Cs::armaturedatamanager::sharedarmaturedatamanager ()->addarmaturefileinfo ("Export/CsAnim0.png", "Export/ Csanim0.plist "," Export/csanim.exportjson ");

The Csanim is used directly here, and this information is stored in Csanim.exportjson, which corresponds to the project properties created

cs::armature* armature = cs::armature::create ("Csanim");

Sets the index of the currently running animation, an "engineering" can create multiple animations

Armature->getanimation ()->playbyindex (0);

Setting location information

Armature->setposition (Visiblerect::center ());

Add to container, currently running in the scene

AddChild (armature);

Create a skeletal animation

First, open the Animation Editor (motion Editor) of Cocos Studio and create a new animation project. Like Spine, the Cocos Studio Animation editor has two modes, but this is the body mode and animation mode. The user needs to assemble the character part in form mode and bind the skeleton to it, and adjust the bone corresponding properties in animation mode to create a skeletal animation.

Let's start with an understanding of the editor as a whole, see.

In the form mode:

Animation mode:

In the above two figure, the part labeled 1 is the render area, which is our canvas, which is the main editing area of the resource layout, where you can move, scale, rotate, and all the main results of the operation will be displayed in this area.

The 2nd part is the shortcut menu bar, which has a number of common actions, including mode switching, creating bones, zooming, rotating, and a series of actions.

The 3rd part is the resource bar, and all resources used in this project must be imported to the Panel for use.

Part 4 is the preview area, where the resources in the resource bar are selected and displayed in that area to achieve the preview effect.

The 5th part is the object structure bar, where the editor renders the object in the order of the objects in the object's structure bar, and at the bottom of the object is rendered first, that is, it may be obscured by the object being rendered. In addition, the order of the objects is adjustable in the column.

The 6th part is the property bar, and when an object is selected, the Properties window displays all the properties of that object. Modifying any property can immediately change the state of the node in the render area.

The 7th part is the action list bar, an animation project is allowed to have multiple actions, such as: walking, jumping, running and so on. So in this column the user can create multiple actions and switch between multiple actions.

The 8th part is the animated frame panel, which displays a sequence of frames for all objects in the canvas, and the user can create animated sequence frames by adding frames and changing object properties.

Once you have a general idea of the editor, you can now start editing the animation.

1. In the form mode, select File, import the resource or right-click in the resource bar to select the resource file you want to import, or copy the resource directly into the project's Resources folder directory, then refresh the resource panel.

2. Drag the resource to the render area and position it.

3. Start creating Bones: Select the Create Bones button in the shortcut menu bar, click the left arrow in each part of the character's body and drag the mouse to draw the bone.

4. Bind the resource footage to the bone, right-click the resource footage in the Render area, select bind to Bone, and then select the bone (the selected bone is highlighted) to achieve the binding of the bone.

5. When all the footage and bones are bound, right-click the bone and select Bind parent, then select the Bone's parent bone (the selected bone is also highlighted), which is set in turn according to the parent-child hierarchy of the body part.

6. Switch to animation mode, select the appropriate control, move the mouse to a frame in the animation frame, and then change a property of the selected control, such as rotating it, so that you can achieve smooth motion tween.

7. Export the project as a resource available to the program: the exported resource is in the export/of the project catalog. folder, a total of three resource files, respectively. Exportjson,.plist and. png files. The description information of skeletal animation is recorded in the Exportjson file, and the plist file is the location description information of the picture after it is integrated into a large image, and the PNG file is a large image of the integration.

Load an animation resource in Cocos2d-x

We've taken a lot of effort to create a skeletal animation, but it's very simple to run it in the actual project, just a few lines of code, and before that we need to copy the resources exported by the motion editor to the project resource directory.

Similarly, using the Cocos Studio animation in the Cocos2d-x program first needs to include the relevant header file, as follows:

#include
"Cocostudio/cocostudio.h"

Usingnamespacecocostudio;

Create a skeleton animation object, you need to load the animation files and resource files into the program. Here we load the animation by Armaturemanager the animation data Manager. Armaturemanager itself is a singleton, which manages the armature in the entire scene. The armature, however, encapsulates the animation we need to play the animation. This shows that this is a three-tier hierarchy. Which armaturemanager the largest, then armature, and finally animation.

After saying the principle, let's look at the code below. To modify the Init function, add the following code before return:

Armaturedatamanager::getinstance ()->addarmaturefileinfo ("Newanimation0.png", "Newanimation0.plist", " Newanimation.exportjson ");

Armature
*armature = Armature::create ("newanimation");

Armature->setposition (Point (visiblesize.width
* 0.5, Visiblesize.height * 0.5));

//
Play animations

Armature->getanimation ()->play ("Walk");

This->addchild (armature);

：

The action we edit in the animation editor is animation, which allows you to edit multiple actions in an animation project, that is, you can create multiple actions in the action list. As shown in the following:

So the play animation needs to be played according to the specific needs, so as to know which animation the user wants to play. You can specify the animation name to play the animation like the code above, or you can play the animation by specifying an action number, as follows:

Armature->getanimation ()->playwithindex (0);

Playing a continuous animation can be achieved through the following functions:

Voidplaywithnames (conststd::vector<std::string>&
Movementnames,intdurationto
= -1,boolloop
=true);

Voidplaywithindexes (conststd::vector<int>&
Movementindexes,intdurationto
= -1,boolloop
=true);

Internship Small white:: (GO) cocos2d-x using Cocosstudio edited animation file