In Between is an atmospheric, award-winning platformer where you solve mind-bending puzzles by manipulating your surroundings and gravity itself. Be invited to reflect on life while getting to know the story of the dying protagonist and his inevitable struggle for existence. Dive into the atmosphere of a dense, hand painted game while exploring the reason why you are here. Welcome to a world In Between. Website: gentlymad.org Twitter: twitter.com/gentlymadgames

Post feature Report RSS Sheetah - Extending After Effects for game development

A review on the steps undertaken to create a tool for game development by extending Adobe After Effects, exporting 2D animations as spritesheets.

Posted by on

A review on the steps undertaken to create a tool for game development by extending Adobe After Effects and exporting 2D animations as spritesheets.
Back in 2007 I was fascinated by post production techniques for movies. As an obvious choice, I began using After Effects. For those who don't know, After Effects is an application used for video post production and compositing, created by Adobe. Similar to Photoshop, it is layer based and features a timeline. However, while After Effects can be considered an industry standard among compositing and post production tasks, it has been overlooked as a handy tool for 2D game artists.

screen_0_hand_painted2.jpg

Hand painted frames for In Between, by courtesy of our creative wonderkid Daniel Denne.

When I began creating additional 2D animations for In Between I had to work efficiently and could not afford painting every image by hand. To my advantage, After Effects comes with variety of tools to create complex effects in very short time. The real difficulty lies in building muscle memory, remembering all the different adjustments and options to create convincing results. Once this hurdle is overcome, it's just a game between adjusting sliders and creating keyframes. The program helps you by interpolating between values. With some practice it gets easy to create a variety of different effects ranging from fire and candle lights to decaying orange trees.

Extending Photoshop

decaying_orangetree.gifHaving a cool animation was nice and all but rendering movie clips inside a game engine would be very inefficient. With our 2D animation system in Unity we mainly use spritesheets. A spritesheet includes all frames of an animation in a single image file. Sadly, After Effects does not support this special format structure natively as it was made for exporting movie files. Rendering out animations as image sequences is as close as it gets. On the other side, Photoshop and After Effectssupport a very sophisticated scripting framework based on a ECMAScript implementation (JavaScript). Being experienced in writing ECMAScript, my first idea was to create a script for Photoshop to convert image sequences into spritesheets. This approach turned out to be flawed. Firstly, Photoshop was very slow when it came to processing several layers into a new image. Secondly, the process left a lot of clutter in form of unneeded image files.

As an alternative I came across Photoshops "Video Frames to Layers" option. This allowsPhotoshop to import a movie as individual layers. This option is not directly exposed to the scripting framework, but there is a neat little tool granting access to nearly all features of Photoshop: The scripting listener plug-in. It records every action you make and generates code snippets to trigger the same action inside a script. Thanks to this function, I could render out uncompressed .avi movie clips from After Effects and turn them into spritesheets via Photoshop in mere seconds. But even this method generated clutter in form of unneeded .avi files.

Returning to After Effects

So it finally dawned on me: Why not create a script directly for After Effects?!

screen_1_ae_effects.jpg

An animation in After Effects being prepared for export.

The primary idea was to create a large spritesheet composition with the size of all frames combined, containing the animation as equally distributed layers. This composition was then automatically rendered out as a single frame. Principal parts of my Photoshop script could be reused and I was able to spent most of the time on things exclusive to After Effects, like its render pipeline. A tough part was rendering to different file formats while including the alpha channel. After Effects was missing some presets for this procedure, so rendering out a simple .png including transparency didn't work out of the box. I had to extend After Effects with custom presets for this case. In addition I encountered a bug as After Effects is not used to simply render out a single image. Every time I saved a spritesheet, the program appended a frame number to the file extension which made the file unusable. In the end, I manually created a routine renaming the file afterwards.

Custom sequences, what?!

At this point my extension was providing all of the core functionality. Exporting animations had become a one step procedure. It was also insanely fast compared to my first Photoshop method, thanks to the efficient render pipeline of After Effects. I had some time left so I started implementing custom sequences. These sequences are a nifty way to recycle an existing spritesheet to generate more complex animations. They are mostly simple arrays or strings containing frame numbers.

screen_ae_spritesheet.png

A simple spritesheet of an animated circle.

screen_ae_customsequence.png

A custom sequence reusing the frames above.

Instead of playing back a spritesheet animation in linear order, one can use a custom animation sequence to show the frames in a complete individual order. If done right this technique saves a lot of texture space, because only part of the animation is saved as image data. The rest will be recreated by referencing individual frames.screen_2_ae_customsequence2.jpg

The problem with this technique is that it's quite hard to generate these sequences by hand when there is no direct visual feedback, as was the case with our own animation pipeline in Unity . You also need to enter a frame number over and over if you want one frame to stay for a longer period of time. Since After Effects is based on working with keyframes and interpolation it was easy to implement a method to visually generate these sequences using keyframes. Now you simply animate a slider with values resembling the frame numbers of your spritesheet. After finishing the animation the frame sequence is exported as a comma separated string or a .json file.

The quest of publishing it

By the time the advanced functionality was implemented I wanted to release my work to the public and convince fellow game artists that After Effects could be a beautiful time saver for creating 2D animations. I chose to distribute it on my favorite scripting marketplace, aescripts.com. This however involved prep work in terms of marketing and documentation.The documentation page was done using Twitter Bootstrap.Being recognizable was important, as many tools for working with sprites in different environments already exist. So thinking about a unique and reasonable name was a key. Discussing with my teammates revealed "Sheetah", a mixture between sheet and cheetah. It puts emphasis on the core feature to get your daily work done faster. Documentation was equally important. It took me 2 days in total to make a comprehensible, compact tutorial video. Instead of creating several videos, one for promotion and another containing the tutorial, I decided to make a hybrid. The first 30 seconds introduce the core functionality, while the rest covers all the features in depth. For the text based documentation I decided to make a small website based on Twitter Bootstrap, a framework to quickly create responsive web pages. Generally, creating the marketing material and documentation roughly doubled the amount of time I spent on working on this project.

screen_3_ae_sheetah.jpg

Sheetah, as seen on aescripts.com.

With everything ready to publish, it was tempting to sell the script for a fixed price, because it would eventually generate more revenue. But in the end I wanted to stay true to myself and released it as "Name your own price", with suggested 18,99$, a value I felt appropriate for my work.

Cheers

Creating a script and publishing it was a good learning experience. In terms of extending Adobe products, I think there are a lot of possibilities to be explored. The scripting framework is way more powerful than I had imagined initially. Having a growing number of people using your product feels enlightening. Some features that found their way into Sheetah are based on discussions and feature requests by users. Feedback from others is thus very vital when it comes to enhancing a product.

I am always open to sharing knowledge, so drop a line in the comments if you have any questions or feedback. Otherwise, go ahead and try Sheetah, pay whatever you want or download it for free. A free beer is much appreciated though. =)

Cheers,
Matthias

Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.

Follow Report Profile
Icon
In Between
Platforms
Windows, Mac, Linux
Publisher
Headup Games
Engine
Unity
Contact
Send Message
Release date
Game watch
Follow
Feature
Browse
Features
Report
Report
Share
Related Games
In Between
In Between Platformer
Related Engines
Unity
Unity Commercial