728x90 AdSpace

Latest Article

character animations in cocos2d-x using sprite sheets


First of all if you want to create a character animation you need various sprites for that character showing specific movement positions. Playing a sequence of sprites in succession gives you the illusion of an animation.
Step 1: Getting images
I am giving you the action movements of THE HULK character. I got the sprites for HULK from the link
Many other sprites for other characters are also available.
Step 2: Getting image sliced
Now after downloading the image file from the link
I opened the file in GIMP, an open source software available for download for free. In order to slice the image we need to drag the grid lines (blue/red) from the ruler from the top and from the left and position them such that the images you want to be sliced are selected as shown below:

Here i have chosen the punching sprites in the upper row for slicing and animation.
Then go to filters->web->Slice and a dialog will open for you to specify the prefix for the file names that will be sliced. Also specify the location where the sliced images will be placed.

Step 3: Using TexturePacker to create the spritesheet

Why do we need to create a sprite sheet when we can use the images as well? The reason is that a sprite sheet is quicker to load and uses less memory and gives a smoother user experience.

So TexturePacker is also available for download but on a trial basis. Its very simple to use, you just add the folder which contains the images to be loaded ad it puts all of them in the spritesheet. Infact, multiple folder contents are also merged into one sprite sheet.

Then we have an option Publish, this enables publishing the spritesheet into plist for use in cocos2d-x. A png file is also created. For my example they are named hulkmoves.plist and hulkmoves.png

Now we have to make sure all our resources are complete. I chose four images for the action buttons to make the hulk move. I also created a sound file for the hulk. I would recommend mp3cut.net for manipulating sound files. Place all you images, plist and sound file in the resources folder of your cocos2d-x project.

I have given you the complete source code for the HULK animation so theres basically nothing you have to do except run the code and see it in action. :)

Link to code:

character animations in cocos2d-x using sprite sheets

  • Blogger Comments
  • Facebook Comments


Post a Comment