🤑 Indie game store🙌 Free games😂 Fun games😨 Horror games
👷 Game development🎨 Assets📚 Comics
🎉 Sales🎁 Bundles

Creating a GIF for your game Sticky

A topic by leafo created 1 year ago Views: 3,752 Replies: 10
Viewing posts 1 to 9
Admin (Edited 5 times) (+5)

Since many people on itch.io used animated cover images I figure we should have a thread with some GIF creating resources. I'm on Linux, so I can't vouch for the tools on for the other platforms. If you have any suggestions please leave a reply.

Windows

OSX

Linux

These are just some scripts I quickly put together, suggestions appreciated.

I use this script to snap a bunch of frames of a specific window:

#!/bin/bash
read w h x y <<<$(xwininfo -stats | grep geometry | grep -o '[0-9]\{1,\}')
echo "Recording ${w}x${h} at ${x},${y}..."
ffmpeg -f x11grab -r 25 -s "${w}x${h}" -i ":0.0+${x},${y}" %09d.png

After picking out the frames I want, and deleting the rest, I'll combine the result into an optimized gif like this:

#!/bin/bash
delay=3
gm convert -delay $delay -loop 0 $(ls *.png | sort -V) _tmp.gif
gifsicle --colors 256 -O2 _tmp.gif -o out.gif
rm _tmp.gif
(+1)

ShareX is pretty good on Windows. You can upload GIFs directly to Twitter, Imgur, and a million other places.

(+1)

For Unity users, Moments is a fantastic, free plugin which automatically and continuously records the last N seconds of gameplay and dumps that buffer to a .gif on-demand, asynchronously in the background without interrupting your game. You can easily configure the length of the buffer, the frame rate, the resolution, and the amount of color compression.

I integrated it into Legacy of the Elder Star in about ten minutes; it runs constantly in the background during gameplay and saves a Twitter-friendly .gif of the last 4 seconds whenever you hit G. All the animated gifs I've posted on the official website, our itch.io page, our social media accounts, and even the super high-res ones we put on our (now-defunct) Kickstarter page, were all captured using Moments.

Admin

I like this approach, I've done something similar for all my love2d games. That way I can just be playing the game, and hit a hotkey to record sections as much as I want without fumbling with an external program.

For those interested in a more integrated gif tool in Unity, I've made Gif Creator (available on the Asset Store).
It's based on Moments (with the agreement of its creator, of course :D).

(Edited 1 time)

I tried all the Windows ones suggested here and in the comments, and am recommending GifCam among them. Apart the many options, it has an awesome compression engine that the others don't match.

(Edited 2 times) (+1)

On OSX you can capture videos with QuickTime Player (which comes with the OS).

  1. Start QuickTime Player
  2. Hit ^⌘N to bring up the window for screen recording
  3. Hit the record button
  4. Drag the mouse to select an area you want to record, or click to record the whole screen
  5. When you are done recording just hit the stop button in the menu bar
  6. QuickTime Player will create a new video which can be saved

Once you are done you can simply use one of the many online services (e.g.: this or this ... there are lots of them) to convert the video to a gif.

Example output:
Animation

(+2)

For the video capturing part on Linux, I have been using this: http://www.maartenbaert.be/simplescreenrecorder

(Edited 1 time)

I can only speak for OSX, but I've tried a lot of different methods. There are a lot of promising and elegant looking programs that end up having trouble capturing a decent size at 60fps without dropping frames. Or not allow you to change the colour table method and do it based on the first frame only.

There are 3 methods that I've landed on each with different advantages:

Licecap
Free and handles decent sized 60fps gifs quite well. The interface is a bit clunky. But it's free.


Quicktime + Video editing + Photoshop
Highest quality results (but the most time consuming). Record the entire screen at the highest quality. Frame it and edit it to exactly what you want in Premiere or Final Cut. Export uncompressed video file. Import that into Photoshop and save for web to Gif.

The Photoshop save for web tends to allocate colours really well and get the filesize down. Once upon a time I use to use Fireworks over Photoshop as it had a way better gif export. But I haven't used it in years and can't compare them directly now.


Screenflick
The best complete package i've found (not free: $30 USD). It has replaced both Licecap and Photoshop for me for pretty much every gif I do. It records everything as video and has a bunch of video export options and also a nice gif export. Capture process is smooth, handles decent size at 60fps on my Macbook Pro. Keeps all the source videos stored away in case you want to come back to them . Allows editing after recording. And remembers your export settings. Oh, and it records mouse presses as metadata, so you can export with or without those present. The only caveat I can think of is it doesn't let you choose the recording codec, only the quality. For video recording it would be nice to have the option for uncompressed or Animation codec for capturing clips when making trailers and things. Can be nice having a high quality source stored away for later

(+2)

I use LiceCap and I optimize the gif capture in Gimp to reduce the size:

quip1

I tried out GIFfun on OSX to make one GIF from a movie. The Mac App Store ratings aren't great, but it worked fine for me. Blogged about it here.