Texture Packer

• Name:Texture Packer
• Author:
• Code Repository:
• Last Update:2013-12-25
• Compatible with:
• Platform:IOS, Android
• API Language:C++
• Website:
• Company:Code and Web

Brief

This article will show you, in an easy and fast way, to incorporate sprite sheets to your game projects based on Cocos2D-X.

Description

TexturePacker

Creating and using Sprite Sheets in Cocos2D-X with Texture Packer.

This article will show you, in an easy and fast way, to incorporate sprite sheets to your game projects based on Cocos2D-X.

For more information about this topic, there is a great tutorial at the Ray Wenderlich blog (http://www.raywenderlich.com/2361/how-to-create-and-optimize-sprite-sheets-in-cocos2d-with-texture-packer-and-pixel-formats). The blog post is for iPhone’s Cocos2D but it is valid for Cocos2D-X as well. After following this simple tutorial, I recommend you to read that post, that will teach you important details about how Cocos2D deals with the pixel formats.

Ok let’s move on it. First of all, I recommend you to use Texture Packer to create your sprite sheets. It is not a free program, but it has a demo version that works pretty well, and the full version is only around 20€ at this moment. So it’s not a big investment for an app that is very useful. Some advantages of Texture Packer are:

• Very easy to use, you have your sprite sheets created in a matter of seconds. Don’t waste your time dealing with texture positioning..
• Optimize your game: The app automatically creates power of two textures, using all the available space, this means that you have more assets in smaller textures.
• Works with almost any game engine… Cocos2D and Cocos2D-X, Lib-GDX, AndEngine, Unity3D or just JSON or plain XML, among many others.

PS: I’m not being sponsored by Texture Packer :~~)
Ok, now I assume that you have downloaded Texture Packer. Open it and drag your assets at the sprites window, as shown in the following picture:

You will see that Texture Packer will create for you a texture composed of all your individual sprites. Nice! Ok, now make sure you choose cocos2d as the DataFormat. For the Data file, choose a destination folder and file name, with a “plist” extension. That file will contain the metadata of your sprite sheet .
Choose PVR as the texture format, and RGBA8888 as the image format. You might also use for example RGBA4444 as the image format, that would reduce the amount of bytes per pixel, and as a result would reduce , the size of the final texture, what is good, and could be acceptable in terms of quality for less detailed textures, like the backgrounds for example.
In the texture file type your pvr file. When you are ready, click at the “Publish” button at the top bar, and the program will generate the two files.
Now we have the necessary files for our X Code project! Open Xcode and drag the files to the resources folder. I’ve named my files as “gamePlayPack.pvr” and “gamePlayPack.plist” respectively.
This would be the necessary code sniped to render an assed contained in the texture:

 _batchNode = CCSpriteBatchNode::batchNodeWithFile;
 this~~>addChild(_batchNode);
 
    
 CCSpriteFrameCache::sharedSpriteFrameCache()~~>addSpriteFramesWithFile;
 *ship = CCSprite::spriteWithSpriteFrameName;
 CCSize winSize = CCDirector::sharedDirector~~>getWinSize;
 _ship~~>setPosition);
 *batchNode~~>addChild(_ship, 1);
 
    
 

Here we are loading the “pvr” and the “plist” files, and then we are initializing a sprite with its spriteWithSpriteFrameName function, that basically will require the original file name of the individual picture to reference our assets, in this case “ufo.png”.

Remember that the “plist” file contains the relationship between the original assets as we knew them, and the grouped assets inside a “pvr” texture.

And that’s all! You can find more of my tutorials in http://www.jesusbosch.com