Texture Packer Tutorial: How to Create and Optimize Sprite Sheets

Pixel Formats

It’s important to understand the pixel formats your game engine supports, because pixel formats affect how much memory it takes to load an image in your game. Since games usually load a lot of images, you want to make sure that you make the best use of the limited memory available on a mobile device as you can.

By default, when you load images in Cocos2D, it uses 4 bytes per pixel – 1 byte (8 bits) each for red, green, blue, and 1 byte (8 bits) for alpha transparency. This is known in shorthand as RGBA8888.

So if you load an image in the default pixel format (RGBA888), you can calculate the memory it will take to store with the following calculation:

width x height x bytes per pixel = size in memory

In this case, you have a 512×512 image, so if you load it with the default pixel format it would be:

512 x 512 x 4 = 1MB (!)

Wow! Considering iPhone 5 phones have 1GB total, with the higher resolution screen and desire for more and more action in your games having large sprite sheets can add up quickly. Older phones like the 3G have 128MB, and 4S phone have 512MB. Imagine if you had several (even bigger) spritesheets, like games often do!

This is where pixel formats come to the rescue. You can save images with less bytes per pixel (2 bytes per pixel, or 16 bytes per pixel), which trades off image quality for a reduction in memory.

In general, your goal should be to load at the minimum possible level while still having your game look good. Backgrounds are often a good candidate for 8-bit or 16-bit formats, and sprites are usually 16-bit or 32-bit. For a great writeup of the various pixel formats and which you should use when, check out Riq’s understanding pixel format guide.

By the way – if you look in the lower right corner of the window, Texture Packer will show you the image size your sprite sheet will take in memory based on your currently selected pixel format, so you don’t have to do the calculation by hand :]

Pixel Formats and Dithering

A lot of times, you can load an image with a smaller pixel format, and not notice much of a reduction in quality. But in images that have a lot of gradients, you will notice some bad effects. Here’s an example of what it would look like if you load the art from this app with a 16-bit pixel format (RGBA4444) as-is:

Notice how there is “striping” in the areas with a lot of gradients, especially in the background, bear, and ooze image.

At this point, you might be tempted to rework your images to make less use of gradients or use a larger pixel format, but this is where Texture Packer comes in handy with another killer feature – image dithering!

When you save sprite sheets using Texture Packer, you can specify the target pixel format to save your images to (such as RGBA4444), and then choose a “dithering method.” This basically modifies your image’s colors a bit so that they look good at lower quality, even when they have gradients or other colors that usually would cause problems.

Go ahead and select Image format of RGBA4444 for this sprite sheet, and change the Dithering option to FloydSteinbergAlpha. Texture Packer will modify your images on the fly and show you an approximation of what they’ll look like – not bad when compared to the screenshot above, eh?

In the panel on the left, under Output make sure Data Format says cocos2d. Then click the button with the … next to Data File and locate your Cocos2d 2.x project’s resources folder and save the file as sprites-ipadhd.plist. TexturePacker will automatically fill in the Texture File name for you.

Now click the Texture Format dropdown and select zlib compr. PVR (.pvr.ccz, Ver.2). A warning will popup about premultiplying alpha to avoid halos-just select yes for now.

Next, click the gear icon next to AutoSD. In the Presets dropdown, select cocos2d ipad/hd/sd and click Apply. This makes TexturePacker scale down the artwork for the iPhone retina (2x) and iPhone non-retina (1x) displays automatically.

Close the popup and click Publish. TexturePacker will automatically create the sprite sheets for you – in all resolutions.

As a last step save your settings as a TexturePacker TPS file by selecting Save and saving as sprites.tps in TextureFun/Resources. You can always use this file later to open your Texture file and look at the settings. You will look at a great use of this file at the end of the tutorial!

Now, go back to XCode and add these to your project. Right click on the Resources folder of your project, click Add Files to TextureFun…, select all files that begin with sprite in the Resources folder (except for the .tps file), make sure the Copy items into destination group’s folder is unchecked and click the Add button to add them to your project. At this point your Resources group should look like this:

“But wait one gaddong minute”, you might say, “what in the world is a pvr.ccz?!” Well I’m glad you asked…

PVRs and Compression, Oh My!

PVR images are an image container specific to the PowerVR graphics chip on iOS devices. They are good to use when possible on iOS because images can be loaded directly onto the graphics card, rather than needing to go through a conversion first.

PVR images can contain image data using a variety of pixel formats. For a while, Cocos2D only supported the pixel formats you can create with the texturetool app that comes with the iOS SDK, but Cocos2D was later extended to support many more formats as well.

And even more recently, Cocos2D was updated to support a compressed version of PVR images called pvr.ccz. The advantage of using these is a) your binary size is smaller since the images are compressed, and b) your game can start up much faster.

So, in summary, for this sprite sheet you are choosing to save the image in a 16-bit pixel format (to reduce memory cost) and save as a pvr.ccz (to load the app faster).