Exporting Flash animations to cocos2d actions is a topic that has been in my mind since some months ago. Spritesheets based animations are very limited in terms of sprites size and frame rate. The more frames you have, the more memory you consume. And the bigger the sprites, the more memory you need as well.

However, actually, memory usage has not been an issue in the projects I have worked so far. So, exporting Flash animations to cocos2d is a task that I have been procrastinating… till now.

The problem: Muster my Monsters and high quality animations

Muster my Monsters is a very simple game in terms of gameplay: it is basically a rock-paper-scissors game with a nice dress. Actually, a very nice one because it has forced me to solve the problem of exporting Flash animations to cocos2d.

Here you have a video preview of the game that shows the kind of animations that the game features. By the way, all the game art (including all character design and animation) is done by Javi Sanz, an incredibly talented Flash artist and developer.

As you can see, the characters are very big. Actually, they take about 70-80% of the screen size when the zoom effect is active. The characters are extremely detailed Flash vector images and the animations are very smooth (due to the Flash interpolating/tweening system). That’s why the resulting spritesheets are huge.

So, to give you some rough numbers, in the Windows Phone version we have 2 characters but we plan to increase it to 5-8 for the iOS version. Every character has 9 animations. On average, every animation has about 16-18 frames and every frame is a 420×400 image. I needed to build a 2048×2048 spritesheet for every animation of every character…

The download size of the resulting binary would be prohibitive. And also the memory consumed during execution. So, even using a compressed texture format, this is kind of a problem :p

The solution: procedural animation

The first thing that came to my mind was to use some already existing tool that will allow us to create procedural animations and import them into my iOS-cocos2d game engine. I found out two interesting tools: LevelHelper and the new version of CocosBuilder.

Both tools has some basic procedural animation support. But, currently, they are intended to animate things like menu buttons and UI elements in general. So, although, it would be possible to create the animations in Muster my Monsters using these tools, it would probably not be the best solution. I also considered Spriter, but the early stage of the project put me back from it.

Moreover, Javi is already a talented Flash artist so exporting Flash animations to cocos2d seemed to be the way to go.

First try: Importing Flash XML file

I have never developed in Flash, so my first attempt was to avoid all kind of interaction with it :p Flash has a nice feature that allows you to export an entire Flash project in XML format. It seemed the easiest solution as it will allow me to focus on the iOS-cocos2d side.

However, the Flash XML file format is hell. It’s extremely huge and the basic layout changes if you use some features or others. Every time I had a working version of the importer, I found a new feature that, when used in the Flash project, changed all the resulting XML file format. Even creating more XML files, fragmenting the project elements.

Second try: exporting Flash animations using Action Script

At this point Javi suggested to write a simple Action Script that go though every frame of the Flash project timeline, looking for the objects that conform the character and getting the transformation information. This sounded like a very good alternative, so I finally decided to learn the basics of Flash scripting and development 🙂

It was worth it. Actually, this is the solution I finally adopted. I have a simple action script that is able to write a plist (or XML) file with the transformation information of every object in the scene for every frame of the animation.

This implies a change of strategy. On the first try, when attempting to import the Flash XML file format, I was trying to map all the Flash features to cocos2d actions. So, I was trying to get high level information such as keyframes, interpolation frames and ease functions.

However, the action script strategy produces frame by frame information. It is kind of raw information. So, I don’t need to care about high level features. It is just a frame by frame animation description. In some sense, it is very similar to using spritesheets! 😀

This approach has some very interesting advantages:

• Actually reduces the needed memory
• Allows for extremely high quality smooth animations.
• Allows the animator to use all the Flash animation features including motion tweens, classic tweens or even bones-based animation.
• Reduces the complexity of the animations engine in the iOS-cocos2d side and makes it easily scalable and maintainable.
• In my particular case, allows Javi to keep working in Flash.

I went from this (x20):

to this:

Size reduced by 100 times! Great! 😀

On the cocos2d side

Actually, the hard work is done on the Flash side. So, once I have the plist file ready, it is only a matter of parsing it. I created a few classes for my engine that model movable objects, frames and animations.

Then I use this model classes to create a CCNode that is composed by a few sprites, one for each body part of the characters (head, arm, forearm, body, foot…). Finally, I create a bunch of cocos2d sequence actions (CCSequence) that interpolate the transform information (position, rotation and scale) for every modelled frame.

So, basically, the resulting “Character” class is a CCNode with a dictionary of CCActions corresponding to the animations created on the Flash project. You can play the animations with a method like this:

[character playAnimationWithKey:@"attack"];

A desktop player for Mac OS

The main problem of this approach is that the Action Script that gets the transformation data and the cocos2d engine make some assumptions. The Flash animator must be aware of these assumptions or limitations and needs to create the animations according to them.

So he needs some kind of feedback while creating the animations. He needs to know that what he is doing on Flash, is actually working on the game engine. That’s why I have also developed a Mac OS Player which you can feed dynamically with plist files describing the animation and the assets corresponding to the different characters you want to test.

Following, you have a video that shows the whole process: from creating some (simple) animations with Flash to viewing it with the Desktop player.

Conclusions

I would like to put together the main advantages and disadvantages of this method to solve the “exporting Flash animations to cocos2d actions” issue.

Advantages:

• Drastic reduction of the needed memory
• Allows for extremely high quality smooth animations.
• Allows the animator to use all the Flash animation features including motion tweens, classic tweens or even bones-based animation.
• Reduces the complexity of the animations engine in the iOS-cocos2d side and makes it easily scalable and maintainable.
• In my particular case, allows Javi to keep working in Flash.
• Allows me to avoid investing time on developing a custom animation tool.

Disadvantages:

• In some sense, we are using the Flash Authoring tool as an animation editor for our game engine. Although this allows us to avoid investing efforts on developing a custom tool, it also implies that I have less control on the kind of animations that the artist produces. I mean, I have written a detailed document explaining the guidelines and limitations on using Flash as an animation editor for our engine, but it could be the case that Javi uses some not supported feature or layouts the character in a way that I have not anticipated.

Future work

I plan to also use this tool to create game screens such as menus. Similar to CocosBuilder but, again, using the Flash Authoring tool as an scenes editor. This will allow us to layout game screens in Flash using the advanced animation features that Flash provides.