Assembling Sprite Sheets with ImageMagick

When making a 2D game one usually must assemble several images (sprites) into a single big texture (sprite sheet). On the game the sprite sheet will be loaded and the different sprites will be shown accordingly to game events or the game internal time (animations).

Imagine that your awesome artist (<3) gives you these images that form the walking animation of a character from your game. For example, this one


and this one


and this one


etc. The result is an animation of the character walking downwards:

WalkDown Animation

In the game you will load a unique image that conforms all the steps of the previous animation. Manually assembling that image is a really boring and (thus) error-prone task, but luckily we can avoid it using a shell script and ImageMagick.

As its web claims, ImageMagick is:

a software suite to create, edit, compose, or convert bitmap images.

We are specially interested in the compose capabilities which will allow us seamlessly assembling these sprite sheets. This operation is performed with the montage command line. Joining this powerful tool with the a shell script interpreter like bash is something that will save you hours of repetitive work.

For instance, imagine you have eight 128×128-pixel steps for the walking animation named “pj-waling-i.png” where “i” is the step number (1, 2, 3, …) and you want to assemble them into the 512×125 texture named “pj-walking.png”. To perform this task you could use the command line sentence:

montage pj-walking-[1-8].png -tile 4x4 -geometry 128x128+0+0 -background transparent pj-walking.png

Notice that the “[1-8]” selector ensures that all the steps are assembled. But what if the name for the steps are “pj-walking-first.png”, “pj-walking-second.png”, “pj-walking-third.png”, etc.? No problem! Bash allows us selecting images in a more complex way. The previous example can be modified to take care of this new situation:

montage pj-walking-{first,second,third,fourth,fifth,sixth,seventh,eighth}.png -tile 4x2 -geometry 128x128+0+0 -background transparent pj-walking.png

The options of the command mean the following:

  • -tile reflects the organization of steps. 4×2 means that it has 4 columns and 2 rows, 8×1 would mean 8 columns and 1 row, etc.
  • -geometry gives the size and position of each step. 128×128 means that the images are 128 pixels wide and 128 pixels tall. +0+0 means that the origin of the image is in the top-left of the image.
  • -background provides the color (or lack of it) for the background of the final image. In our case we use the keyword transparent to make use of the transparency of the animation.

The result is the following 512×256 pixel texture:


And the final script is this one:


# player walking
montage pj-walking-[1-8].png -tile 4x2 -geometry 128x128+0+0 -background transparent pj-walking.png

As a final note, notice that a similar montage command can be used to assemble different animation sprite sheet, like the one presented in the above figure, into a single super sprite sheet like the ones found on the Internet.


View all posts by

2 thoughts on “Assembling Sprite Sheets with ImageMagick

Leave a Reply

Your email address will not be published. Required fields are marked *