Rather than actually work on my game today, I dove down the deep hole of figuring out how to easily make a GIF cover image that consists of multiple merged still images and GIFs.

Previously I had used convert and ffmpeg to generate GIFs from a file of pngs or an edited MP4. While both of these approaches work, neither was convenient. The ffmpeg pipeline was easy to set up but difficult to tune. Either the GIFs looked like **** or they were way too big (itch has a 3mb limit). Using convert required individual files full of pngs, which were a pain to work with.

Enter Gifsicle and peek.

peek is an incredibly user friendly screen recorder, perfect for recording a window on your screen. It is really easy to set the dimensions you are recording, to ensure that your recordings are all the same size so they can be stitched together nicely.

gifsicle is a simple command line utility, that lets you trim your gifs and concatenate them trivially.

To list the contents of your GIF you can run

gifsicile --info your.gif

The output of this command will let you know the time between each frame and the total number of frames in your GIF.

You can use some quick mental math to figure out where you want to cut your gif from and too.You can use the following call to make that cut, where XXXX is the frame you want to start from and YYYY is the frame you want to end.

gifsicle your.gif '#XXXX-YYYY' > cut.gif

Once you’ve cut your gifs down to size you can string them together using --merge

gifsicle --colors 256 -m cut1.gif cut2.gif > CoverImage.gif

Note, it seems like gifsicle only works with gifs (no pngs), so if you will need to convert your images before stringing them together. I do most of my art in aseprite, so its trivial to export them as a GIF. If you’re toolchain doesn’t handle GIF exports, you can always just use peek to “record” a second or so of the image statically.

I’d recommend prepending a very short title card, as this is what will show up statically when the gif is not playing, and append a longer title card, that is on the screen long enough to read. Working in aseprite I export a 30ms short title card and a 1000-2000ms long title card.

gifsicle --colors 256 -m shortTitle.gif cut1.gif cut2.gif longTitle.gif > CoverImage.gif