How To Build a Monkey Jump Game Using Cocos2d 2.X, PhysicsEditor & TexturePacker – Part 1

Creating the Jungle Sprite Sheet

Now create a new sheet for the foreground by pressing the New button on the toolbar. Drag the complete jungle folder from the Assets folder into the empty right pane.

See how TexturePacker builds the complete directory structure on the right pane? You can expand the tree view by pressing the arrow button to the left of the word “jungle”.

You are using a feature called Smart Folders, where TexturePacker rescans the directory every time you add sprites to the folder. If you want to add a new asset, or rename or change an existing asset, just drop it into the folder on your file system, and when you re-enter TexturePacker it will automatically update the sheet.

Yellow folders are the main folders you added, blue ones are folders found in the directory structure.

Note: If you need to update many sprite sheets at once, you can switch to Terminal and update all .tps files from the command line by calling TexturePacker *.tps.

You can even integrate TexturePacker with your Xcode build process. This has several advantages:

For more information on integrating TexturePacker with Xcode 4, check out this tutorial.

1. You no longer need to worry about sprite sheets – just add the sprites to your Assets folder, and you’re done.
2. If you use version control, sprite sheets will hang around as binary blobs. This will grow your working copy size pretty fast, especially when using Git or Mercurial for version control. The easy way around this is to simply not add the sprite sheets to version control, and instead create them on the fly.

For the options, you’ll use a nearly identical setup as for the background sheet (see screenshot above). Just make sure to leave the image format at RGBA8888 for full quality.

In AutoSD simply select cocos2d hd/sd and press Apply. This sets the 0.5 scaling for retina and non-retina display images.

Also be sure to leave the padding at the default of 2. This will reduce artifacts on the sprite borders. Sometimes OpenGL drags in pixels from neighboring sprites. Padding avoids this problem by adding transparent borders around the sprites.

Note: If you want to use sprites as tiles with seamless connections, you must use either select extrude or reduce border artifacts, which replaces the transparent borders with colored ones. If you do not do this, you might get transparent lines between the tiles.

Set the Data File to jungle-hd.plist in the Resources folder of your Xcode project. This will automatically set the Texture File to jungle-hd.pvr.ccz.

Finally, save the sheet as jungle.tps in the Assets folder and click Publish. This creates 4 files in the Resources folder: jungle-hd.plist, jungle-hd.pvr.ccz, jungle.plist, and jungle.pvr.ccz. Check and see if they are there.

Creating the Frame Spritesheet for iPhone5

You need one more sprite sheet – this one for iPhone 5, to contain the tree left and right which occupies the additional space.

You can’t simply add the tree to the jungle sprite sheet since the tree is more than 2048 pixels high. iPod 4G only allows a maximum texture size of 2048×2048. You could split the tree into 2 parts and join it by using sprites on the device – or create another sprite sheet which is only loaded on iPhone 5. I prefer the latter since it makes things easier and avoids loading additional bytes on most of the devices.

You’ll be using almost the same settings as for the jungle sprite sheet. To avoid re-configuring all the settings, you can set the settings you currently have in the jungle sprite sheet as your default settings.

To do this, click the Save defaults option in the toolbar while the jungle is opened. Then open a new sprite sheet, and it will contain the settings you just saved as defaults. Open AutoSD and clear Main extension and press the “-” button on all list items.

Then drag in the frame folder instead of the jungle folder, and make sure the Max Size W and H are set to 4096.

Save the file as frame.plist and frame.pvr.ccz.

Creating Physics Shapes Manually

Next you’ll set up the physics shapes with PhysicsEditor.

Launch PhysicsEditor, and start by setting the Exporter to Box2d Generic (PLIST). I made an Objective-C loader for this format that you can use in your Cocos2d projects. If you are not satisfied with the formats supported by PhysicsEditor, you can simply create your own custom data exporter.

Next set the PTM-Ratio to 170. This tells Box2d that 170 pixels are equal to 1 meter (39.37 inches), the internal measurement unit of Box2d. I chose 170 pixels because this is the monkey’s height, and he is going to be 1 meter tall in the simulation.

You’re going to create all the physics shapes for the high-res sprites only. This is okay, since you want the physics parameters to be identical on retina display and older displays.

Creating different shapes for different screen resolutions would create different masses for each object, resulting in different physics behavior – which you don’t want! The idea is to run the same simulation on all devices and only adjust the visuals.

Setting Up the Fixture

You’re now going to create your first shape by hand. Drag the jungle/floor/grassfront.png shape onto the left pane of PhysicsEditor. When you do this, the shape will also appear in the center pane, which is the main editor area.

Note the small blue circle with the cross inside: that is the anchor point of the shape. You’re going to leave the anchor point for this shape where it is, on the bottom left corner. Later on, I’ll show you how to change the anchor point.

First use the polygon tool from the top tool bar. As soon as you click on it, a small red triangle appears. You can drag this triangle with your mouse.

The handles allow you to change the triangle’s shape. Double-clicking somewhere near a line will add an additional vertex. Double-click the vertex to remove it.

You do not have to care about things like polygon orientation or convex or concave shapes. This is all handled by PhysicsEditor.

Now create a rectangular shape for the floor. It should cover the soil but not the grass, and look something like this:

Setting Up the Parameters

Since the floor is going to be a static shape, its parameters are going to be very basic.

Density affects the weight of a body/fixture. Since the floor will not move, the value of the density is of no importance and you can leave it at the default value (2.0). Restitution is the degree a colliding shape will rebound from another object. For the floor, you want to keep this at 0.

Friction is the only important value here, as it determines how much the sprites will slide on the floor. Set this to 0.7.

The next items to set up are the collision bits. PhysicsEditor lets you handle these parameters quite easily – that is, without doing hex math. First, give the bits useful names by setting up the names in the text fields associated with the bits:

• floor – both the floor and the walls
• monkey – what else?
• good_objects – objects that don’t hurt the monkey
• bad_objects – objects that hurt the monkey

Ignore the other bits – you don’t need them.

Cat. stands for Category – it describes the type of an object. An object can be part of multiple categories at once. Mask describes which objects it can collide with.

Two objects can collide only when Object B’s bit category is of a type that has been selected as a mask for Object A, and vice-versa. Tick the Category field for the floor bit since this shape is a floor, and then the Mask field for all the bits. This enables collision between all objects and the floor.

Save the project as shapes.pes inside the Assets folder.