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
Having 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?!
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.
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.
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.
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
