crunchytoast.com

When working with Cocos2D – the uber popular open source gaming framework for iPhone, iPad & iPod Touch – you will no doubt encounter the need to create sprite sheets or sprite atlases.

There are two great tools on the market that will make your life heaven, instead of hell.

Sprite Sheets Explained

Sprite sheets allow you to store and load animation frames for your sprites. Generally you store the frames for related sprites (e.g. on the same level) in a single sprite sheet. Having it in one place improves loading efficiency and game performance.

For iOS the largest spritesheet you can load is 2048 x 2048 pixels. You can have smaller ones, but only with width or height dimensions in powers of 2 (i.e. 32, 64 ,128, 256, 512, 1024 or 2048).

Generally Each sprite sheet comprises one graphics file (e.g. commonly a PNG) and one PLIST file. The PNG stores all the frames of animation for one or more sprites, whilst the PLIST stores meta data about where each logical sprite is and its name for reference purposes.

By the way, you can include different sized sprites in the one spritesheet (i.e. for different characters, backgrounds, etc) but each sprite (based on the CCSprite class) more or less requires each frame to be identically sized. By cramming in my sprites into one sprite sheet, you have less load time and better game performance.

Sprites Can Be Hard Work!

New projects usually start with non-production artwork – often something quite horrible! As things progress, artwork much closer to final is developed. However it changes many times! Keeping your PLIST files and PNG sprite sheet assets up to date can be a lot of work, which is especially defeating since you know some of that efforts is thrown away on editing PLIST and PNG files!

Thankfully there are two good tools for managing things.

Zwoptex is Good

The first tool we recommend is Zwoptex, whose authors first defined the PLIST format for Cocos2D sprite sheets. This tool allows you to graphically layout your sprites. It will then create the PNG and PLIST for you.

It’s a great tool! It can automatically layout your sprites based on best fit, which is great for tightly packing sprites into a single sheet. It also trims excess space and makes the PNG and PLIST creation process very smooth.

Ray Wenderlich has a great tutorial on using Zwoptex in a Cocos2D project!

However, Zwoptex is no longer the best.

What! You Want More???

Once you get your sprites into your project, you may find you need to optimise things. For one thing, using different color depths can drastically affect your frame rate on older devices (2G, 3G iPhones or older 2nd Gen iPod Touches for example).

Additionally, your overall bundle size can get out of hand very quickly if you have lots of graphics. Which could make it hard to ensure you stay under the 20Mb over-the-air (OTA) App Store download limit.

TexturePacker is Better

Don’t get me wrong, Zwoptex was my favorite BFF sprite tool for Cocos2D until only 3 days ago. However, once I started trying to optimize my assets, I found it offered me nothing. On the other hand, the “smirk inducingly” named TexturePacker (tee hee) offers some great benefits above and beyond Zwoptex.

For one, TexturePacker can show you how your sprites look using different color depths. This is crucial when deciding if your artwork will look any good at RGBA4444 (16 bit) instead of memory gobblingly rich RGBA8888 (32bit).

Moreover, any gradient rich artwork tends to show banding or striping at bit depths they were not made for. However, TexturePacker also provides built in dithering for making them look better at your target pixel format.

TexturePacker dithering results, check it on a iOS device screen to know for sure!

TexturePacker also supports the Power VR compressed graphics format. Every iOS device contains a PowerVR graphics chip that can decompress files in its native format very quickly. This is now supported in Cocos2D as of 0.99.5-RC1

So you can have compressed files for your sprite sheets which decompress quickly without slowing down the device!

Ray Wenderlich also has a great tutorial on using TexturePacker in a Cocos2D project!

Workflow Benefits Abound

So you’ve worked out your optimum sprite layout and pixel format. But every time you make a change to your source graphics, you feel like you have to load up the sprite sheet editor and do it all again. With Zwoptex this is currently your only choice. But with TexturePacker, you can do one of two things more.

Use Folder References in Your Project
TexturePacker allows you to include references to folders for your source graphics. So after changing an existing source PNG or adding new PNGs in the source folder, open TexturePacker and press “publish” and hey presto your sprite files will be updated.

Xcode Scripting
That’s right folks, if you can code in ObjC you can write shell scripts. TexturePacker was originally a command line tool, so you can fully automate updates to your sprite sheets right from inside Xcode. A great time saver! Combined with TexturePacker’s ability to scale source graphics automatically, you can create sprite sheets for iPhone Retina and iPhone 3G resolutions using one set of source graphics – muy bueno!!

What Will It Cost Me?

Come on, don’t be cheap, both Zwoptex and TexturePacker’s authors are indie developers looking to help you and make a little money. They offer freebies but show ‘em some love!

• Zwoptex is US$14.95, get it here
• TexturePacker is US$17.95, get it here, it is well worth the extra 3 bits!

Full disclosure: I just found TexturePacker on the web, bought a license and started using it. Long Weekend LLC has no connection to TexturePacker’s author other than being satisfied users of his software *grin*

This entry was posted on Monday, November 29th, 2010 at 5:25 pm and is filed under Technobabble. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.