Import Spine Animation in Cocos2d-x (Part 7): Animate with Spine (cont. 2).

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, Part 5. Part 6.

In the previous post. I did create the bones and attached them to the body parts of the Worm. Then setting the key-frame for frame 0. I continue making animation for other frames in this post.

Step 1: Move the blue triangle pointer to frame 15, make sure that you select the option "Auto Key".

Fig 1. Move to frame 15 and select "Auto Key".

Step 2: Select the top node of the "body1" bone.

Fig 2. Select node of "body1" bone,

Step 3: Transform it to another position by dragging and moving it. Perform the similar step for other body bones. Here is the result:

Fig 3. Result after transform the bones to other position.

Step 4: Look at the keys in "Transform" panel. Make sure they keys are turned to Red.

Fig 4. Keys must be turned to Red to track the state of transforming of bones.

Step 5: Select frame 0 and select "Pose" option in "Tool" panel and press "Ctrl + C" to copy all keys in frame 0.

Fig 5. Select frame 0 and select "Pose".

Step 6: Move to frame 30 and press "Ctrl + V" to paste the frame 0's keys to frame 30.

Fig 6. Move to key 30 and paste the keys of frame 0 to frame 30.

Step 7: Select the "Repeat" button and press "Play" button to check the animation.

Fig 7. Play animation in Repeat mode.

Step 8: Here is the result:

Fig 8: The worm is moving now :).

I did make the worm's animation with some simple steps. In the next post, we will export the worm to files and import to Cocos2d-x, then write some code lines to make it move on game screen.

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

Yumiki.