Time-lapse Gamedev Session Recording

Here are a few tips for some of you indie game developers out there, that are looking to show off some of your work via time-lapse video.

CamStudio

Download CamStudio, which is a free and open source video capture program.

Use the following settings:
Options > Video Options... > Compressor: Cinepak (default)

Uncheck Auto Adjust at the bottom. This will allow you to adjust the Key Frame frequency, and the Framerates.  I set Set Key Frames Every 1 frame(s)

And for framerates,
Capture Frames Every 1000 milliseconds
Playback Rate at 2 frames/second


This means, that while recording, CamStudio will capture the screen every 1 second, and it will play back twice as fast.
After watching a recording at this playback speed, it was still a little too slow, but most video players nowadays have a speed control, so I wasn’t too worried about it, especially if I decide to export these time-lapse videos to animated GIFs (more on this later), I would have the opportunity to set the speed prior to export.

Another setting that I like to enable is even pixels (which for whatever reason I don’t see in v2.7.3). This is just to allow more video players to run the resulting video, as an odd number of pixels tends to result in encodings that aren’t really friendly to some video players.

Be sure to set your recording region and output directory accordingly, and you’re ready to rock.

When you hit Record (the obvious big red button), corner brackets will pulse at the edges of the recording region, at the specified Capture Frames Every setting, so for example, if I was using 1000 milliseconds, I would see the brackets pulse every second. What’s great about this is, for time-lapse recording, CamStudio doesn’t eat up a lot of resources to capture video while you are doing what you are doing.

Animated GIFs

To create an animated GIF, you need a sequence of still images, or frames, that you would then re-assemble into an animated GIF file.

Converting Video to Frames

If you wanted to convert the time-lapse video you just created above into an animated GIF, you’ll have to extract still frames from the video as a sequence of images before assembling the GIF.

I like to use avidemux (another free and/or open source software program). You can save a video, or portion of a video loaded into avidemux, export it as frames. Be sure to install avidemux 2.5.x, as 2.6.x does not have this feature.

Capturing Frames Directly

Alternatively, you can use a program to capture time-lapse still frames, bypassing the video recording stage altogether. Apparently there are a number of applications that create time-lapse video and/or screenshots, but the one I tried was chronolapse after stumbling across this article.

chronolapse has the option of capturing screenshots or images from a webcam, or both. The program outputs a sequence of jpg images that you can later assemble in another program for creating animated GIFs. One program you can use to do this is GIMP. There are far easier-to-use commercial programs to do this entire process, but I wanted to keep the software in this article free and/or open source.

Exporting Frames to Animated GIF with GIMP

Once you have the sequence of still images, you can use GIMP to export the final animated GIF.

To do this, open up GIMP and create a new image with the same dimensions as the exported images.

Then, select all the images in the sequence in an explorer window, and drag them onto the Layers window to load each image as a layer; be sure to drag the first image in the sequence first, or else the sequence may get out of order. This process can take a long time if you have a large number of images and/or the dimensions of your images are large.

Once all the images are loaded into the Layers window, don’t forget to delete the first frame that contains only a blank image from when you originally created the file. Before exporting, you may have to reverse the order of the images in the layers by using Layer > Stack > Reverse Layer Order, because GIMP is weird sometimes. You can then click on File > Export... This will prompt you to choose your directory and the file type (GIF), and then you can click on Export, and it will bring up this dialog:

Select As Animation, and your looping and delay options. Once you click on Export here, it may or may not again take a long time to process, depending on the number of frames and dimensions of your image.

One last thing I should mention is, animated GIFs can be fairly large for the web, depending on the length and dimensions of the animation. webm is another animated image format that is pretty popular online now, is relatively smaller in size to animated GIFs, and you can find some converters with a quick search.

And done!

Here’s an example of what I used these time-lapse techniques for (it’s a fairly large GIF; apologies in advance):

I was 3D modeling the characters Dipper and Mabel Pines from the show Gravity Falls for an eventual 3D printed gift for my significant other. It turns out that a lot of the principles for 3D modeling for game development also apply to 3D printing. Maybe I’ll write up some future articles on the subject…

Here’s a summary of the tools I just mentioned:

Anyway, happy developing!

Make it fun!

This entry was posted in Dev. Bookmark the permalink.

Leave a Reply

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