raymondlu/super-animation-samples

A New Animation Solution based on SWF for Cocos2d Game Engine

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 from the SWF file.

3. Reproduce the animation in Cocos2D game engine with the transformation data and images.

Please refer to super_anim_help_english_version.pdf.

New Features

• Support sprite sheet, which means you can use TexturePacker to pack some small images into one big images
• Support resize animation, you can resize one animation to different size to support multiple resolution
• Support set flip x&y for animation
• Support rename animation sprite name, please refer to the help doc
• Support replace animation sprite at runtime, please refer to the sample code
• Support time event, please refer to the sample code
• Super Animation Converter for HTML5 is available!!!

Contact Me

• Forum: http://www.cocos2d-x.org/boards/6/topics/19621
• Blog: http://raymondlu1983.blog.com/super-animation-converter/

HTML5 Version

• Website: http://na-s.jp/SuperAnimHTML5/

super-animation-samples's Issues

Android Bug about file path

Your code works well on iOS.
But when i try it on Android, it has a bug.

I recommand this code change.

************************ before
FILE *aFile = fopen(aFullPath.c_str(), "rb");
if (aFile == NULL)
{
assert(false && "Can't open animation file.");
return false;
}

    fseek(aFile, 0, SEEK_END);
    unsigned long aFileSize = ftell(aFile);
    fseek(aFile, 0, SEEK_SET);
    unsigned char *aFileBuffer = new unsigned char[aFileSize];
    if (aFileBuffer == NULL)
    {
        assert(false && "Cannot allocate memory.");
        return false;
    }
    aFileSize = fread(aFileBuffer, sizeof(unsigned char), aFileSize, aFile);
    fclose(aFile);

************************ after
unsigned long aFileSize = 0;
unsigned char* aFileBuffer = cocos2d::CCFileUtils::sharedFileUtils()->getFileData(aFullPath.c_str(), "rb", &aFileSize);
BufferReader aBuffer;
aBuffer.SetData(aFileBuffer, aFileSize);

Could add setOpacity and setColor !!?

Hi Raymond:

Could you support setOpacity & setColor function like CCNodeRGBA?
Because sometimes we need to fadein/out or tint!!

Thanks you.

twice replaceSprite continue bug (little fix.)

movSWF[0]->replaceSprite("panda_mov_100x100.png", lastShooterStr);
movSWF[0]->replaceSprite("panda_mov_100x100_2.png", lastShooterSpecialStr);

I just run single of upon two line. It works well. But if I run two of all. It will error with system basic. It can't find out where the error is.

I only delay the code for a little moment. Force it sleep 100ms. It works well....then....

movSWF[0]->replaceSprite("panda_mov_100x100.png", lastShooterStr);
usleep(100);//delay for 100ms
movSWF[0]->replaceSprite("panda_mov_100x100_2.png", lastShooterSpecialStr);

Build error on Android

error message: 'sort' is not a member of 'std'
you can fix it by adding below line at SuperAnimCore.cpp

include (algorithm) // ( means <

[New Feature] Time Event in Animation Section

Imagine a circumstance: In a battle, you are attacking a monster, so you play a "attack" animation section on your character. And as a response, the monster will play a "hurt" animation section. For example, the "attack" animation section is your character push forward a sword, then pull back. But when to trigger the "hurt" animation section on the monster side?? I may say must be after your character push forward the sword, but before pull back. But since this is a whole animation section, how can I know whether the animation is at that position? Here come "Time Event". Let's assume that the whole "attack" animation section is 1.0, then the exact position of "after your character push forward the sword, but before pull back" is 0.8, then you can use that 0.8 as a parameter to register a "Time Event" for the "attack" animation. The SuperAnimNode will inform you throughout the listener when the time is on.

Please refer to "Time Event" in the sample code.

[New Feature]Chang Animation Sprite at Runtime

Imagine a circumstance: In a battle, your character got attack from enemies, and the HP decreased, for example the normal HP is 100, and now is 20, so you want to show the difference in character animation, for example by broken helmets. As you know, when creating animation, you only have one set of texture, so in order to create that effect: at the beginning of battle, the helmets of your character is good. But since the HP is down, the helmets become broken. you need to change the texture at the runtime.

Imagine another circumstance: for some reason, your character got level-up. You also want to show some difference in animation. For example, change the helmets from iron to gold. To do that you also need to change the texture at the runtime.

That is why I add the new feature "Change Animation Sprite at Runtime".
Please refer to the sample code "Replace animation sprite".

[New Version] A Simple Windows Version is Available

Please have a check in bin folder.

I want to use Movieclip.

Hi.
Are there any plans to support the MovieClip in the future?
Thanks for the great tool!!

Resize issue

I have an issue with resizing on the app: it's impossible to use non-integer value.

If I try to input a number with a dot under 1, I'll have the pop-up which says it only accept values between 0.1 and 10

If I try to input a number with a dot over 1, it will use the integer value of it.

If I try to input a number with a comma (which, in my local language, french, is the separator for real numbers), it will correctly set the label, but when I try to use the resize, it will do the same behavior as above.

Is there a workaround or do you plan to fix that bug ?

Super Animation Converter 2.0 not found ?

Hello,
Thank you for reading this issue, I am trying to use Super Animation Converter developed by you to read .sam files (animation).
I'm having trouble reading super_anim_help_english_version.pdf and it seems to be the Super Animation Converter 2.0 version, but the version uploaded on github is quite different (https://github.com/raymondlu/super-animation-samples/blob/master/bin/SuperAnimConvWin.7z). I wonder if I missed something?

The version in the .pdf file looks like this:

The .exe version I ran looked like this:

The version I have cannot read .sam files so I don't know if it can do that? My goal is just to convert .sam files back to .swf or other video formats. Or it could be any format that makes it easy to view and use it...

Can you help me with this, I'm sorry if it's wasting your time, I'd love to get an answer.

Thanks for @raymondlu.

scale smaller error

I use the normal size animation. it works well. But I scaled it and it do bad.

I want to get the id of superAnimNode

i mean like this...
int SuperAnimNode::getNodeID(){
return mId;
}

it will be useful in the OnAnimSectionEnd function.

cocos2dx 3.2

I want to know if it is working with cocos2dx 3.2, I tried but seems it is working but just doesn't appears on scene.

thanks

Translation Error for Multiple Graphic Symbols in One Layer

In my project, sometimes, if animator use multiple graphic symbols in one layer, the converter MAY have some error in translation data, which will cause the animation not good. This is a bug, but I have no time to fix it. So I provide a workaround:

Separate these graphic symbols into different layers, make sure only one graphic symbol in a layer.

[Tip]All items on stage should be from external images

All items on stage should be from external images, which means you cannot create visual items in Flash, for example vector graphics, then convert them to graphics symbols. So before you make any animation, you need to prepare all images needed , then import them into Flash to make animation. Please refer to the purple lines in "Rules & Steps in Flash" in the help doc.

How to open the .sam file

How to open the .sam file?

Where can I download Super Animation Converter soft

I can not find it in git clone files

I suffered a strange problem

Dear Raymondlu:
I had met similar problem before, but this time is especially obvious.I can not fix it by myself,so I put it here。

please change the suffix from png to fla, when open this in superanim converter, you can see the problem, the position of the hat is wrong, but when playing it frame by frame, it will be all right!
Last time I met similar problem is a repeated anim, and the same, but is not obivious.
I really like this superanim , simple and useful, I feel sorry that I can not fix this problem

loop animation for convenience

sometimes I need loop animation like walking animation.
I currently do like this...
OnAnimSectionEnd(...){
if(theLabelName=="walking") node->playSection("Walking");
}

It will be better to support loop option.
for example,
node->playSection("Walking",true); // the second parameter is isLoop

Animations suffer from displaced images

Hi Raymond,

We used Flash to create an animation. Each element was placed in a separate layer. When we run the .swf it looks perfect.

When we open it in SAC the animation falls apart. Here are some samples to show you what is going on.

Any ideas?

Thank you for a great tool!

CCDirector::sharedDirector()->setNextDeltaTimeZero(true) slow the animation ???

some guys tole me that CCDirector::sharedDirector()->setNextDeltaTimeZero(true) in SuperAnimNode::PlaySection can slow the animation, don't know why, will check it later. if you have the same problem remove this line.

do not work in 64bit device on cocos2dx 2.2.6

Thank you, I solved the problem myself.

do not work in retina device on cocos2dx 3.2

anybody help please, the "super animation node " does not work in retina device properly on cocos2dx 3.2

solution to rotation mix translation in one layer

When rotation mix translation in one layer, sometimes some bugs may occurs:
1 symbol is apart from where you want it to be;
2 there may be a ugly black & unwanted background.

this may caused by the compression method of that bitmap.
you can change the compression format of that bitmap from JPEG to PNG/GIF in Flash CS.

How can I control animate speed

sometimes,sprite control animate speed dynamically,Can I specify a time that a animate will cost?
thanks for your patience

Operation in OSX 10.9 Mavericks

Hi.
I am working on Super Animation Converter version 2.1.
I think xxx.plist so no longer output from the OSX 10.9 Mavericks.
Is there a solution?
Thanks.

Request Feature

@raymondlu can I request a simple feature which I can get each sprite object from the atlas, so I can change it's color or visibility, or whatever sprite function I can use to it. Thanks. :)

blending effect for character attacked

i think.. many people may want the effect for attacked
how about prividing blending effect.
in the function SuperAnimNode::draw()
there are a variable aColor.
if user can edit this variable programmatically, it will be great
thanks

I want setFlipX or setFlipY.

First of all, i really appreciate your work.

Sprite class support setFlipX and setFlipY.
and i think many people will want functions like those sprite support (ex. setOpacity)
Do you have plan to make those functions?

a bug in replaceSprite

i recommand this code change

** before
if (aSpriteFullPath.substr(aSpriteFullPath.length() - theOriginSpriteName.length()) == theOriginSpriteName)
** after
if (aSpriteFullPath.length()>=theOriginSpriteName.length() && aSpriteFullPath.substr(aSpriteFullPath.length() - theOriginSpriteName.length()) == theOriginSpriteName)

a bug in latest cocos2d-x

Hi, Raymond

in the latest cocos2d-x (version 2.1.1) it seems to do not working.
Every SuperAnimNode is not visible.
i checked working well in previous version.
Could you check this bug?

Thanks.

do not work on cocos2d-x 3.2

in cocos2d-x 3.2, the node can't be seen.

How to convert .sam file into a video format like .mp4 or something like that?

Sorry, is there a way to convert a .sam file into a video format like .mp4 or something like that? Or convert the .sam file back to .swf, I really need this but don't know how to do it...

@raymondlu Help me please, with any ideas...

Super Animation Converter for HTML5 is available

Website: http://na-s.jp/SuperAnimHTML5/

variable animation speed

i want various speed for same animation.
if i can edit it programmatically, it will be very useful.

[spritesheet-artifact]some "black lines" when using Sprite Sheet

when using sprite sheet, artifacts occasionally appear, especially when some of the texture is fliped, like this,I used the "shape outlines" to see clearly.

My solution is turning the cocos2dx macro "CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL" on and add
"#if CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL
aLeft = (2 * theTexturePixelRect.origin.x + 1) / (2 * aTextureWidth);
aRight = aLeft + (theTexturePixelRect.size.width * 2 - 2) / (2 * aTextureWidth);
aTop = (2 * theTexturePixelRect.origin.y + 1) / (2 * aTextureHeight);
aBottom = aTop + (theTexturePixelRect.size.height * 2 - 2) / (2 * aTextureHeight);"
to "SuperAnimSprite::SetTexture(CCTexture2D *theTexture, CCRect theTextureRect)" function.
This puzzled me a whole Spring Festival

performance issue

when i run more than 20 SuperAnimNode, it shows some delay.
i want to make super-animation more scalable.
i think there are some code that could be more effective
for example, in IncAnimFrameNum function i think... if it has the lastFrameNum of the current label, it can remove the for loop.

trim in SpriteSheet

when i make spritesheet with trim option, the animation has a bug occasionally (abnormal position).

case 1.
if the trimmed image is located in the center of the bounding box, then there is no bug.
case 2.
if the trimmed image is 'not' located in the center of the bounding box, then there is a bug.

Call retain() on the sprite frames used in the animation?

Hi
Here is the situation im' facing

1. create a super anim node with animation file.
2. add it to a scene.
3. switch to a new scene (which causes the anim node to be destroyed).
4. In the new scene i create an instance of the same animation file.
5. It uses the pointer information from sprite frame cache.
6. Auto releaser kicks in deletes the spriteframe
7. now the animnode has a dangling pointer which causes display corruption.

We should probably call retain on the sprite frames that are being used in the sprite sheet.

Super Animation Converter can't work in mac

When I click the ''Super Animation Converter"(at ./super-animation-samples/bin/Super Animation Converter), it's responseless.

How to solve this problem?

Thanks.

Super Animation Converter

Hi Raymond,
do you think it's possible to upload source code of your export here? We're using it in our games and would be really happy to contribute in improving it for future developers.

Best!