Import Spine Animation in Cocos2d-x (Part 5): Animate with Spine

This is the 5th post of series "Import Spine Animation in Cocos2d-x". Before taking a look on this post, please refer to the first post to create a worm sprite: Part 1; Part 2, Part 3, Part 4.

In this part 5, I am going to show you to create the animation in Spine 2D Animation.

Step 1: First of all, I create a new project by clicking on the "Spine" logo in the top-left corner. Select "New Project" on the menu.

Fig 1: Create new project in Spine.

Step 2: Then in the right panel, select "Image" node in "Hierarchy" and then click on "Browse" button. Finally, select the folder which contains the worm images which we exported from each layer in Part 4.

Fig 2: Click Browse on Image node.

Step 3: All worm parts will be loaded in Images folder node.

Fig 3: All images are loaded to Image folder.

Step 4: Use mouse Drag and drop all images to Editor area.

Fig 4: All parts of Worm are dragged and dropped to Working area.

Before we continue making it animate, I think it is better to introduce a little bit the Spine GUI.

Fig 5: Introduce Spine GUI.

Here are the basic you need to know before working with Spine:

1. Menu - Including Create new Menu, export to output.
2. Setup - Is use to switch between Image Editor mode and Animation mode.
3. Working Area - Here you can move, resize, rotate, set order and make animation for images.
4. root node - The objects in this node will reflect the corresponding images in Working Area. Some times, you have too much images and it is hard to select object in Working Area, you can select in root node instead.
5. Draw Order - To order the image. You can see worm in screen shot does not correct about the body parts. I need to correct it later.
6. Images folder - Contains the images which will use to drag and drop to working area.
7. Animations - To manage the action of character such as Running, Jumping, Walking, Fighting etc.
8. Rotate, Translate and Scale - are used to modify the images to the correct places.

The other things, I think it would be better if you can find out by your self :).

The final step in part 5: Drag each image up or down in Draw Order to make the worm has the proper body.

Fig 6: Order the parts of Worm's Body.

I think part 5 is quite long now and if continue, you may lost concentration for some information. So we will continue adding bone in the next tutorial.

If you have any questions or concerns, please post your comments here, I will take a look and response ASAP.

Yumiki.