Creating spritesheets with TexturePacker

An enemy spritesheet from the game Invaders from the Strange Space

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.

TexturePacker GUI with the button from the quiz Jason & Heracles

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

What I would like better

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.

Posted on 5 February, 2012, in Graphics and tagged , , . Bookmark the permalink. 3 Comments.

  1. Hi,

    thanks for the post!

    About your what would be better option to stack identical images is called “auto alias” – you can disable it if you won’t want that function.

    Manual organization will be available with TexturePacker 3.x.x …

    Cheers
    Andreas

    • I would be very interested in hearing more about the manual re-ordering.

      I’m using TexturePacker to generate simple spritesheet which will feed into a tilemap (Tiled). As its a simple spritesheet, the issue is if I was to add another image with for example, name sort on… the tileset will be rearranged and will mess up the Tilemap as Tiled does not support complex spritesheets..

      When do you hope to have the Manual reorganization feature done? What are the best practices to avoid this in the meantime?

      Thanks!

    • @Anonymous 12:36
      You can try renaming your files with the order you want to. It’s a nice trick if you have only few files.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: