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.
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.
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.
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.
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.
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.