ImageMagick Sprite Assembly Tutorial

If you followed my tutorial on rendering LDraw models in POV-Ray, you will have ended up with maybe a directory full of individual images of your model—each taken from a different viewpoint. You will need to assemble these individual images into a single, composite image for use in GearHead. This tutorial describes how to do this using the program, ImageMagick and, optionally, GearHead Sprite Tools.

Using GearHead Sprite Tools

GearHead Appender
Screenshot of GH Appender.
  1. This software works in Windows, only. It requires that ImageMagick also be installed.
  2. Type the path to the folder storing your images into the address bar. The files contained therein will be listed in the pane below it.
  3. Select one of the frames of the animation in the file list (it can be any one).
  4. Type the total number of frames in the animation in the Animation Frames field.
  5. Select the size of the sprite cell (64x64px for characters and mecha, 64x96px for walls and terrain).
  6. Select a mode: the first one is for images without an alpha channel, preferably already having a blue background. The latter two are for images with an alpha channel. The last one is convenient for later addition of the black border in The Gimp.
  7. Select whether you wish to work only on the selected sequence of frames, or on all files in the current directory.

Using the command-line

Step one: Crop the images to the correct size

An example of
POV-Ray output.
An example of a
cropped image.

The first thing you need to do is crop the rendered images so they are of the correct dimensions before assembling them. You do this using ImageMagick. You can create a batch file to run ImageMagick, or run it from the command-line. In either case the syntax is the same. (Make sure the input images are 64x128 pixels, with the model centered in the lower half of the image. By default, "GearHead.ini" renders images automatically to the correct size. Also, make sure you don't name your batch file the same as one of ImageMagick's commands. Name it something unique, like "SpringPurple.bat".)

Here's an example command-line:

convert btr_vadel1.png -crop 64x64+0+64 +repage btr_vadel_crop1.png

Do this for each image. E.g.:

convert btr_vadel1.png -crop 64x64+0+64 +repage btr_vadel_crop1.png
convert btr_vadel2.png -crop 64x64+0+64 +repage btr_vadel_crop2.png
...
convert btr_vadel8.png -crop 64x64+0+64 +repage btr_vadel_crop8.png

The crop command tells ImageMagick the dimensions and offset of the cropped portion of the original image. In this case, 64x64 pixels are the dimensions of the cropped region, and +0+64 (0 pixels from the left, and 64 pixels from the top) is the offset from the top-left corner of the image. The repage command tells the program to change the viewport and canvas size of the new image to be relative to the cropped region. Otherwise, there would be empty space around the cropped region corresponding to areas of the original image which were removed.

Step two: Append the images into a composite sprite

montage -background transparent -geometry 64x64 btr_vadel_crop?.png btr_vadel.png
The output image after assembly in
ImageMagick (with alpha channel retained).

The particular tool we want to use is called the montage tool. Notice that the command to run the montage tool is followed by several arguments preceded by a hyphen (-). The first argument specifies the background color of the output image. If you've set up POV-Ray to render images with an alpha channel and plan on doing dithering (see the dithering tutorial), then set this to "transparent" (without quotes). If you plan on adding a black border around the objects (see step four), set this to "black". Otherwise, set this to "blue".

The value for the second argument, geometry, should match the size of the input images—e.g., 64x64 for mecha and characters, and 64x96 for walls and terrain.

The last two arguments specify the source of the input and output files. ImageMagick has the ability to accept wildcards within file paths. In the example above, the input file path ends with a question mark (?). This means that ImageMagic will compose all images—beginning with "btr_vadel", and followed by any additional character—into the final output image. In the above example, the images "btr_vadel1.png" through "btr_vadel8.png" would all end up as part of the composite image.

Step three: Fix the background and flatten the image

The image now has a blue background.

If your image has an alpha channel and uses anti-aliasing, follow my dithering tutorial to simulate alpha transparency. Otherwise, just make sure the alpha channel is removed and the background behind your model is pure blue (RGB = 0,0,1). You can do this using the following command (if you haven't already done so in one of the other steps):

convert btr_vadel.png -background blue -flatten btr_vadel.png

If you plan on creating a black border around the objects (see the next step), changes this to "black" instead of "blue". E.g.:

convert btr_vadel.png -background black -flatten btr_vadel.png

Step four: The black border

The final image, with a black border.

Interactive and "live" objects have a one pixel wide black border around them. Unfortunately, this can't be done in ImageMagick (as far as I know, which isn't much). You'll need to use another image editor in order to do this, such as Photoshop or GIMP. Basically, what you do is create a selection around the objects, expand the selection by one pixel, invert the selection, and turn everything in the new selection to a blue color.

You're done!

Now copy the finished sprite to your "GearHead/Image" directory and edit the proper design file in order to use this image.


This page © Copyright 2009 Michael Horvath. Last modified: December 17 2016 12:32:25.
Vector clipart by other authors. "Applevista" breadcrumbs by mtekk.
>>>sitemap<<<