Paint the Town Red Dev Log 3 - Animated Gif Replays

This is the first Paint the Town Red dev log that is about something I just worked on. Over the weekend I added something I'd be thinking about for a while: an easy to use animated gif tool. The idea is that the game is always recording small screenshots as you play and when you pause the game, you can review the last X seconds of gameplay and choose a range to turn into a gif.

Here's what it looks like to use. Bear in mind that this footage is from an in-development version of the game with many little animation and physics bugs so ignore anything non-gif related:

 

Why?

Paint the Town Red has some very dynamic and often hilarious combat moments. Creating an animated gif is typically quite time consuming and complicated. You need to be capturing the screen somehow, need video editing software to cut out the section of the video you want for the gif and then you need some way of converting it to a gif. From my experience Adobe Premiere makes terrible animated gifs and there's not many good video-to-animated gif applications around. There are good web sites for video to gif conversion, but they have limitations on file size and duration that will probably send you back to the video editing software to get the resolution or length down. In my experience the process is very time consuming and often frustrating.

The number of people that can and are willing to make a gif no doubt pales in comparison to the number that would like to if it were easy.

This is easy.

The hope for us is that more people share their experiences playing the game through gifs which I think is one of the quickest and easiest ways for people to comprehend what the game is and get interested in seeing more.

 

Recording the Screenshots

This was the easiest and quickest part of the process. Within 30 minutes of deciding I was going to work on this I had a circular buffer of screenshots being saved at my desired resolution and framerate. This feature lives and dies on it being fast. Capturing screenshots conventionally is fairly slow if you're trying to do it in the background, even for relatively low resolution images. The method I went with was to create an array of Unity RenderTextures and as part of the post processing process, copy (blit) the render buffer to one of these render textures every frame. The array length is the number of seconds I want to record (currently 14 seconds) multiplied by the frame rate. I treat this as a circular buffer and always have the last 14 seconds of gameplay available.

This wasn't made with the gif tool... I just wanted to throw another image in here and this one's fun.

 

Displaying the Screenshots

When the game is paused, the pause menu has an area dedicated to displaying the replay along with sliders that allow you to set the start and end points of the loop you'd like to save to a gif. At the moment for simplicity I always record the screenshots at the same resolution regardless of the aspect ratio, but here I scale the image UI to make it appear to match the aspect ratio of the window. The images cycle along at the recorded framerate and loop correctly using the current start and end positions of the circular buffer of render textures and the user set start and end loop points. The GUI for all this took a few hours to setup all together.

 

Creating the GIF

One thing I didn't want to have to do was write my own GIF encoding. Typically I prefer to write my own implementations of things like this rather than use a third party library, but I wanted to complete this task over a weekend. I looked at a few C# animated gif libraries hoping to find one that would be fairly simple. NGif was the best I found for my purposes. Besides a couple of files that handled some image analysis and encoding, there was really only one file I needed to deal with. I converted its implementation from using Windows based Image and Bitmap classes to Unity textures, made some optimisations and had it working pretty quickly. At gif creation time for each of the desired frames I create actual readable textures from the render textures and perform bilinear filtered scaling to get them to the correction aspect ratio if required. These textures are then processed one at a time and encoded as gif frames. Once complete, I save the result as a gif file on the users machine in their save game directory and then provide the option to upload the gif.

Ultimately the process of finding the gif library, getting it working in Unity and setting it up for my purpose of pumping out gif files from the replay recordings took 2-3 hours.

 

gfycat Upload

The process of creating a gif file now was infinitely simpler than it was before, but I also wanted to remove any barrier between that step and users sharing the gif with others. I looked at the APIs for Imgur and gfycat with the intention of supporting uploading to both. Imgur's API is more mature, but there are more hoops to jump through. It also appears as though commercial applications may need to pay a fee to use the API. gfycat on the other hand has a very simple API and less restrictions. Their documentation is pretty poor with spelling and even mistakes in their URLs, but I was able to figure out the correct steps to get something uploaded and transcoded and get the result gif URL back.

Uploading to the Amazon S3 servers gfycat uses was quite slow so I made sure you could resume playing the game while it was happening. Once the upload completes, the gfycat transcode URL is called to take the uploaded gif and turn it into whatever gfycats HTML5 video stuff is. When that process completes, the URL of the result can be grabbed and at that point I display a button to open the gfycat page in a browser (user's default browser if non-Steam and Steam browser in in Steam) so you can see the result and easily copy the URL to share it. gfycat also makes the original gif file available.

 

Here's the gfycat I uploaded in the video above:

Looking at Imgur's (and to a lesser extent gfycat's) APIs also re-affirmed my hate for how things are typically done on the web.

Weekend Complete

All together the recording, GUI and gif creation side of things took around 5-6 hours to get done. The gfycat upload process including handling the various error cases probably took another 5 hours or so. For a weekend where I had a lot of other things I had to do that kept me off the computer, I'm extremely happy with the result. Being a 2 man team with our heads down working to get the game done almost all the time, it's hard to focus on marketing. For a game to be successful (i.e. sell and make money), effective marketing is extremely important. We don't have money for advertising and PR companies, so instead we rely mostly on word of mouth and if we're lucky, gaming sites covering the game and Youtube channels playing it to get people's eyes on it.

You can only sell the game to people that see it, and I know that personally I will often ignore a game until I've been beat over the head with it several times. Hopefully this leads to more people sharing their cool moments on Twitter, Reddit, forums, etc so more people get beat over the head with Paint the Town Red when it's out in Early Access.

 

The next dev log will likely go back to covering one of the larger topics like our custom lighting. Keep an eye on this site, the Steam community, my Twitter or my TIGSource DevLog thread for the next update.

If you read this far and haven't added the game to your Steam wishlist yet, you probably should go here and do that.