ImageMagick For Sprite Sheets

ImageMagick is a command line program for editing images. I find it is useful for cropping and scaling images in bulk, for example if I am making a website gallery and I want to shrink or crop all the images to thumbnail size. It can also create animated gifs and assemble sprite sheets.
These commands were tested on Mac.

Resources

The ImageMagick website
An official intro
The official docs. These are detailed but also obsolete, misspelled and verbose.


Here is an example sprite sheet. It has no margins or padding between the sprites and all the sprites are the same size
a
ImageMagick can chop up the sprite sheet into regularly sized sprites. This is called tile cropping
convert bobs.gif -crop 32x32 +repage d%03d.gif

Results
a a a a a


To crop horizontal strips from a sprite sheet, set the crop width to 0
convert bobs.gif -crop 0x32 +repage b%02d.gif
a
For vertical strips just swap the dimensions.

Tile cropping produces several images and IM can automatically number the file names. This is done with %02d which means two digit numbers padded with zeroes, starting at 00. This syntax is borrowed from C. What if we want it to start at 01? Use null: in the list of input arguments
convert null: b00.gif -crop 32x0 +repage f%02d.gif
a a a
^ f01.gif ^ f02.gif


An example row of sprites
a

I can crop the sprites if I know their dimensions. In this case 32 pixels wide
convert dude-cropped.png -crop 32x0 +repage d%02d.png
a


Example image
a

Crop 10 pixels from the top
convert in.gif -crop +0+10 +repage ftop.gif
a
Crop 10 pixels from the right
convert in.gif -crop -10+0 +repage fright.gif
a

Crop can also extract an area of the image if you include an offset
convert in.gif -crop 50x10+10+20 +repage out.gif
a

By the way, +repage readjusts the canvas to match the final image size after cropping. Without it, the original canvas remains with transparent background
convert in.gif -crop 50x10+10+20 out.gif
a


Example images
a , a, a

Append the images in a row
magick tvfuzz1.gif tvfuzz2.gif tvtest.gif +append tv1.gif
a

Append the images in a stack
magick tvfuzz1.gif tvfuzz2.gif tvtest.gif -append tv2.gif
a

If the filenames follow a consistent number pattern then a Bash range can select several files
magick d%03d.gif[9-11] +append tv1.gif


To generate an animated gif, use several input images and one output image. A Bash range can help
magick d00%d.gif[0-7] bl.gif
a


Built in images:
xc: - Block colour. State the size
logo: - 640x480 ImageMagick Logo
wizard: - 480x640 ImageMagick mascot
rose: - 70x46 rose
null: - 1x1 transparent pixel

Generate a builtin image
magick rose: rose.gif
a

Generate a black box
convert -size 100x100 xc:black black.gif
a


Convert a png to gif
convert dude.png +repage dude.gif

Convert all files in the current folder
convert * +repage %03d.gif


Scale with -scale. Use a whole fraction to avoid blur.
Blow up double size
convert in.gif -scale 200% out.gif
Shrink half size
convert in.gif -scale 50% out.gif


To add a 1px white border to the left side (spritesheets)
convert null: v01.png +append a3.png


Rotate
convert in.jpg -rotate 90 out.jpg
convert in.jpg -rotate -90 out.jpg


The origin (0,0) is in the upper-left corner.
Dimensions and offset take this syntax: (w)x(h)(+right)(+down).
The “-negate” option negatively colours an area.

Negate an area, topL corner, 10px to the right, 20px down
magick rose: -region '100x200+10+20' -negate rNeg1.gif
a

Area spills off the left edge
magick rose: -region '100x200-10+20' -negate rNeg2.gif
a

Set the origin (0,0) to the centre. Negate an area below and left of the origin
magick rose: -gravity center -region '100x200-10+20' -negate rNeg3.gif
a

Negate an area centre
magick rose: -gravity center -region '100x200' -negate rNeg4.gif
a


Tips:
Convert a PNG to GIF before cropping to see the whitespace that PNGs hide.
Pad the output to 3 digits with %03d, up to 999. Pad more if more than 10 by 10 tiles in a sheet.
Remember Bash tricks when selecting input images, globs, wildcards, ranges, expansions.