How to create a sprite sheet

Andreas Loew
Last updated:
How to create a sprite sheet

What is a sprite sheet?

Sprite sheets already exist since the first days of computer games. The idea is to use one big image that contains all animations of a character or items in a level instead of dealing with many single files.

This not only speeds up the loading of the sprites but also allows performance optimizations - e.g. by using the graphics card for rendering the game scene instead of leaving it all to the CPU.

Simple sprite sheets

Sprite strips and animation strips

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
A Sprite or Animation Strip containing the frames of a character animation.

It might also contain multiple rows if the animation is longer.

Tile sets, tile maps

A tile set is essentially a type of 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.
A Tile Set / Tile Map is used to create levels. All tiles have the same size. Bigger structures can be built by combining multiple tiles.

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. Also, sprites are usually fixed in their position since the game engine relies on the tile position for referencing them.

Creating a simple sprite sheet

With CodeAndWeb's TexturePacker tool you can create sprite sheets with a few clicks. You can download it here — it's available for Windows, macOS and Linux:

Download TexturePacker 7.9.1
for Windows
Also available for macOS and Linux

Creating a sprite sheet requires nothing more than dragging your sprites onto TexturePacker. This video shows you the whole process - it takes about 30s:

TexturePacker Quick Tutorial: How to create a sprite strip
  • 1
    Set the Algorithm to Grid / Strip if your sprites all have the same size. Basic is also fine if you have sprites in different sizes.
  • 2
    Drag & drop your sprites onto TexturePacker's center view. You can also drop a whole folder with all your sprites.
  • 3
    Press Publish Sprite Sheet. Enter the file name for the sprite sheet file and press Ok

TexturePacker takes all image files in the folder and packs the sheet for you. It supports a big range of image formats including PNG, JPG, TGA, PhotoShop's PSD files and many more.

Optimized sprite sheets

The basic sprite sheets shown above use a fixed sprite size, offering limited flexibility.

However, most games include a variety of graphical elements — characters, objects, and animations of different sizes. Combining all of them in a single sheet requires telling the game engine where each sprite is located and what its dimensions are.

This is typically done using a metadata file that accompanies the sprite sheet. It lists each sprite's name, position, and size within the sheet.

To reduce memory usage, many game engines also support optimized sprite sheets. The simplest method trims away unnecessary transparency by cropping sprites to their bounding rectangles. The even more efficient way is to use polygon outlines to cut the sprites.

Sprite with full transparency
Sprite with full transparency
Removing obsolete transparency around sprites using a rectangle
Trimming a sprite using its bounding rect
Removing obsolete transparency around sprites using a polygon
Trimming a sprite using a polygon

The metadata file contains the details so you can use the sprites exactly in the same way as if they were not trimmed.

With this data file it's much easier to tell the game engine that you want to draw an Apple sprite — instead of paint the sprite at position (280,124).

This is an example of an optimized sprite sheet, and its data file might look like:

An optimized sprite sheet 
{
    "Apple": {
        "frame": {"x":280,"y":124,"w":60,"h":61},
        "rotated": 0,
        "size": {"w":90,"h":90},
        "offset": {"x":23,"y":29},
        "pivot": {"x":0.5,"y":0.5}
    },
    ...
}

Creating an optimized sprite sheet

The easiest way to create optimized sprite sheets is using TexturePacker. TexturePacker is a tool that specializes in creating sprite sheets.

Download TexturePacker from here:

Download TexturePacker 7.9.1
for Windows
Also available for macOS and Linux

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.

TexturePacker Quick Tutorial
  • 1
    Click the Data Format button and select the game engine you want to use. TexturePacker supports 30+ engines and can be extended to support your own. Use Sprite Sheet Only to create a sprite sheet without using a game engine.
  • 2
    Drag & drop your sprites onto TexturePacker's center view. You can also drop a whole folder with all your sprites.
  • 3
    Press Publish Sprite Sheet. Enter the file name for the sprite sheet file and press Ok

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.