Scoundrel Studio
  • About
  • Media
  • People of Aionos
    • Victoire, Inirion Police Sergeant

Let’s make a Great GIF – Part 2

Posted on May 20, 2016 by ScoundrelCidAdmin

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

CMU-3

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.)GifCam Set FPS
  • 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’.GifCam Delete Frame From Start
  • 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.

Slight light layering and inaccurate animation speed.

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 videoCrop Video VirtualDub
  • Trim your videoTrim Video VirtualDub
  • 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!

And there we have it! A great looking GIF!

 

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.Resize Video 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!

Posted in Animation, GIF, Screenshot | Tags: GIF, Screenshot, Tips |
« Let’s make a Great GIF – Part 1

Leave a comment Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • Let’s make a Great GIF – Part 2
  • Let’s make a Great GIF – Part 1
  • Title Screen and more AI
  • AI : Perception
  • Back with more People of Aionos

Recent Comments

  • Title Screen and more AI - Scoundrel Studio on People of Aionos
  • AI : Perception - Scoundrel Studio on People of Aionos
  • Back with more People of Aionos - Scoundrel Studio on Victoire, Inirion Police Sergeant

Archives

  • May 2016
  • March 2016
  • June 2015
  • May 2015

Categories

  • AI
  • Animation
  • Apex
  • GIF
  • People of Aionos
  • RAIN
  • Screenshot
  • Uncategorized
  • Unity
  • Website

Meta

  • Log in
  • Entries RSS
  • Comments RSS
  • WordPress.org

Pages

  • About
  • Media
  • People of Aionos
    • Victoire, Inirion Police Sergeant

Archives

  • May 2016
  • March 2016
  • June 2015
  • May 2015

Categories

  • AI (2)
  • Apex (1)
  • People of Aionos (3)
  • RAIN (2)
  • Screenshot (2)
    • Animation (2)
    • GIF (2)
  • Uncategorized (1)
  • Unity (1)
  • Website (2)

WordPress

  • Log in
  • WordPress

CyberChimps WordPress Themes

© Scoundrel Studio