Friday, June 18, 2010

Load animation from a plist file in Cocos2d

For current version of cocos2d(I am using v0.99.1), to construct an animation, you will need to add all those frames for a certain animation from code. You will need to code following.


NSMutableArray *animFrames = [NSMutableArray array];
for(int i = 0; i < 14; i++) {
CCSpriteFrame *frame = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:@"grossini_dance_%02d.png",(i+1)]];
[animFrames addObject:frame];
}
CCAnimation *animation = [CCAnimation animationWithName:@"dance" delay:0.2f frames:animFrames];
[sprite runAction:[CCRepeatForever actionWithAction: [CCAnimate actionWithAnimation:animation restoreOriginalFrame:NO]]];


This is quite handy. However, i think this is not neat enough.

What i do is create an CCAnimatedSprite which inherit CCSprite. Which will retrieve all frame information from a plist file.

Advantages:
- clearer code
- a more centralized and flexible approach
- can set delay time between frame
- a future support for Animation Editor

Disadvantage:
- need more loading time
- need to create a plist file for each animation

To use CCAnimatedSprite, you need to first create a animation plist file. Please download the source file and take a look at uggyAnimation.plist.





You can use uggyAnimation.plist as a template and add any animation you need. Basically, the uggyAnimation.plist is based on zwoptex spritesheet. You need to indicate the coordinate file and the image source file generated from zwoptex.
After that, all you need is create animation and add frame for the animation.
You may take a look at the Walk_FlipY aniamtion in the uggyAnimation.plist. It contains 4 items. Each item is a frame for Walk_FlipY aniamtion. What you need to provide for this frame are
1. FrameName - which is the frame name refer to the name in zwoptex spritesheet
2. Time - the delay time for this frame
3. FlipX - should the frame flip horizontal
4. FlipY - should the frame flip vertical


After you create the animation plist file, what left is simple use CCAnimatedSprite to play the aniamtion by the animation name using following code.


animatedSprite3 = [[CCAnimatedSprite alloc] initWithAnimationFile:@"uggyAnimation.plist"];
[animatedSprite3 playAnimation:@"Walk_FlipY"];
animatedSprite3.position = ccp(380,260);
animatedSprite3.shouldLoop = true;
//let the sprite handle the animation
[animatedSprite3 schedule:@selector(tick:)];



FTP: Download Source Here

6 comments:

  1. Hi (JackNG?)

    Thanks for these posts. I've been dissecting your examples for the past few days and it has been quite fun. I do have a basic question though. Which is the better method to use? COCOS2D with Motion Welder (very convenient), or CCAnimatedSprite with an animation plist? It seems that Motion Welder would bea better option and just include the MW classes, but I noticed that you posted a blog post on how to use with an animation plist *after* your blog post on using Motion Welder. This makes me wonder if you prefer the animation plist method.

    ReplyDelete
  2. Hi Drew.
    I am glad that the example help you. I create the second tutorial because someone request it. Not because i prefer it.

    Actually, plist is more convenient if you are just doing some simple animation. For example, you got 10 images and just wanna animate them. You only got one sprite per frame. So just go straight to plist Animation.

    On the other hand, Motion Welder more convenient if you are doing complex animation. For example, You got several sprites to animate per frame. Motion Welder would be a better choice. Hope this help.

    ReplyDelete
  3. I understand now, that's great. If you don't mind, one last question. What frameworks/templates do I need to use to create a blank COCOS2D project suitable for use with Motion Welder. I tried the standard COCOS2D Application template but received an error that Vector could not be found (is this a C++ class or something?).

    ReplyDelete
  4. Actually, it seems that the plist now generated by Zwoptex is indeed different to the plist you have in your sampe. It has lines such as spriteColorRect, spriteOffset etc. XCode has not been building my animation successfully (it is not erroring, just bombing out). Does this mean that CCanimatedSprite can no longer read from this new format?

    ReplyDelete
  5. Aha! Ref my last post. You need to export the Zwoptex file as the "Flash version", not the COCOS2D version. I don't know if any feature set is lost by using the Flash version, but it does mean you can use it with the CCAnimatedSprite class. But of course, this does lead to another consideration. If Zwoptex is changed dramatically in the future, will it be a headache after having implemented the custom class heavily throughout your project.

    ReplyDelete
  6. HI DREW.

    If you find error that Vector could not be found, you need to change every *.m which included the header to *.mm.

    BTW, i am using ZWOPEX 0.4b10 (Mac Version) at that time. You can download ZWOPEX0.4b10 from the web. Just search google. If zwopex change dramatically, i will need to update the code to support newer version. It is not headache, just need some work. however, i am quite busy these few months. See if i can squeeze some time to update it. :)

    ReplyDelete