Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Creating a GIF for your game Sticky

A topic by leafo created Dec 28, 2015 Views: 24,636 Replies: 25
Viewing posts 1 to 22
Admin (5 edits) (+15)

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
(+3)

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

(+8)

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(+1)

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).

I'm not sure if this fits my current project, but I saved it for future projects. Giving the player the last X seconds to share on social media could be marketing gold.

(1 edit) (+1)

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.

(2 edits) (+2)

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

(+3)

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

(1 edit) (+1)

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.

I think ScreenToGif is the best one as it comes with a video editor interface so you can cut down unnecessary parts of the GIF and leave only the interesting part.

Moderator(+1)

ezgif is godsent for all your gif optimization needs. This saved me aeons of time when posting on sites like tumblr that have a pesky gif size limit. 

(1 edit) (+1)

If your game engine is a recent version of Unity3D (2017.1.0 or higher), there is a free official asset by Unity Technologies itself called Recorder in the Unity Asset Store (with source code also available on Github).

It is still tagged experimental but seems stable enough to be useful (but check the Unity Forum, linked below, first as some experience problems) and is integrated in the Editor (in its own window).

You can find it:

For reference, it supports (copied from the Asset Store Link):

  • Dedicated recorder window
  • Timeline triggerable recording sessions
  • Image sequences: JPG, PNG, GIF, OpenEXR
  • Video files: WebM, H.264 (Windows only)
  • Animation clips
  • 360 degree images/video capture (2018.1+)

I use the recorder all the time. It's pure gold.

 But I prefer recording videos and converting them to gif afterwards. Cutting is way easier for videos than for gifs^^

(+4)

Peek (Linux) is one of the most simple to use visual GIF recorders I have seen.

Thanks everyone! I'll have to experiment with some of your suggestions.

I use monosnap to capture .mp4, it takes lower storage and than other apps.

(+2)

Shocked this is even a topic to discuss.

Flash makes it super easy to do, but everyone just hates on it.

Record/edit footage. Convert to .flv. Import to timeline. Export as .gif. Bringo.




hmmm, I just found out a free tool that's very nice. Try it here

(+1)

Hi All, 

I've recently read the following article on Gamasutra about making gifs — in the comments there're also some great tools to make gifs. Should definitely check it out, I believe.

(+2)

I use Screen2Gif on Windows. However I use it to export to APNG, not to GIF (much better quality, which I keep as reference for later conversions). Then depending on limitations of every particular site I convert. For my web, I convert to WEBP animation (good compression compared to GIF/APNG, full 32-bit palette, supported in every browser except Safari (damn you Apple)). For itch.io, I have to convert to 3MB GIF, which is quite draconic limit IMO, but still achievable. For conversions I use FFmpeg, for further GIF optimization I use gifsicle tool. It took some time to master them as they're command line with lot of parameters, but in the end, it's much better than relying on online converters.

Hope someone will find it useful.

(+1)

On Linux, I prefer to use Peek. It's really simple and outputs in four formats, including GIF.

(+2)

I want to add my 2cents. I personally just use this converter: https://ezgif.com/video-to-gif

I record the video with Unitys build in Recorder, cut it like I want and than upload it on that page, to create a gif.

Gyazo is good too