Creating spritesheets with TexturePacker

If, you’ve happened to search on my source code on Invaders from the Strange Space or Alone With Robots, you’ve must have noticed that I am using a lot of spritesheets. A spritesheet is a way to once load an image and use its parts. It improves asset management since you only have one file full of everything you need, memory consumption since you only have one variable to handle and load instead of a bunch of images that would fragment your work, and speed since your images are all in one place together easily manipulated and loaded as one.

Lately, I’ve been working with TexturePacker for this work. The tool was even better that I thought at first and here is how to fully use it.

After dragging and dropping the images to the left TexturePacker sorts them as best as it can. It keeps the size fixed of every images but if you need it it can crop any empty space. I enable the option for 1 pixel inner padding to avoid the images have their borders with the next images pixels. After you export it, it provides a file with the position, width and height of every sprite in the spritesheet, so that you can control it as you want.

I’m using it for flash and Corona SDK projects. In flash there is nothing hard, just load the image and load every sprite in the position I want. But Corona SDK isn’t that helpful.

Using TexturePacker with Corona SDK

When you export a file you can choose where to use it. It has many options from Generic XML, to cocos2D, Unity3D, JSON, CSS, and Corona SDK. Depending the option that you’ll choose it will provide a support file to load the texture. And that file for Corona is in lua.

-- This file is for use with Corona Game Edition
--
-- The function getSpriteSheetData() returns a table suitable for importing using sprite.newSpriteSheetFromData()
--
-- This file is automatically generated with TexturePacker (http://texturepacker.com). Do not edit
-- $TexturePacker:SmartUpdate:665d6c403af30964545aaa277e04ed25$
--
-- Usage example:
--        local sheetData = require "ThisFile.lua"
--        local data = sheetData.getSpriteSheetData()
--        local spriteSheet = sprite.newSpriteSheetFromData( "Untitled.png", data )
--
-- For more details, see http://developer.anscamobile.com/content/game-edition-sprite-sheets

local SpriteSheet = {}
SpriteSheet.getSpriteSheetData = function ()
    return {
        frames = {
            {
                name = "1btnGame_400x86.png",
                spriteColorRect = { x = 0, y = 0, width = 402, height = 116 },
                textureRect = { x = 0, y = 0, width = 402, height = 116 },
                spriteSourceSize = { width = 402, height = 116 },
                spriteTrimmed = false,
                textureRotated = false
            },
            {
                name = "2btnGame_400x86.png",
                spriteColorRect = { x = 0, y = 0, width = 402, height = 116 },
                textureRect = { x = 0, y = 116, width = 402, height = 116 },
                spriteSourceSize = { width = 402, height = 116 },
                spriteTrimmed = false,
                textureRotated = false
            },
            {
                name = "3btnGame_400x86.png",
                spriteColorRect = { x = 0, y = 0, width = 402, height = 116 },
                textureRect = { x = 0, y = 232, width = 402, height = 116 },
                spriteSourceSize = { width = 402, height = 116 },
                spriteTrimmed = false,
                textureRotated = false
            },
            {
                name = "4btnGame_400x86.png",
                spriteColorRect = { x = 0, y = 0, width = 402, height = 116 },
                textureRect = { x = 0, y = 348, width = 402, height = 116 },
                spriteSourceSize = { width = 402, height = 116 },
                spriteTrimmed = false,
                textureRotated = false
            },
        }
    }
end
return SpriteSheet

It already shows you how to load it in the comments, but there are some problems which took me long to figure out. When using a data file such as this one in Corona SDK ALWAYS have it in you root folder to work, exactly where you have your main.lua file, and that’s all about it. It will work like a charm then. DO NOT put it in a separate folder with your assets, because it will break down everything.

If TexturePacker finds that two of your sprites are identical it will pile them up in one images. That’s certainly good, but sometimes you just don’t want it. Some APIs such as Corona use the spritesheets only in order and not shuffled. Luckily it provides the above support file and it can be loaded using its data, but it would be better if it wasn’t so big trouble.

Update: Seems that the stacking can be disabled by unchecking the Enable Auto Alias box. Thanks to @Andreas Loew. It just became even better now :D

Also, it would be better to have the option to manually organize your spritesheet without using any algorithm. Sometimes no algorithm can do a perfect job.

To sum it up TexturePacker is the best tool there is for spritesheets creation. It has options that will crearly make your life easier, it informs you of the RAM consumption when you have a spritesheet ready, and it keeps your spritesheets organized in a .tps file where you can edit them. Some options like manual sorting would make it even better, but even as it is its surely worth its money.