Building spritesheets with ImageMagick
The easiest way I have found to build spritesheets from a series of images is with the use of Image Magick (http://www.imagemagick.org). It is a software suite which can be used to manipulate images and is called from the command line. That makes it very easy to automate spritesheet creation.I wrote a small bash script that takes a list of png images, in my case exported from AfterEffect, and stitch all the images we need to build our sprite. The original images have to be 32bits, so with an alpha channel.
The bash will have ImageMagick to export all necessary spritesheets, even one with only the alpha extracted from the images. Here is what will be exported:
- A 32bit png spritesheet, complete with transparency.
- A 24bit jpg spritesheet, without any transparency (obviously).
- A 24bit png spritesheet, without any transparency. This can be used to be optimised as a jpg in your favorite image optimizer, if the above jpg is not to your satisfaction.
- A 32bit png spritesheet, containing only transparency. The first 3 channels (r, g and b) will be empty. This spritesheet is to be used as the alpha with $.maskedSprite.
You might be surprised when you look at the 24 bit images extracted. The extraction is the exact image channels (rgb) of the original image, but without any transparency. You will see that these images are not the same as if you exported the images as 24bits from AfterEffect, with a matte.
The reason is that when you export the images with a matte in AfterEffect, the transparency is processed and simulated over the matte. This is not what we want. If for example the matte was white, any dark color that is semi-transparent would be shown as a pale color in the exported image. When we would apply transparency to this image, the matte would show. It would be like processing transparency twice, so that the original color would be half as opaque as intended, the other half of opacity showing the matte (if that makes any sense).
The difference can clearly be seen in the following figure.
|Effect of matte when applying transparency on an image|
|24 bit image, no transparency||with transparency applied over white bg|
As you can see, the result is not the same depending on the matte. When we apply the alpha to the image with a white matte, we lose the shadow of the turbine. If we use the black matte, we see the shadow all right, but there is a black halo around the turbine. The only correct image is when we use no matte at all. It's the one that will be extracted by ImageMagick.
The stitching utility of ImageMagick, called montage, normally calculate the grid dimension of the resulting spritesheets from the number of image that are to be stitched. I have found from some tests that the resulting size is not always optimal. For that reason, my script attempts to find an optimal grid dimension for ImageMagick to use. I still chose to output spritesheets using IM's calculated dimensions as well as mine, so you will see two instances of each spritesheet (in separate folders) when you run the script. Just choose the one that has the overall lowest filesize.
First install ImageMagick. On my Ubuntu machine, I installed it with apt-get, but you can find more information on installation at imagemagick.org/
$ sudo apt-get install imagemagick libmagickcore-dev
When ImageMagick is installed, save my script as spriter.sh on your computer, and make a symbolic link to it (if you want) like so:
$ sudo ln -s ~/wherever/you/put/it/spriter.sh /usr/sbin/spriter
Then navigate to the folder where your image sequence is and type spriter in the terminal. There are 2 optionnal arguments. First is jpg quality (default is 70), the second is the basename of the output file (default is "sprite")
$ spriter 80 turbineVoilà, you now have spritesheets ready to use with the jQuery plugin.
Further reading and resources
- ImageMagick : http://www.imagemagick.org