CSS, Tools

Texture packer

imageWhen building my game Orbizoid I wanted to combine the images into sprite sheets. A sprite sheet is an image which contains a collection of images (sprites) that are used in a game or website. Because my game was build using HTML, JavaScript and CSS the use of sprites was very simple to do. The hard part was combining a whole lot of image into a sprite sheet. Until I came across Texture Packer. A little tool that can do a lot with sprites. Here’s how it works.

Loading images

When you open Texture Packer you start with a blank sheet. You can add images by clicking on the Add Images button on the toolbar. If you want to add an entire folder with images you can click the Add Folder button. I personally like to just drag and drop the image I need for a sheet from the Windows File Explorer to the empty area on the right in Texture Packer.

And there it is: a sprite sheet.

 image

Texture packer provides a lot of ways you can fine tune your sprite sheet. As you can see in the image above, the layout isn’t optimal and could be a little better.

Layout

Two section of the panel on the left of Texture Packer are important when changing the layout: the Geometry section, which contains properties for the sprite sheet as a whole; and the Layout section, which contains properties for laying out the individual sprites.

imageimage

The two images above show before and after tweaking the settings. One of the things that made a major difference was specifying a maximum width of 350px and setting the size constrains to allow any size.

To further optimize the sprite sheet I set the the algorithm property under the layout section to MaxRects.

To make the exact positioning more visible I check the Shape Outlines property under the layout section. You can use this property for debugging purposes.

SNAGHTML6e9d81Publishing

When you are satisfied with sprite sheet, all there’s left to do is to publish the sprite sheet to an image file. You probably want the sprite sheet in a specific format. You can find these properties in the Output section. For example, when you are creating a game using Cocos2D, you would prefer something that works with that instead of an image only. Texture Packer provides you with a large list of types and frameworks you can export to. One of them is CSS, which can be used for websites. I used the JSON Array format. This will create an image and a file containing JSON with metadata about the sprite sheet. As my image format I used PNG.

After naming both files I hit the publish button on the toolbar and both files were created. By using the .json file that was created I was able to use the sprite sheet in my game Orbizoid with any problems.

Warp-up

Texture Packer has a lot more features than I talked about here. I would suggest to just play with the different settings a little and see what everything does for yourself. It comes in a Lite version which is free and doesn’t have a and a Pro version which has a all the things you need.

If you do anything with websites or games that use images you should definitely have a look at Texture Packer to create your sprite sheets.

Pixel Guy Juggling

One comment

Leave a Reply

Seo wordpress plugin by www.seowizard.org.
%d bloggers like this: