用 cocos2d 创建帧动画

在 cocos2d 中，大部分 动画 都是预先渲染好的位图。然后通过快速轮换来给玩家一种动态的感觉。例如下面的一系列位 图，快速轮换时就是一朵随风而动的雏菊。按照下面的步骤就可以

在动画都是预先渲染好的位图。然后通过快速轮换来给玩家一种动态的感觉。例如下面的一系列位 图，快速轮换时就是一朵随风而动的雏菊。按照下面的步骤就可以很容易的创建帧动画：

• 创建包含各个帧的png图片

• 将png 图片序列合并为一个png

• 生成CCSpriteSheet需要的.plist

• 在游戏中使用 CCSprite显示动画

创建包含各个帧的png图片

要创建动画，Flash是一个非常好用的工具。而Flash提供了将帧动画导出为png图片序列的功能。假设我们的动画已经用Flash制作完成，保存成名 为Flower9001的元件。现在XCode中新建基于cocos2d的项目，命名为Make Sprite Anim。并将Flower.png和Flower.plist导入Resources群组中。

新建Config.h文件，内容为：

// 花卉动画的帧数 #define FLOWER_SPRITE_SHEET_CAPACITY 63

并确保HelloWorldScene.m和FlowerSprite.m文件的开头用#import “Config.h”导入Config.h文件。

修改HelloWorldScene.m文件，将init方法改为：

-(id) init {     self = [super init];     if (self) {         // 将花朵的png图片序列和plist载入场景         CCSpriteFrameCache *cache = [CCSpriteFrameCache sharedSpriteFrameCache];         [cache addSpriteFramesWithFile:@"Flower.plist"];         id sheet = [CCSpriteSheet spriteSheetWithFile:@"Flower.png"                     capacity:FLOWER_SPRITE_SHEET_CAPACITY];         [self addChild:sheet];           // 将花朵Sprite添加到场景中         FlowerSprite *sprite = [FlowerSprite node];         CGSize size = [[CCDirector sharedDirector] winSize];         sprite.position = ccp(size.width / 2, size.height / 2);         [self addChild:sprite];     }     return self; }

前半部分代码的作用是将Flower.png和Flower.plist导入 CCSpriteFrameCache（帧缓存），以便后续构造FlowerSprite对象时直接使用缓存的数据。

新建一个 CCSprite的继承类，命名为FlowerSprite。修改FlowerSprite.m，增加init方法：

- (id) init {     self = [super init];     if (self) {         CCSpriteFrameCache *cache = [CCSpriteFrameCache sharedSpriteFrameCache];         NSMutableArray *frames = [[NSMutableArray array] retain];         // 构造每一个帧的实际图像数据         for (int i = 1; i <= FLOWER_SPRITE_SHEET_CAPACITY; i++) {             NSString *frameName = [NSString stringWithFormat:@"Flower%04d.png", i];             CCSpriteFrame *frame = [cache spriteFrameByName:frameName];             [frames addObject:frame];         }           // 使用CCAnimation和CCRepeatForever构造一个一直重复的动画         NSString *firstFrameName = [NSString stringWithFormat:@"Flower%04d.png", 1];         id sprite = [CCSprite spriteWithSpriteFrameName:firstFrameName];         CCAnimation *animation = [CCAnimation animationWithName:@"Flower"                                                           delay:1.0f / 30                                                          frames:frames];         [sprite runAction:[CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:animation                            restoreOriginalFrame:NO]]];         // 将构造好的动画加入显示列表         [self addChild:sprite];     }     return self; }

最后，编译运行就可以看到我们的花卉动画了。

本教程由 CocoaChina 会员“dualface”发布，原帖地址http://www.cocoachina.com/bbs/read.php?tid-25854.html