I'm a robot

CodeAndWeb's GameDev Blog page 1/10

Using PhysicsEditor with Cocos2D V3

This tutorial explains how you can use PhysicsEditor with version 3 of Cocos2D, which has integrated Chipmunk2D as physics engine. You can clone the demo application including the PhysicsEditor exporter and loader code from GitHub.

If you are not interested in the demo application, you can download the exporter and loader code for Cocos2D-V3 here:


It contains two folders:

You can also clone the

Create physics shapes for your sprites

After installing the exporter as described above, please restart PhysicsEditor. Now you can select the new Cocos2D (V3) exporter in the Exporter combobox. After doing that, you can model your physics shapes as usual:

Setup your Cocos2D application

For this tutorial we use the cocos2d iOS template to create a simple demo application:

After creating the new project and adding the GCCShapeCache class, we are going to re-use the HelloWorldScene for our demo. First of all we have to include the GCCShapeCache header in HelloWorldScene.h:

#import "GCCShapeCache.h"

Then we remove the existing scene setup from init, and load the .plist file which has been generated with PhysicsEditor into the GCCShapeCache:

- (id)init
    // Apple recommend assigning self with supers return value
    self = [super init];
    if (!self) return(nil);

    // Enable touch handling on scene node
    self.userInteractionEnabled = YES;

    // Load shapes
    [[GCCShapeCache sharedShapeCache] addShapesWithFile:@"Shapes.plist"];

    // ...    

Add collision shapes to your sprites

Now we can implement a method which not only creates a CCSprite with an image, but also sets the CCPhysicsBody on it, and adds it to a CCPhysicsNode:

- (void)spawnSprite:(NSString *)name atPos:(CGPoint)pos
    CCSprite *sprite = [CCSprite spriteWithImageNamed:[NSString stringWithFormat:@"%@.png", name]];
    sprite.position = pos;
    [[GCCShapeCache sharedShapeCache] setBodyWithName:name onNode:sprite];
    [_physicsWorld addChild:sprite];

_physicsWorld is an instance variable we've added to our HelloWorldScene:

@implementation HelloWorldScene
    CCPhysicsNode *_physicsWorld;

In the init method we create and configure of the _physicsWorld and set the background and floor of the scene:

    // ...

    // Load background image
    CCSprite *background = [CCSprite spriteWithImageNamed:@"background.png"];
    background.anchorPoint = ccp(0,0);
    [self addChild:background];

    // Setup physics world
    _physicsWorld = [CCPhysicsNode node];
    _physicsWorld.gravity = ccp(0,-900);
    //_physicsWorld.debugDraw = YES;
    [self addChild:_physicsWorld];

    // Add ground sprite and drop a banana
    [self spawnSprite:@"ground" atPos:ccp(0,0)];
    [self spawnSprite:@"banana" atPos:ccp(self.contentSize.width/2,self.contentSize.height/2)];

    // done
    return self;

With the following few lines of code we can add additional sprites to our scene by touching on the screen:

-(void) touchBegan:(UITouch *)touch withEvent:(UIEvent *)event
    CGPoint touchLoc = [touch locationInNode:self];
    static int i = 0;
    NSArray *sprites = @[ @"banana", @"cherries", @"crate", @"orange" ];

    [self spawnSprite:[sprites objectAtIndex:(i++ % [sprites count])] atPos:touchLoc];

That's it! We can start playing around with our demo app:

Source code available for download

git clone https://github.com/CodeAndWeb/PhysicsEditor-Cocos2D-V3.git
PhysicsEditor-Cocos2D-V3.zip PhysicsEditor-Cocos2D-V3.tar.gz

This tutorial describes how you can use TexturePacker to create sprite sheets for Unity's 2D extension.

TexturePacker, together with the free TexturePackerImporter, creates sprite sheet assets that can be directly used from Unity's graphical editor or through scripts.

Sprites are accessible through Unity's standard API - no additional code required!

This is what you get:

Prepare your Unity project to read TexturePacker sprite sheets

To enable the import of TexturePacker sprite sheets in Unity, you have to install an importer script, which you can download from the Unity Asset Store for free:

TexturePacker Importer

The script extends Unity to read sprite sheet data created with TexturePacker and to automatically create native Unity assets which you can use with the Unity Editor. The code of the script only runs during development. It does not become part of your product or game.

Import this package into your Unity project by opening the link from above in Unity:

For loading TexturePacker sprite sheets it is sufficient to add the TexturePackerImporter.cs script to your project:

It is important that this script is located in a folder called Editor to ensure that it is automatically loaded by the Unity Editor. The Example directory contains some sample sprites, a TexturePacker project file, and a sprite sheet created with TexturePacker.

Create your sprite sheet and load it into Unity

To create a new sprite sheet, simply start TexturePacker and drag & drop the directories containing your sprite images to the Sprites area of TexturePacker.

TexturePacker will automatically load and lay out all image files:

TexturePacker preserves the directory structure under the directory you added - allowing you to group and sort sprites.

Select Unity Texture2D sprite sheet in the Data Format field, and enter a file name to which the data and texture file should be written.

Choose a location in the Assets directory of your Unity project - the TexturePackerImporter script will re-import the sprite sheet into your project each time you publish an updated sheet with TexturePacker.

The TexturePackerImporter script checks for each texture file if a corresponding .tpsheet file exists. This is the data file written by TexturePacker - it is used by the Unity importer to slice the texture into individual sprites.

The assets and sprite sheets are automatically updated in Unity when changes are found. No manual intervention required!

Use the symbol next to the texture item to display the individual sprites:

Now you can use your sprites as usual, directly from the editor.

You can, of course, also access the sprite through the scripting API:

Handling deleted sprites in Unity

The internal sprite sheet representation of Unity uses indices instead of sprite names to refer to individual sprites on a sheet.

The deletion of a sprite changes the indices of all subsequent sprites, and would mess up your project. To avoid this problem, TexturePackerImporter replaces deleted sprites with empty placeholder sprites, which can be ignored:


TexturePacker simplifies the workflow for your sprites in Unity - automating the whole process.

Changing your sprites is quite simple:

Thanks to Francesco Maisto: http://francescomaisto.wordpress.com/ for writing this tutorial!


In this tutorial you are going to learn how to create a sprite sheet in TexturePacker and use it to create an animation of a walking character in a simple Starling application.

What skill level is expected of you?

A sprite sheet (also known as texture atlas) is typically a large bitmap image that includes multiple images (also called sprites). We are going to use our sprite sheet to construct the frames of an animation, a background image and two buttons.

This flash application shows what we are going to achieve in this tutorial:

Also, if you want you can download an archive with all the project’s files from Github.

Let’s begin our journey with some prepping.

Continue reading...

Source code available for download

git clone https://github.com/AndreasLoew/texturepacker-starling-tutorial.git
texturepacker-starling-tutorial.zip texturepacker-starling-tutorial.tar.gz


TexturePacker's Multipack and AutoSD features create multiple output files during a Publish:

To save you from entering single file names for each of the variants - TexturePacker derives the names for you.

With 3.1.0 we introduced Multipack using simple placeholders in the file names to write the additional files. Before TexturePacker 3.2.0 AutoSD replaced parts of the original file name with variant specific extensions. E.g. replacing -ipadhd with -hd.

With 3.2.0 we've now changed the behavior of AutoSD to give you a better and more consistent way to specify file names - by also using placeholders instead of the replacement.

Placeholder Description
{v} AutoSD variant name
{n} Multipack index, starting with 0
{n1} Multipack index, starting with 1

Continue reading...

In this tutorial you are going to learn how you can improve development of SpriteKit games and apps using TexturePacker.

The main advantages over the pure Xcode solution are

Let's start with how to easily create your atlas.

Continue reading...

Source code available for download

git clone https://github.com/AndreasLoew/TexturePacker-SpriteKit.git
TexturePacker-SpriteKit.zip TexturePacker-SpriteKit.tar.gz
Andreas Löw Join the CodeAndWeb Newsletter (privacy policy)
I'm a robot