Make an Animated Gif For Your Game with Quicktime and FFmpeg

I recently started posting screenshots of stuff I'm working on for #screenshotsaturday. I saw some other devs posting animated gifs of their games and thought it looked really cool and wanted to see if there was a quick and easy way I could make animated gifs without having to spend a lot of money on additional software.

I do my development on a Mac so I use Quicktime for the screen capture software, and ffmpeg and ImageMagick to create the animated gifs.

Screencapture w/ Quicktime

This part's pretty easy you just open up quicktime and click File -> New Screen Recording. You then click the record button on the quicktime player and a message pops up saying:

I just drag around my game window and start playing. When you're done click the stop button, and name you're .mov file.

Convert .mov to an animated GIF

Here I'll go through some different options for creating gifs.

First you could just do a straight conversion:

ffmpeg -i -pix_fmt rgb24 output.gif

This will convert the .mov file in it's original resolution and frame rate so it will end up being really large. For example my original .mov file was 5.9MB, using this line created an animated gif of 17.5MB. So typically this isn't going to be something you'll want to use.

There's a few things you can do to reduce the size:

  • Get the best part of your movie by specifying the start and stop times
  • Reduce the scale so you're using smaller images
  • Reduce the framerate to cutdown on the amount of images used.

Example 1 In this example I'm grabbing the first 10 seconds and changing the scale to 320x240 pixels, I'm also changing the framerate to 10fps.

ffmpeg -ss 00:00:00.000 -i -pix_fmt rgb24 -r 10 -vf scale=320:-1 -t 00:00:10.000 output.gif

Example2 You could also export the movies frames individually. As an aside, I also changed 320x240 to 320:-1 which sets the width to 320 pixels and then scales the height automatically.

mkdir frames
ffmpeg -ss 00:00:00.000 -i -vf scale=320:-1 -r 10 -t 00:00:10.000 frames/ffout%03d.png

Then use convert from ImageMagick to make your animated GIF:

convert -delay 10 -loop 0 frames/ffout*.png output.gif

convert typically provides a better looking output and allows you an easier way to control the delay between frames.

Example3 These other methods were more or less to build to this example so you would have an idea of what's happening underneath. The following command will pipe the data from ffmpeg to ImageMagick's convert without the use of intermediate files.

ffmpeg -ss 00:00:00.000 -i -vf scale=320:-1 -r 10 -t 00:00:10.000 -f image2pipe -vcodec ppm - | convert -delay 10 -loop 0 - output.gif

Or if you wanted to further optimize the result without saving a file, you can pipe the output from convert to a second convert command:

ffmpeg -i -vf scale=320:-1 -r 10 -f image2pipe -vcodec ppm - | convert -delay 5 -loop 0 - gif:- | convert -layers Optimize - output.gif

So that's basically how I do it. If you have any tips or suggestions I'd love to hear them. How do you do animated gif?