Compile a bunch of pixel art frames into an animated gif.

Makefile

frames=$(shell ls -tr bouncing-ball/*.png)

bouncing-ball.gif: $(frames)
	convert -delay 12 -loop 0 -dispose previous -resize 256x -filter Point $(frames) $@

Overview

I used Pixelorama to create the frame and test the animation, but the GIF output had some odd artifacts between frames dues to blending or something. I couldn't figure it out in the settings in the application, so we whipped out ImageMagick to do the work.

Makefile Notes

• shell ls -tr reverse time modified list of files. Pixelroma always saves in frame order, so we don't need to worry about file numbering messing us up.

Image Magick Notes

• -delay 12 can be changed to whatever to speed up (decrease the delay) or slow down (increase delay) the animation.
• -loop 0 loop forever like a good GIF should.
• -dispose previous is important to remove ghosting of the previous frame during the animation. It might be cool to omit this option if we want to see the frames drawn on top of each other.
• -resize 256x scale up the image so it looks nicely pixelated.
• -filter Point keeps the edges of pixels nice and sharp by disabling any kind of blending during resize.

Source Images

Final Image

Reference

• https://orama-interactive.itch.io/pixelorama
• https://imagemagick.org/script/command-line-options.php