Let’s make a Great GIF – Part 2

Hey guys,

Hear, hear, all musicians and sound designers, People of Aionos is looking for you! Before I go into detail about the second part of the GIF making tutorials, I just want to let you know that I’ll be posting next week a job description for a paid contract I’m looking to assign. Details have been more than vague so far, but with game development progressing nicely, it’s time to get some music to go with those beautiful graphics and awesome gameplay. Stay tuned !

In my previous tutorial, I presented 2 different techniques to make a pixel perfect GIF of any single character’s animation. But what if you want a GIF of your game in action? Again, I’ll give you 2 different options : the first one, simple but with some small flaws and the second one that works perfectly but requires a little bit more work.

---

GIF-Animated scenes

Good Results : GifCam

The simplest solution is to use GifCam, a free screen capture software with frame editing abilities. Instead of capturing individual frames, we will be recording a viewport of the screen as we play our game.

• Start your game.
• Place GifCam on the part of the screen you want recorded.
• Make sure that the FPS settings is 33 FPS (You can try to manually add other FPS values, but I have found that the results are always disappointing.)
• Click Rec and record your game in action.
• Now one of the flaws of GifCam is the lack of hotkeys to Start and End the recording. This means that you might have to remove some frames at the beginning and the end of your recording. (Ex : If your camera follows the pointer)
  • First Frame : Click on Edit, go to the First Frame, right click and choose ‘Delete From This Frame To Start’.
  • Last Frame : Stay in the Edit Screem, go to the Last Frame, right click and choose ‘Delete From This Frame To End’.
• Just click save and you’re done!

Now, I feel this option can give out good, but not great results because I found that image quality is not always as great as it could be. You can see light layering in the GIF below and the cursor speed isn’t 100% of what it should be.

Remember that these GIFs are to be used to share your game in action, they should be the best possible quality.

Great Results : Fraps + VirtualDub + Gimp

For this solution, I had to get help online from the good people at Reddit, especially this post where they give multiple solutions to your GIF making activities. I will share with you the solution that worked best for me and add my own 2 cents on top of it.

First, you have to screen-capture and for that, we use Fraps. Fraps is a simple realtime Video Capture Software that will record both video and audio at the touch of a key. The full version is 37$, but there’s a free version of FRAPS that comes with a watermark, which won’t show in the GIF, and a 30 seconds recording limit, which is more than enough for most GIFs.

So to record your GIF with FRAPS :

• Open Fraps.
• Focus your game.
• If you are using Pixel Art, like I am, be sure to check ‘Force lossless RGB capture’.
• Press F9 to start the recording.
• Press F9 again to stop it.

Next, we want to crop and trim our video and that is where VirtualDub comes in. VirtualDub is a free and open-source video processing software for Windows.

• Open VirtualDub.
• Import your newly recorded video.
• Crop your video
• Trim your video
• Here in the Reddit post, they will tell you to export as an animated GIF directly from VirtualDub and most of the time it would be great. For People of Aionos, I found that this technique had a problem when it came to the lighting. You can see in the image below that the light has some sort of layered effect that is unwanted and not representative of the real visuals of People of Aionos.
  

  Clear Light layering.

• Instead, do not export as a GIF from VirtualDub, but export as an Image Sequence. This will make sure that all of your frames are at the best possible resolution.
• And we are done with VirtualDub!

The last steps are done with a photo editor. Photoshop works great here, but it isn’t free. Luckily, you can easily do the same thing with GIMP, which is a free and open-source image editing software.

• Open GIMP.
• Open the first image in your sequence of images.
• Click File, choose Open As Layers and select the rest of your images.
• Go to Image -> Mode -> Indexed…
• Set the Dithering to Positioned, check ‘Enable dithering of transparency‘ and click Convert.
• Go to Filters -> Animations -> Optimize (For Gif), which will reduce the size of the file and open a new window.
• Go to File -> Export As and name your GIF.
• Un-check the GIF comment option and check ‘As animation‘.
• Set the delay to the frame rate you need (for 30 FPS, it’s 33 milliseconds).
• Check ‘Use delay entered above for all frames‘.
• Click Export!

 

Here are a few things to remember :

• Be mindful of the size of the game screen you use, as this will directly impact the file size of your GIF. It might not seem important with disk space and bandwidth being so cheap these days, but know that Twitter has a 5 MB limit on all images. If you thought about this too late and don’t want to start over, you can always resize it with VirtualDub.
• If you do not have the same lighting problem as I do, you can just export directly from VirtualDub as an Animated GIF or use GifCam.
• There are many online services that will help you make a GIF, but I’m more oriented towards traditional software. Having tried absolutely none of them, I wish you good luck in your explorations. Drop me a line if you stumble upon a better way to make these animated GIFs!

I hope this helps someone make some great looking GIFs for their games. Next time we will definitely talk about Pixel Perfectness and multiple resolution.

Cheers!