A New Animation Solution based on SWF for Cocos2d

[Raymond]

I create a tool named Super Animation Converter, which is a simple SWF (a file format supported by Adobe Flash Player software) converter. It can parse and extract transformation data from SWF file. With these transformation data and the right images, you can reproduce the animation in any game engine just as Adobe Flash Player can do.

The native animation solution in Cocos2D game engine is “frame by frame” animation, which means if there are 20 frames in your animation, you need 20 pieces of image(texture), and draw these images one by one on the screen to create animation effect. There are two flaws in this solution:

1 High resource consuming, one frame one image;
2 Hard to make smooth animation, since no interpolation between frames, which means it “jumps” directly from the current frame to the next frame.

So I try to provide a better animation solution which is based on Super Animation Converter for Cocos2D game engine. The idea is very simple:

1 Use Flash as your animation editor, create any animation you want in it, then export these animation as SWF file.
2 Parse the SWF file with Super Animation Converter, get the transformation data and images(NOT the whole frame) from the SWF file.
3 Reproduce the animation in Cocos2D game engine with the transformation data and images.

This project costs me lots of time.
But since we are so close to the end of the world, I decide to share it with all of you guys.
Please read “super_anim_help_english_version_1.pdf” first, then enjoy it!

I’ve put the tool & source code in github:

raymondlu/super-animation-samples

Updates
1 Support sprite sheet, which means you can use TexturePacker to pack some small images into one big images
2 Support resize animation, you can resize one animation to different size to support multiple resolution
3 Add set flip x&y function
4 Fix some crash bugs, some depth bugs, alpha blend bugs, more stable now
5 Support rename animation sprite name, please refer to the help doc
6 Support replace animation sprite at runtime, please refer to the sample code
7 Support time event, please refer to the sample code
8 A simple version of converter is added for Windows OS

Enjoy it!

[lance_gray]

You can actually export frames in Adobe Flash. That’s what our artists have been doing for cocos2d-x projects. After exporting, we then use TexturePacker to create spritesheets.

But then again, this one’s free, and free’s always good. Will get a copy and try it a bit.
A quick question. What does it output? Does it produce a number of PNG files or a sheet with some kind of PLIST?

[Raymond]

You can have a try.
Then you will know why I call it Super Animation …

In fact, I dont export frames in Flash.
I export images you use, the transformation data ,for example tranlation, rotation which is applied to the images to create animation in Flash.

[djfountain]

This is very very good.
I too have been working on a similar solution-
We have fairly bespoke requirements, so mine is less universal-

but i must say that after doing a lot of the same thing before myself
you have done a great job way better than my code.
Thanks for the upload!

[Raymond]

To daniel fountain,

So glad that we share the same idea on how to improve animation for this engine.
And I hope my job could help you a little bit.

[zhangxm]

@Raymond Lu
Thank you.

[jandujar]

nice work.

do a cocos2d-html5 working version and you will be my hero.

[oLmA]

This morning I was taking my shower and thinking of such a tool. You definitively made my day. Greetings :))))

[tpf]

cool

[haxpor]

Hey Thanks for the tool!

Although I don’t try it yet, but have an ahead question, is the animation process similar or the same as Skeleton Animation ?

[dearhpc]

Nice!
Question: Can the animation duration be controlled?

[dualface]

VERY NICE !

Thanks !

[opk8848]

Is it base on “bones animation” or “frame by frame” when animation runing in cocos2d-x?

[Raymond]

Hi, guys,

I’m back.
Sorry to reply you late.

To Jose Antonio Andujar,
do a cocos2d-html5 working version and you will be my hero.
Maybe you can do it, translate my code into something like Javascript.

To Wasin Thonkaew,
Although I don’t try it yet, but have an ahead question, is the animation process similar or the same as Skeleton Animation ?
Try it. I think it is not so complex as Skeleton Animation.My animation is “flat”, don’t have something like hierarchy, parent and child stuff, basically just sprite animation.

To 鹏程 黄,
Question: Can the animation duration be controlled?
Sorry.What do you mean by “animation duration”? do you mean frame count, or frame rate? You can control these two setting in Flash. My tool is just a converter.

To yx l,
Is it base on “bones animation” or “frame by frame” when animation runing in cocos2d-x?
Animation is “frame by frame”, but not that kind of frame sequences when running.I will do interpolation between frames to make it run smoothly, which cannot be done in the native animation of cocos2d-x.

[rastermax]

AWESOME job.

Tried examples works like a charm.

I tried to add SuperAnimation to a current test project (ios ObjectiveC), with latest version of Cocos2d : cocos2d-iphone v2.1-beta4
SuperAnim being not ARC i modified a bit the source code to compile. (mainly removing releases and autorelease stuff).

Loading goes ok.

For whatever reason, it does not display the node.
I checked , the loading goes ok, the draw method is called but nothing on screen. (checked x,y,z … ok)

Anyway, did someone try to add it to an ARC enabled project and how ?

Thanks

[Logan]

Hi,
Thanks for the amazing tool. I tried this with latest version of Cocos2d-x. the sample code provided worked fine however when i tried to use it in a new project, Like Nicolas i couldn’t get it to display the node for some reason.

[Raymond]

To Nicolas Eypert & Raghu S,

There are some differences in vertex shader code between the version I used in my sample code and latest version.

The original vertex shader code in cocos2d-2.0-rc2-x-2.0.1(my sample code):
//////////////////////////////////////////////////////////////////////////
// Vertex shader for animation
const GLchar * ccSuperAnim_vert =
" attribute vec4 a_position; attribute vec2 a_texCoord; attribute vec4 a_color; uniform mat4 u_MVPMatrix; uniform mat4 u_animMatrix; uniform vec4 u_animColor; #ifdef GL_ES varying lowp vec4 v_fragmentColor; varying mediump vec2 v_texCoord; #else varying vec4 v_fragmentColor; varying vec2 v_texCoord; #endif void main() “;
In cocos2d-2.1beta3-x-2.1.0, some changes needed:
//////////////////////////////////////////////////////////////////////////
// Vertex shader for animation
const GLchar * ccSuperAnim_vert =
” attribute vec4 a_position; attribute vec2 a_texCoord; attribute vec4 a_color; uniform mat4 u_animMatrix; uniform vec4 u_animColor; #ifdef GL_ES varying lowp vec4 v_fragmentColor; varying mediump vec2 v_texCoord; #else varying vec4 v_fragmentColor; varying vec2 v_texCoord; #endif void main() ";

cocos2d-2.1beta3-x-2.1.0 is the latest version I can get, you can try it in your version.

[rastermax]

@Raymond Lu
THANKS. Works now.
It displays the sprite parts.
There is a offset issue between parts. will check that and give you more details asap.
Nick

[rastermax]

`Raghu S
Did the fix work on your project ?

`Raymond Lu
Here is a screenshot with the difference between your sample and the code in my (super simple) project.
Looks like a translation (matrix?) or viewport projection matrix problem to me.
In booth cases running in simulator on iPad standard resolution : 1024\768

[Raymond]

To Nicolas Eypert & Raghu S,

I’ve uploaded my latest sample code in github:
SuperAnimSamples_V2.1beta3-x-2.1.0.zip

Good luck!