Tutorials‎ > ‎

Create Endless Runner Game With Cocos2d-X (Part 1 - Armature Animation)

posted Apr 20, 2015, 2:43 AM by Hadi Setiawan   [ updated Aug 15, 2016, 11:26 PM by Surya Wang ]


In this tutorial, we'll create an endless runner game using Cocos2d-x. The game will use several features of Cocos2d-x, such as skeletal animation, chipmunk physics, and also parallax background. I’ll divide this tutorial into two parts, creating the skeletal animation and the game logic.

This tutorial requires you to have a knowledge about C++ and Cocos2d-x, if you don’t, then I suggest you do some reading about them first. Both can be easily found on the internet, if you want, you can also read the Cocos2d-x module available on this site.

The game we create should look like this.

The assets used in this tutorial can be downloaded at the attachment. If you want you can use your own assets too. The assets used are:

1.       Demo Player sample from Cocos Studio.

2.       Background from http://www.spriters-resource.com/download/46806/

3.       Floor tile texture from http://opengameart.org/sites/default/files/oga-textures/31178/tile6_2.png

There are several software that we’ll be using in this tutorial:

1.       Visual Studio 2012

2.       Cocos2d-x v3.2

3.       Cocos Studio v1.6

Creating Skeletal Animation

We’ll start by creating the animation we’ll need in this tutorial first. But before we start, there’s something you should now first. There’re two kinds of animation in a 2D environment, sprite sheet animation and skeletal animation. The sprite sheet animation is achieved by swapping a sprite frame by frame, so that it looks like it was moving smoothly, while the skeletal animation is achieved by translating, rotating, and scaling the bone, like rotating the leg when walking. There’re several advantages, such as even when in slow motion, the animation is not choppy.

Let’s start creating our hero’s skeletal animation in Cocos Studio Animation Editor. First create a new empty project, although the character we used is already in the sample, but let’s try to create it by ourselves.

After you’ve downloaded the assets provided from this tutorial, drag and drop all images from the folder Hero into the Animation Editor’s Resource panel. Make sure that you are in pose mode. When done, click the button that was boxed in blue color or ALT + K.

After that assembles all the bone according to the reference image (ref.png). In this step you just need to position the bone according to the body parts in the reference image. Notice that there’s no right arm, it’s because there’s no resource for both the right arm and right hand. When you’ve done positioning the bone, click View Bones Relationship or press the key H.

Use the binding tools to bind each bone so it creates a hierarchical structure, where body is used as the root.

The next step is to set each bone’s graphic accordingly, so the body uses the image of body. Drag and drop image from the Resources panel to the Graphic property of the bone

Notice that after you set the graphic property, the image may be positioned incorrectly. The solution is to click the image, and then reposition it according to the reference image. The final result should look like this.

Remember to delete the reference image. So that the only one left is the bone and its image. At this step, we have done rigging the Hero. Now we need to create the animations, there are several animations that we need, idle, run, and jump. Jump can be divided to two parts, jump start and jump end. So in total we’ll have 4 animations. Click the blue boxed button to start creating animations.

Creating animation is simpler than rigging the Hero. As you only need to put a frame on a key movement, then it will be automatically tweened to smooth the movement.

Create your first animation by right clicking in the animation list and choose Add Animation. After that, all you have to do is rotate and move the bone to make the movements.

When you’re done creating the four animations (Run, JumpStart, JumpEnd, and Idle), go ahead and export the project by pressing CTRL + E.

After exports, then we should be able to load it into our game.

The first part of our tutorial ends here. In the second part, we’ll code our game logic.

If you want to download the whole project file (the raw resources, and also the finished armature), you can click the attachment below.

Hadi Setiawan,
Apr 20, 2015, 2:43 AM