Let’s make a Great GIF – Part 1

Hi guys,

A little bit of news… While I’m working on my posts about pixel perfection, I thought I’d share some things I learned last week on how to make a good GIF of your game with some free tools. Also, I would like share the latest GIF from People of Aionos where we see Victoire fighting two cartel enforcers.

A great GIF of your game can easily display your game in action without the need to make a video and it’s easy to share on social medias.

In the first part, I will detail 2 techniques to make a pixel perfect GIF of a single character’s animation.

---

Pixel Art Character GIF Animation

In order to create a pixel perfect animation of your characters, you need to control the time of each frame perfectly. To achieve this, we will make use of 2 free softwares: GifCam and GIMP.

GifCam

GifCam is a free screen capture software with frame editing abilities, that always stay on top of all other windows, so you can easily move it and resize it to the desired area even inside a game editor like Unity or GameMaker. GifCam allows you to take individual frames and control the time delay for each one.

• Load each individual frames into either GIMP, Photoshop, Paint or simply Windows Photo Viewer.
• For GIMP and Photoshop, add a bottom layer for a background of your choice (in our case, a simple white background).
• Make sure that only your first frame is showing.
• Center GifCam on top of your image and click on the ‘Frame’ button to record a single frame.
• Do this for every frame in your animation without moving GifCam.
• Click on Edit and adjust each individual frames delay value to the time of your animation. This is done by clicking and holding on the delay value and moving the mouse left or right.
• Once you’re done, just exit the Edit screen and Save!

GIMP

GifCam is great, but I found out later that I could do everything with a photo editing software like GIMP or Photoshop. In this tutorial, I will use GIMP, since it is free and open-source.

• Open GIMP.
• Make sure that every frame of your animation has the same background.
• Open the first frame in your animation
• Click File, choose Open As Layers and select the rest of your frames.
• Go to Filters -> Animations -> Optimize (For Gif), which will reduce the size of the file and open a new window.
• Edit the time of each frame by changing the value inside the parenthesis.
• Go to File -> Export As and name your GIF.
• Un-check the ‘GIF comment’ option and check ‘As animation’.
• Click Export!

 

 

Et voila! You now have a GIF that is exactly like your Pixel Art animation. In the second part, I will cover the making of screen capture GIF for the complete game screen and how I found a solution for a small lighting problem I stumbled upon.

Cheers!