PhysicsEditor with cocos2d and box2d

This is a short tutorial how to use PhysicsEditor together with cocos2d and box2d as physics engine. The project is bases on the box2d template project which comes with cocos2d. The project is complete – it contains cocos2d and everything you need for a quick start.

Structure:

• Classes – example classes to for the demo
• libs – cocos2d, box2d and other sources
• PhysicsEditorSources – the plist loader for box2d
• Resources – the sprites

The main folder contains the shapedefs.pes file which is the file for PhysicsEditor. You can open this to experiment with parameters and add new sprites to the project.

Setting up box2d

First you need to create the b2World object which runs the complete simulation:

In the demo I also add some floor shapes which are created programatically (not shown here).

Preparing the GB2ShapeCache

Next we need to set up the GB2ShapeCache and load the plist file with the shapes created with PhysicsEditor.

Make sure the plist file is in your resources.

Create a CCSprite and attach it to a b2Body

With that done we can create a CCSprite and add it to the current scene:

(I did not use CCBatchNode in this example because I wanted to keep the demo simple and independent from<a href="http://www.texturepacker.com/" "="" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 14px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(131, 180, 65); text-decoration: none; background-position: initial initial; background-repeat: initial initial; ">TexturePacker.)

Next is to create a b2Body object. We create a b2_dynamicBody which means that the object will be controlled by box2d. We also set the position and which is very important we also set the userData field to the CCSprite we created in the step before:

With that done we own a b2Body which has no fixtures or shape yet. We now use the GB2ShapeCache to attach the fixtures created with PhysicsEditor. If you simply dragged the object.png onto PhysicsEditor it’s name in the plist file will be object.

Create the body, then add the shape to the body:

The last step is to set the anchor point for the CCSprite. PhysicsEditor allows you to set and edit anchor points. If you don’t do this the b2Body and the sprite displayed might have some offset which results in a strange behavior.

Simulating the b2World

Now we have the physics in place but also need to update sprites by setting them to the position of the b2Body object and adjust rotation. We do this in the tick routine which we set up to be called from cocos2d’s scheduler for each frame (during init)

In the tick we need to simulate the world. box2d does several iteration simulating small time steps and moving the bodies for each of them. Adjusting the values might give you better collision detection and physics behavior but might also result in longer calculation times.

After stepping the world we need to adjust each CCSprite according to the b2Body. We do this by iterating over all bodies in the world. Remember that we stored the CCSprite’s pointer in the userdata field of the b2Body. This is how we can adjust them:

What next

Start playing with PhysicsEditor. E.g. adjust the parameters like bounce, friction to see the sprites bounce and jump.

The complete demo project including resouces and all you need to get started can be found in the Examples folder in the dmg file.