cocos2d HOWTO系列之：如何创建帧动画

版权归原作者所有 网址 http://dualface.qeeplay.com/?p=406

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

按照下面的步骤就可以很容易的创建帧动画：

• 创建包含各个帧的png图片
• 将png图片序列合并为一个png
• 生成CCSpriteSheet需要的.plist
• 在游戏中使用CCSprite显示动画

创建包含各个帧的png图片

要创建动画，Flash是一个非常好用的工具。而Flash提供了将帧动画导出为png图片序列的功能。假设我们的动画已经用Flash制作完成，保存成名为Flower9001的元件。现在打开包含这个元件的.fla文件，按照下列步骤生成png图片序列。

将元件拖放到画布上，调整好元件大小。然后修改元件类型为“Graphics”：

接下来按照元件的帧数，在时间轴上添加相同的帧数。最终结果如下：

预览一下可以看到动态花卉后，就可以使用Flash的File->Export->Export Movie功能将动画导出为png图片序列：

导出类型应该选为PNG Sequence，并选择Include为“Minimum Image Area”，选择Colors为“24 bit with alpha channel”：

导出完成后，可以得到一系列的png图片，文件名为Flower0001.png到Flower0063.png：

将png图片序列转换为CCSpriteSheet需要的格式

将PNG图片序列合并为一个PNG图片，需要用到Zwoptex这个软件。这个软件的最新版不但变成了收费版，而且改动了.plist文件的格式，无法直接在cocos2d中使用。

所以这里使用0.4b10版，不但功能一样，而且生成的.plist可以供cocos2d直接载入：Zwoptex 0.4b10 下载。

启动Zwoptex，新建一个.zss文件，然后将刚刚创建好的png图片全部拖放到Zwoptex窗口中：

设定Zwoptex的Layout面板中的Sort On选项为“Name”，再调整Canvas面板中的Width和Height为合适的大小，确保能够容纳所有的png图片。设定后，点击Layout面板中的Apply按钮，可以自动调整png图片的布局，最终需要确保没有重叠的图片：

调整完成后。点击Export面板中的Save .png和Save .plist按钮，分别生成合并后的png图片，以及所有帧的.plist文件。

导出的png图片命名为Flower.png，.plist文件命名为Flower.plist。

在cocos2d中使用CCSpriteSheet创建动画

在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方法改为：

01. -(id) init

02. {

03.     self = [super init];

04.     if (self) {

05.         // 将花朵的png图片序列和plist载入场景

06.         CCSpriteFrameCache *cache = [CCSpriteFrameCache sharedSpriteFrameCache];

07.         [cache addSpriteFramesWithFile:@"Flower.plist"];

08.         id sheet = [CCSpriteSheet spriteSheetWithFile:@"Flower.png"

09.                     capacity:FLOWER_SPRITE_SHEET_CAPACITY];

10.         [self addChild:sheet];

11.   

12.         // 将花朵Sprite添加到场景中

13.         FlowerSprite *sprite = [FlowerSprite node];

14.         CGSize size = [[CCDirector sharedDirector] winSize];

15.         sprite.position = ccp(size.width / 2, size.height / 2);

16.         [self addChild:sprite];

17.     }

18.     return self;

19. }

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

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

01. - (id) init {

02.     self = [super init];

03.     if (self) {

04.         CCSpriteFrameCache *cache = [CCSpriteFrameCache sharedSpriteFrameCache];

05.         NSMutableArray *frames = [[NSMutableArray array] retain];

06.         // 构造每一个帧的实际图像数据

07.         for (int i = 1; i <= FLOWER_SPRITE_SHEET_CAPACITY; i++) {

08.             NSString *frameName = [NSString stringWithFormat:@"Flower%04d.png", i];

09.             CCSpriteFrame *frame = [cache spriteFrameByName:frameName];

10.             [frames addObject:frame];

11.         }

12.   

13.         // 使用CCAnimation和CCRepeatForever构造一个一直重复的动画

14.         NSString *firstFrameName = [NSString stringWithFormat:@"Flower%04d.png", 1];

15.         id sprite = [CCSprite spriteWithSpriteFrameName:firstFrameName];

16.         CCAnimation *animation = [CCAnimation animationWithName:@"Flower"

17.                                                           delay:1.0f / 30

18.                                                          frames:frames];

19.         [sprite runAction:[CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:animation

20.                            restoreOriginalFrame:NO]]];

21.         // 将构造好的动画加入显示列表

22.         [self addChild:sprite];

23.     }

24.     return self;

25. }

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

源代码下载：Make_Sprite_Anim.zip