Recording Smooth Game GIFs

This is just my way of doing things - give a go and see if you like it! This method uses a recorder which saves your rendered game to video and then a GIF convert to save the GIF. I find that using a standard GIF screen recorder provides more juddery results (I don't have the fastest PC) and is a pain to keep lined up with your game window.

Follow me on Twitter @pixelnicks for more gamedev goodies, or just let me know what you think :)



30FPS, 8.3MB

Set Yourself Up

We'll be using two pieces of open source software. Get downloading!

OBS First Time Setup

This is the only time consuming part of the guide - getting Open Broadcast Software set up correctly. OBS's most common use is for streaming to Twitch. We'll be using it to record an mp4 file to the hard drive. If you already use OBS, unfortunately we'll be messing up some of your settings. Sorry!

Click File, Settings.

Click the Output tab. Set the Recording Quality to Indistinguishable Quality and Format to mp4.

Click the Video tab. Here you want to set the two resolution boxes to your game's resolution. If you're making a pixel art game, it should be the native 1:1 resolution. If it's a high res game, set the Output (Scaled) Resolution to a lower value (eg 480x270), no one needs a high-res GIF. Set the Frames Per Second to 60.

Click the Hotkeys tab. Set a hotkey for Start Recording and Stop Recording. I like to use CTRL+R for both.

Click OK to save the settings.

Recording the Video

Run your game executable. In OBS, under the Sources title, add a Game Capture source. Double click Game Capture and set Window to your game name. Click OK and you should see your game fill the central preview space.

Play your game and hit your Start Recording hotkey to record some video and your Stop Recording hotkey to end it. Your video files will be saved in your Windows Videos folder.

Converting to GIF

Open ScreenToGif and head straight into the Editor mode. Drag and drop your video from the Windows Videos folder into the ScreenToGif editor. Use the start and end pointers to trim your video down. Remember that the first frame will be the preview of your GIF on Twitter. Keep it short.

Set the Frame Rate to 30. Yep, video is 60FPS, but this helps with judderyness.

If you're feeling wild, you could import at 60FPS, but the final file size may be too big for Twitter.

Hit the OK button and wait for your video to convert. Don't be worried if the GIF plays too slowly when you press play, the final file will be full speed.

If you're happy, hit Save As. In the sidebar, ensure GIF and Legacy are selected. Open Gif options and set the Quality slider to 1. Fill out a file name and hit Save!

That's it! When the encode has finished, you'll see the file size. If it's over 15MB, then unfortunately it's too big for Twitter. You can either decrease the resolution or decrease the number of frames.

Better Quality?

Go through each frame in ScreenToGif and delete any duplicate frames which may have snuck in there. For me, these sometimes occur in the first few frames.

Import at 60 frames per second instead of 30. You'll increase the file size but gain a buttery smooth GIF.

I recommend grabbing a copy of FRAPS and using Force lossless RGB capture mode for an even higher quality result. This will keep pixel art intact.



60FPS, 4.2MB