How to create physics objects in Cocos2D with just one click? (well, more or less one click)


Answer: PhysicsEditor

The PhysicsEditor is a shape editor for physics engines like Box2D and Chipmunk.

Before when I was making physics objects in Cocos2D, I used VertexHelper (Johannes Fahrenkrug), which is great and all, but there were a lot of things that you had to consider, such as you had to define the vertices yourself (meaning: ‘click “around” each sprite to define it’s vertices’) and you have to make sure that you don’t accidentally create any concave polygons (what are concave polygons again? check Wikipedia), and then you have to copy paste the generated code into your project. VertexHelper served me well and all, and it was free.

But PhysicsEditor did make me life a whole lot easier.

Andreas Loew wrote tutorials on his blog on how to use PhysicsEditor with Cocos2D:


How to make animated sprites in Cocos2D? (using 3rd party sprites and TexturePacker)


First of all, thank you Andreas Loew for the TexturePacker and Physics Editor licenses.

This is not a tutorial per se, because a lot of information that I will include in this post are referenced from other people’s works, particularly Andreas’ (

So the question: How do we make animated sprites in Cocos2D using 3rd party sprites. I mentioned before TurboSquid as a good source for free 3D game assets, now I am telling you guys, that aside from free 3D game assets, a lot of 2D game assets are also available for free online, such as Reiner’s Tileset (all the assets that I’ll be using for is from Reiner’s Tileset).

So hop on over to Reiner’s Tileset, and find a character that you’d like, I picked this skeleton with a bow and arrow (he looks kind of cute).


(no, I haven’t named him)

There are a lot of animations included for this character, there’s idle, talking, kicking… animations.

I will be using Andreas’ code (on the TexturePacker website) to load my sprites into the game (check out the blog post: Improved Sprite Loader). You can download the code from that blog post. The CCAnimate+SequenceLoader code loads a sequence of sprites with given format, the start index of sprite must begin with 1 (for example, sprite_0001.png sprite_0002.png, ….the format for this sequence would be “sprite_%04d.png”).

But, but the one from Reiner’s Tileset starts with 0, such as kicking_s0000… One idea is simply ignore the first frame (delete it). Okay, kidding, or rename every file. But what if the animation has like 60 frames?

Good thing, there’s an app called Better Finder Renamer, just drag the files you want to rename and then specifiy the prefix and the Starts with value. So, for our case, I specified “skeleton_kicking_00”, and starts with 1.

Next step, use TexturePacker to create our spritesheet. Click on Add Sprites and select the animation frame files. If you notice the sprite frames have a brown background (which we don’t actually need), Andreas talked about this in another blog post (Using TexturePacker with 3rd party assets).

So just remember to check:

Also check Trim sprite names, so the resulting plist will remove the file extensions of the sprite frames.

Okay, now that we have the the spritesheets ready, some code bits. Add to your project:

  • CCAnimate+SequenceLoader.h
  • CCAnimate+SequenceLoader.m
  • CCAnimation+SequenceLoader.h
  • CCAnimation+SequenceLoader.m

And then in your code, #import “CCAnimate+SequenceLoader.h”” (I placed this in the init of my scene), and then:

[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile: @”skeleton.plist”];
skeleton = [CCSprite spriteWithSpriteFrameName: @”skeleton_idle_s0001”];

CGSize size = [[CCDirector sharedDirector] winSize];        skeleton.position = ccp(size.width/2, size.height/2-10);
CCAnimate *animation = [CCAnimate actionWithSpriteSequence: @”skeleton_kicking_s%04d” delay: 0.1f restoreOriginalFrame: NO];
[skeleton runAction: [CCRepeatForever actionWithAction: animation]];
[self addChild: skeleton];

And then you are done! 🙂

You now have an animated skeleton in your game 🙂