Update: This post was written in March, 2012. Since then I’ve published a puzzle game on the AppStore called Shade Dogs. We developed most of the animations etc using After Effects, as hinted at in this post. So download that game if you want to see what is possible with this method. It’s been a long time since I’ve done this stuff now, so I probably can’t help you much. Instead, check out the comments section below for answers to some common questions.
Half of my brain is now working on a fantastic new project. It’s a two person venture, with a range of roles played by both. Although for simplicity I’ll refer to myself as The Developer, and the other person as The Artist.
Seeking a solution to streamline the workflow between The Artist and The Developer we decided that After Effects may be the key. I’ve used After Effects only once before — to do some most awesome DVD titles :|, and apart from what I’ve learnt watching the awesome youtubes of SurfacedStudio, I never really knew much about it. But it turns out, with a little help from XML-Gibson, AE may be a great tool for game development — particularly in regards to laying out scenes and creating animations.
So with my coffee and code, I spent a veritable googleplex of nanoseconds testing the idea out. Here’s a scene mocked up in AE:
… and after importing into The Game (which is totally about smiley faces made up of beach balls):
Couldn’t be easier! Although in writing this I now see a bug .. the z-order (or layering) of the sprites is backwards … whoops! In a nutshell, this now means that The Artist can now maek Arts and click Export, and The Developer doesn’t have to jot coordinates in his code. :)
29 replies on “After effects for game development?”
Hi, I’m Sebastien, author of the XML Gibson script.
In fact, the first version of the script was to layout menus and 2.5D real-time in engine cinematics for a little game I was developing using the XNA framework for Xbox 360. That was I could create simple animations and loops, export then in XML and test them directly on the Xbox. Sadly we didn’t have time to complete the game, it was more of an experiment, but working like this was really interesting.
Hey Sebastien, thanks for writing the script, and that’s cool to hear that you originally built it for gamedev. If this workflow works out for us, I’ll probably post further details about how we have used it. :)
How did things work out? I’m an artist very interested in your process. Thanks :)
Hi Jacinto, thanks for the comment! Things worked out extremely well in the end. We used this process to make a game called Shade Dogs for iOS, published in April this year (Link to Appstore). Practically everything you see in the game was drawn in Photoshop and animated and laid out in After Effects. Hopefully I’ll get around to writing an article detailing our process in the next couple of months. But in the meanwhile, check out Shade Dogs or just the screenshots at my company website: bombajam.com.
Is it something like this?
Thanks for the link! Yeah our system allows keyframed animation export, like that in the video, and follows a similar process. However, we also AE for a few more things, such as generating the collision shapes and using it to layout and describe parts of scenes (such as hotspots for users to tap on, etc).
Ok, I really like after effects for making animations, and am dead set on getting my AE animations into my PC sidescroller. We’re using Java to create the game.
I’ve looked into this XML gibson script because frankly I’ve no clue how to get the animation into my game short of just exporting a series of png images (which makes loading times CRAZY.)
Can you educate a noob like me on just what you use the XML file that Gibson creates for? What code/program/whatever do you use to read the XML file and recreate the animation in-game?
Many thanks for reading
After setting up the anim in AE, we export the XML using XML-Gibson. We _also_ export all the individual image parts from photoshop into a directory. We make sure to keep the same name for the same part between AE and PS.
I then wrote a script in Python. It first takes the XML output, does some processing on it (e.g., change the coordinates system), and then writes out a similar .plist which is the iOS file format of choice. The script also runs texturepacker on the image folder to make a big spritesheet out of all the parts.
It is much easier if your game engine supports key-framed animation — we used cocos2d-iphone which does. So then it was just a matter of reading in the .plist at run-time, extracting the set of keyframes from it, and then building a corresponding ‘action’ (a component of cocos2d’s animation system).
If your game engine doesn’t support keyframe animation, then you’ve got a bit of work ahead of you.
Wow, thanks for the response. This helps a lot. We’re early on enough in development where we can change engines and I think we’re just going to find one that supports keyframe animation. I use illustrator files in my AE animations, no photoshop. Does that matter?
No worries :)
If you export your sprites as images then it shouldn’t matter what you make them with.
Just so I can be clear, what this accomplishes is basically taking the components of an AE animation (for instance arms, legs, head, torso etc) and emulates the movement through the keyframes in the way that AE does it. So basically for one animation you only have a sprite for each component. Correct?
Yep that’s correct; however, there are other tools like Flash that do that kind of (skeletal) animation better than AE. You can download Shade Dogs on ios to see the kinds of animations we did, and whether you’ve got similar requirements.
Have you, by any chance, used ease in/out or curved animations ( not linear ) and had a successful export/import with them?
We’re using After effect for Video games dev too, but we are stuck on using only linear interpolations, which is very limited :/
Hey Greg, yep we supported curved animations for position (and also hold frames). When you export a curved anim using xmlgibson you should see terms like “interp_in” and “spatial_tan_in” which gives you the necessary data to construct bezier splines (which cocos2d supports directly). Good luck!
Ah yes, there is no issue with the spatial keys since we have access through script. This is the temporal ones that bugging me :)
Oh, well I don’t think we had complex time curves in Shade Dogs. Good luck anyway!
It was nice to read about your iOS game using AE . I am developing a game using sprite kit . I had few questions , Can I use xml file exported from AE in sprite kit ? Or do I need to process it using python ,like you did ? If Yes , what kind of changes do I need to do in the xml file exported from AE using xmlGibson.
Do you think on cocos 2d is a option for using a such files ?
Please , your reply would be helpful.. :)
Hi Tom, I know nothing about SpriteKit. XMLGibson outputs a custom XML file, which you will definitely need to process for your own purposes, whether that is for use with Sprite Kit or Cocos2D. Start off converting simple scenes and build up the functionality as you go. Good luck! – B
I will start converting scenes but still I need to understand if the use of scripting language like you used python is mandatory( If for any specific thing).
Sorry for the silly questions as I have no idea about the AE and python/scripting language at all.
XMLGibson outputs its own custom XML file. You will need some way of processing that file so you can get the animation and sprite data etc. This could be done with a scripting language like Python, or whatever, but you will definitely need this ‘processing’ step as part of your pipeline.
Another solution that may be easier is to use one of the many bespoke animation tools out there, like Spriter or Cocosbuilder. Afaik they have cocos2d support already, which would sidestep all this processing nonsense.
Thanks Ben , for a quick reply and detailed description.
Hi Ben ,
I downloaded and installed the AE on Mac machine. I didn’t see any export option as xmlGibson.
Do I need to install this XMLGibson script separately on AE tool ?
It’s a separate plugin.
I download latest plug-In. It show two files i.e XmlGibson_CS3.jsxbin and XmlGibson_CS4.jsxbin.
Does this plugin supports Creative Cloud and other AE CS versions also ?
Not sure, you’ll have to ask the creator: http://aescripts.com/xml-gibson/. I doubt I can help you further, it’s been over a year since I used it now. All the best. :)
Thanks Ben. No issue. :)
I will continue my search.
I am iOS Game developer , I read through this blog and its found interesting that we can use AE XML files on iOS.
Also I read through the XMLGibson at link : http://aescripts.com/xml-gibson/ .
I came across that some information can’t be exported to XML due to scripting restriction, such as curves, histograms, and some text properties.
My question is that Can we export all information in AE using XMLGibson export script, which includes bezier path and animation along this bezier path.
Because from the information given in above link , its difficult to understand , whether its possible to export animation along with curved path/bezier path information in XML file ?
My application totally depends on Animation along the bezier path.
Could you please guide me on this ?
We were able to export animations that followed bezier paths. Look at my answer to the same question above. :)
Thanks Ben .