How to create a sprite sheet

Andreas Loew

What is a sprite sheet?

Sprite sheets already exist since the first days of computer games.

The idea is to create one big image that contains all animations of a character instead of dealing with many single files.

They got less important for some time after more and more 3d games showed up - but got their big comeback with mobile devices and 2d games.

Sprite strips & Tilesets

An animation strip is the simplest form of a sprite sheet: It's just placing each animation frame next to each other. All frames have the same size, and the animation is aligned in each frame.

A simple sprite strip or animation strip for a game character

It might also contain multiple lines if the animation is longer - or if several different animations are combined. A tileset is not different from a sprite sheet: It contains building blocks for game levels. This is an example for a tile map:

A tile map for a jump and run game.

It's easy for a game to retrieve the sprites since they all have the same width and height. The disadvantage is that the sprites waste a lot of memory because of all the additional transparency.

Optimized sprite sheets

The developers of game engines are aware of the wasted memory in the simple sprite sheets and started to optimize the space.

The easiest way is to remove the transparency surrounding the sprite and shrink it to the bounding box:

An even better solution is only to use the polygon containing the sprite:

This allows creating sprite sheets that are way more compact and waste less memory. They also shrink the download size for the game:

The game engine now needs additional information to draw the sprite: It needs to know where the sprite is located and how much transparency was removed.

This is an example of for an optimized sprite sheet and it's data file might look like:

An optimized sprite sheet
"Apple.png": {
    "frame": {"x":292,"y":304,"w":60,"h":61},
    "rotated": false,
    "trimmed": true,
    "spriteSourceSize": {"x":23,"y":29,"w":60,"h":61},
    "sourceSize": {"w":90,"h":90},
    "pivot": {"x":0.5,"y":0.5}
},
"Banana.png": {
    "frame": {"x":299,"y":192,"w":99,"h":113},
    "rotated": false,
    "trimmed": true,
    "spriteSourceSize": {"x":14,"y":15,"w":99,"h":113},
    "sourceSize": {"w":128,"h":128},
    "pivot": {"x":0.5,"y":0.5}
},
...
            

Creating a sprite sheet

The easiest way to create optimized sprite sheets is using TexturePacker. TexturePacker is a tool that specializes in creating sprite sheets. The free version allows you to create sprite strips and tile maps.

Download TexturePacker from here — it's available for Windows, MacOS and Linux:



How to create a sprite strip

Creating a sprite sheet requires nothing more than dragging your sprites onto TexturePacker:

Creating a sprite sheet with TexturePacker

TexturePacker takes all image files in the folder and packs the sheet for you. It supports a big range of image formats including PhotoShop's psd files and even Flash movies (.swf).

When you are using the free version, you'll have to change 3 options from the default values. This is no restriction because you need them set to create a sprite strip:

Press the Publish button - and you are done.

How to create an optimized sprite sheet

Sprite strips are a good start — but also a waste of memory in many cases. If you plan to create a game, you should optimize the sprite sheet.

The first thing is to select the game engine you plan to use. TexturePacker supports 30+ engines and can be extended to support any new one.

Click the Data Format button in the settings. Select the engine you plan to use from the dropdown:

Choosing a game engine for your sprite sheet

TexturePacker automatically applies optimized default settings for the game engine. It also writes a data file with the required sprite information when you press Publish.

Visit our tutorial section for detailed instructions how to use the sprite sheets for games.

Did you like the tutorial? Please share!