Programming iPhone Games with Cocos2D Part 3

As promised in this post I want to give you a detailed view into animated sprites with cocos2d.

Lets say we have 24 png pictures as frames for our animation ( see below ). Since Cocos 0.8.x or something the zwoptex format is supported. Basically the zwoptex format is based on two files. One is a so called AtlasSprite png file containing all frames and sprites somhow arranged in it. The other is a plist file which has all the location data and sprite dimensions of each frame and sprites as xml formated readable text in it. Here is an example how the xml tree like :

root<NSDictionary>
+-frames<NSDictionary>
|    |
|    +-Frame1.png<NSDictionary>
|    |    |
|    |    +-x<NSInteger>
|    |    +-y<NSInteger>
|    |    +-width<NSInteger>
|    |    +-height<NSInteger>
|    |    +-offsetX<real>
|    |    +-offsetY<real>
:    :
.    .
:    :
|    +-Frame9.png<NSDictionary>
|         |
|         +-x<NSInteger>
|         +-y<NSInteger>
|         +-width<NSInteger>
|         +-height<NSInteger>
|         +-offsetX<real>
|         +-offsetY<real>
|
+-texture<NSDictionary>
|
+-width<NSInteger>
+-height<NSInteger>

There is a great tool online to create these two files : http://zwoptex.zwopple.com . Once Zwoptex started make sure the canvas is big enough and also not too big to import all your frames. Zwoptex will trim your png files so transparent spaces will be cutted off. If you dont want that, you can select all images and choose “untrim”. Once all frames are loaded and trimmed or untrimmed you can choose any autoalignment function or align them manually. Some times you get better or worse results when choosing an alignment function twice. Try it!

Ok, now we have two files blob.png containing 24 frames of our blob animation and a blob.plist containing the location and dimension information of all frames.

In cocos2d they changed pretty much since v0.8 especially how to create an animation. I will not explain how to create them in earlier version, but if some one is really interested in that, feel free to ask me here.

In Cocos2d all animation frames are stored in a so called animation cache ( CCSpriteFrameCache ). Once you loaded your plist file into that cache you can access the location and dimension information in it by using the former name of the png file. In this example this would be “blob_idle_01.png” for frame 1. If you want to change that name you have just to open the plist file in xcode and change it in what you want. But be sure you dont use any frame name twice.

Once you loaded the plist into the cache you can create an animation (CCAnimation) object and add all the frames you want into it. CCAnimation does support creating your frames based on files, but using a frame cache is much faster. After you have your animation object the best way you create the sprite is to use the frame cache creating your sprite, like “gimmi the first frame as sprite”. Finally you have to run the animation action. Here is a complete code of how to create your animated sprite :

CCSpriteFrameCache * cache = [CCSpriteFrameCache sharedSpriteFrameCache];
[cache addSpriteFramesWithFile:@"blob.plist"];
 
CCAnimation * animation = [[CCAnimation alloc] initWithName:@"idle" delay:1/24.0];
for ( int i=1; i < 25; ++i )
{
	// frame name format: blob_idle_01.png .. blob_idle_24.png
	NSString * fname = [NSString stringWithFormat:@"blob_idle_%02i.png", i];
	[animation addFrame:[cache spriteFrameByName: fname]];
}
CCSprite * blob = [CCSprite spriteWithSpriteFrameName:@"blob_idle_01.png"];
// deprecated since 0.9: CCSprite * blob = [cache createSpriteWithFrameName:@"blob_idle_01.png"];
id action = [CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:animation]];
[blob runAction:action];
 
// position our blob
blob.position = ccp( 160, 240 );
 
// add blob to scene ( self should be a visible CCLayer or CCScene )
[self addChild:blob];

Finally : Animated CCSprite

About this entry

You’re currently reading “ Programming iPhone Games with Cocos2D Part 3 ,” an entry on coders

Author:
hhamm
Published:
2.26.10 / 11am
Category:
cocos2d, objective c, programming, xcode
Feedback:
1 2 3 4 5 0 votes, rate it!