Texture Packer Tutorial: How to Create and Optimize Sprite Sheets

Optimize texture usage with Texture Packer and Pixel Formats!

Optimize texture usage with Texture Packer and Pixel Formats!

Update 5/10/2013: Fully updated for Cocos2D 2.1-rc0a, Texture Packer 3.07, and Modern Objective-C style (original post by Ray Wenderlich, update by Tony Dahbura).

When making 2D games, it’s important to combine your sprites into large images called sprite sheets, in order to get the best performance for your games.

And Texture Packer is a great tool that makes it extremely easy to generate these sprite sheets – with the click of a button.

This Texture Packer tutorial will show you how to use Texture Packer to create and optimize sprite sheets in your games, using a Cocos2D 2.X game as an example.

Along the way, you’ll learn how to use pixel formats and Texture Packer wisely to make sure your games launch quickly, run smoothly, and use as little memory as possible – while still looking good!

If you are new to Cocos2D, you can still follow along with this Texture Packer tutorial, but there may be some missing gaps in your knowledge about Cocos2D itself as the focus will be on TexturePacker. If you’re curious to learn more about Cocos2D, check out some of our other Cocos2D tutorials.

Getting Started

Like I said, even though this is a Texture Packer tutorial, I wanted to show you an example of this working in an actual game, so we’ll be using Cocos2D for that.

So first make sure that you have the latest “unstable” version of Cocos2D v2.x installed.

Once you’ve got that installed, start up Xcode and make a new project with the iOS\cocos2d v 2.x\cocos2D iOS template, and name the project TextureFun. Set your device family to iPad.

You are going to use ARC in this project, but by default the template isn’t set up to use ARC. Luckily, fixing it is really easy. Just go to Edit\Refactor\Convert to Objective-C ARC. Expand the dropdown and select only the last four files (main.m, AppDelegate.m, HelloWorldLayer.m, and IntroLayer.m), then click Check and finish the steps of the wizard.

Next, you’ll need some images to make the sprite sheets. Download this sample artwork I gathered together, and after you unzip it, drag the entire directory as a subfolder of your TextureFun project source code folder, as shown in the image below.

Ok, now that you have a project template and some sample art to work with, time to make a sprite sheet using Texture Packer!

Creating a Sprite Sheet with Texture Packer

The first thing you need to do is download a copy of Texture Packer. There is a lite version that will work for this tutorial but you will quickly see the advantages of this great tool and want to use the full featured version.

When you download the DMG, and open the package and agree to the license, drag the TexturePacker icon to the Applications folder and follow the prompts to install Texture Packer on your machine.



After you finish installing, click on Texture Packer in your Applications folder to run it. Agree to the license prompt and when you see the first popup that appears, choose “Test Pro for 1 week” to continue.

Now, click the Add Folder button in the top toolbar and choose the TextureFun/TextureFun_Art/sprites folder. Texture Packer will load the images and intelligently lay them out within the sprite sheet as follows:

On the right hand side, you can see all of the images imported into Texture Atlas and click on each one to see the bounding box – another handy feature!

A few notes about adding images using the Add Folder option, by the way. First, when you add sprites by folder like this, Texture Packer doesn’t add references to the individual sprites, it adds a reference to the folder. This means if you add more sprites to the folder, next time you run Texture Packer it will pick up any new sprites in the folder automatically – pretty handy!

Also, note you don’t necessarily have to have all of your sprites in the same root folder, you could organize them in subfolders if you want (such as sprites/animals, sprites/monsters), and when retrieving them from Cocos2D you can refer to them by their relative path.

Finally, note that you can include more than one folder of sprites if you want – this can be handy for larger games where you have the same items on multiple sprite sheets/levels.

Ok, now take a look at the options on the left hand side. There you can configure the output, geometry (size), and layout options for the sprite sheet.

Try dragging the entire Texture Settings bar – you’ll see that it can detach. One of the many new features of Texture Packer is the ability to pull the settings off onto your desktop and have them float outside your work documents.

Let’s quickly go through some of the new size and layout options on the Texture Settings bar:

• Data Format: This provides you the ability to select the format for your data files to match your game framework. If your framework is not listed (unlikely as it may be) you can create a custom format to support your needs/framework.
• Texture Format: This specifies the graphics file format desired for the sprite sheet. For this tutorial you will be using the pvr.ccz format which is the Power VR with zlib compression on the data file. Other option choices will change based on the selection of this.
• Premultiply alpha: This is an option when using PVR format and is checked by default. This option multiplies the alpha value times each color so they are computed prior to the framework needing them and is required by some frameworks-it results in faster rendering.
• Image Format: This specifies the pixel format to use in the texture file. These settings affect things like how many bytes are used per pixel of the graphic. For this tutorial you will be using RGBA4444 which means two bytes per pixel will be used.
• Dithering: This lets you specify the algorithm to use when computing values to attempt to maintain image quality during compression. FloydSteinberg Alpha method uses a distribution to compute the next approximation of the color that should be used to minimize color loss with the reduced pixels. This allows an image that is of higher number of colors to a format with lower number of colors (bits to represent color).
• AutoSD: This is a great feature that lets TexturePacker size and scale your graphics automatically during the publish phase. This allows them to be suffixed with a naming format that Cocos2D will use to select the appropriate file based on the device type and display type. This feature saves you the effort of doing this yourself for all the different screen types and resolutions.
• Max size/Fixed size: This lets you specify a maximum size for a sprite sheet. This can be handy if you want to limit your spirte sheet to a certain size (to certain devices, or just if you want to make sure you don’t go over certain limits).
• Size constraintsL POT (Power of 2) is checked by default – this picks the smallest possible “power of two fit” for the sprites you added to the sprite sheet. This is a really handy feature, because it saves you time having to figure that out yourself.
• Scale: This lets you save the sprite sheet out in a larger or smaller scale than the images within. This can be handy if you want to load “2x” images in your sprite sheet (created for Retina-display devices or iPad), but actually save them out at half size (for use on iPhones/iPod touches without a Retina display).
• Algorithm Texture Packer includes two algorithms MaxRects and Basic, MaxRects works pretty well so there’s no need to mess with it.
• Border/shape padding: The space between the border of the sprite sheet and the sprites themseves. If you see artifacts from neighboring sprites in your game, you may want to increase the values here to add more of a separation between the edges/sprites.
• Extrude: This repeats the pixels around the borders of sprites. This is the opposite of adding padding – if you see transparent “gaps” around the edges of your sprites, you may wish to set this to a higher value.
• Trim: Removes the transparent borders around sprites to pack them into the sprite sheets more efficiently. Don’t worry, the transparent areas are just removed for packing purposes – when you read the sprites back from Cocos2D the transparent regions will still be there (in case you need them for placement purposes, etc.)
• Shape outlines: Useful to turn on to see the edges of your sprites for debugging purposes.

For this sprite sheet, you don’t need to change any of the above values from their defaults – they’re fine as-is. However, you will be changing the values in the output section. But before you get to that, let’s talk about pixel formats in Cocos2D.