来源于 一般讨论 分类 疯狂ios讲义之cocos2d中的动画

cocos2d中的动画在每一个游戏当中，都有很多各种各样的动画效果，比如街头霸王中的旋风腿，植物大战僵尸中豌豆的扭动、僵尸的走路、攻击动作等，虽然简单的移动动作也可以实现这些功能，但是这样看上去非常的笨拙和不真实。那么这些效果到底是如何实现的呢？其实很简单，我们只需要将一系列图片按照特定的顺序排列，然后在精灵对象上执行特定的动画动作就可以了。
1  cocos2d中动画相关的类
在cocos2d中实现动画，需要了解以下几个类。


     q    
CCAnimate：该类为一种特殊的动作，也称为动画动作。


     q    
CCAnimation：该类封装了一个精灵帧序列和各个精灵帧之间的延迟时间，作为精灵播放动画的参数。


     q    
CCAnimationCache：该类是一个单例，作为一个缓存池来缓存CCAnimation动画。
2  简单动画效果
接下来我们通过示例演示在cocos2d中实现动画效果。在Xcdoe中使用cocos2d模板创建一个项目，命名为“AnimationTest”，加入准备好的图片资源，本例为8张植物大战僵尸中的僵尸图片，利用这些单独的图片创建动画，完成一个僵尸走路的动画效果。实现代码如下。

程序清单：codes/13/13.11/AnimationTest/AnimationTest/HelloWorldLayer.m

1. -(id) init

2. {

3.    if( (self=[super init]) ) {

4.        CGSize winSize = [[CCDirector sharedDirector] winSize];

5.        CCSprite* bgSprite = [CCSprite spriteWithFile:@”gamebg.png”];

6.        bgSprite.position = ccp(winSize.width/2,winSize.height/2);

7.        [self addChild:bgSprite];

8.        // 创建僵尸精灵，并设置坐标位置在屏幕之外

9.        CCSprite* zSprite = [CCSprite spriteWithFile:@”z_00_01.png”];

10.        zSprite.position = ccp(winSize.width+zSprite.contentSize.width/2,winSize.height/2);

11.        [self addChild:zSprite];

12.        // 创建CCAnimation动画，指定动画帧的内容

13.        CCAnimation* anim = [CCAnimation animation];

14.        [anim addSpriteFrameWithFilename:@”z_00_01.png”];

15.        [anim addSpriteFrameWithFilename:@”z_00_02.png”];

16.        [anim addSpriteFrameWithFilename:@”z_00_03.png”];

17.        [anim addSpriteFrameWithFilename:@”z_00_04.png”];

18.        [anim addSpriteFrameWithFilename:@”z_00_05.png”];

19.        [anim addSpriteFrameWithFilename:@”z_00_06.png”];

20.        [anim addSpriteFrameWithFilename:@”z_00_07.png”];

21.        [anim addSpriteFrameWithFilename:@”z_00_08.png”];

22.        // 创建animAction动画，restoreOriginalFrame:YES

23.        // 可以让精灵对象在动画执行完后恢复到最初状态

24.        id animAction = [CCAnimate actionWithDuration:1.5f animation:anim

25.            restoreOriginalFrame:YES];

26.        // 定义一个动作，重复执行CCAnimate动画

27.        id repeatanimAction = [CCRepeatForever actionWithAction:animAction];

28.        // 定义一个动作，让精灵对象移动到特定的位置

29.        id moveTo = [CCMoveTo actionWithDuration:10.0f

30.            position:ccp(-zSprite.contentSize.width/2,winSize.height/2)];

31.        // 僵尸精灵重复执行动画动作和移动动作

32.        [zSprite runAction:repeatanimAction];

33.        [zSprite runAction:moveTo];

34.    }

35.    return self;

36. }

复制代码
上面代码首先在屏幕中添加了一个背景精灵图片，然后创建了一个僵尸精灵，最后使用
8
张图片创建了一个简单的僵尸行走动画，并让僵尸精灵对象反复执行该动画并移动。这样就完成了一个僵尸从屏幕一边走到另一边的动画效果。单击“
Run
”按钮执行
AnimationTest
项目，模拟器显示如图
13.48
所示。

3  使用精灵表单实现动画效果


上一节实现了一个简单的动画效果，在实际开发工作当中，通常会使用更加高效的方式来完成动画，就是使用我们前面介绍过的精灵表单。上一节使用单独的精灵，每次都需要调用OpenGL ES
的绘图命令，速度会大大降低；而如果使用精灵表单，无论纹理图集上有多少精灵，只需要调用一次绘图命令即可。所以使用精灵表单，可以大大提升游戏的性能。


首先按照13.9.6
节制作精灵表单的步骤，将所有的图片制作成精灵表单。


①
加载图片。把所有的精灵图片拖动到
Zwoptex
的空白处，然后单击工具条上的“
Layout
”按钮，显示效果如图
13.49
所示。

 ②
单击工具条上的“publish Settings
”按钮，在Texture
下的“Save To File
”处设置生成的PNG
文件名和路径，在Coordinates
下的“Save To File
”处设置生成的plist
文件名和路径，完成后单击“Done
”按钮保存设置。

 ③
单击上方左侧的“Publist
”按钮生成所需要的plist
文件和PNG
文件。


接下来我们使用精灵表单来实现动画效果。在Xcdoe
中使用cocos2d
模板创建一个项目，命名为“AnimationCacheTest
”，加入准备好的plist
文件和图片资源。实现代码如下。


程序清单：
codes/13/13.11/AnimationCacheTest/AnimationCacheTest/HelloWorldLayer.m

1. -(id) init

2. {

3.    if( (self=[super init]) ) {

4.        CGSize winSize = [[CCDirector sharedDirector] winSize];

5.        // ①读取plist文件将精灵帧纹理添加到精灵帧缓存当中

6.        [[CCSpriteFrameCache sharedSpriteFrameCache]

7.            addSpriteFramesWithFile:@”animation.plist”];

8.        // ②创建一个精灵表单

9.        CCSpriteBatchNode* batchNode = [CCSpriteBatchNode

10.            batchNodeWithFile:@”animation.png”];

11.        // ③将精灵表单作为层的子节点添加到层当中

12.        [self addChild:batchNode];

13.        // ④创建背景精灵添加到精灵表单中

14.        CCSprite* bgSprite = [CCSprite spriteWithSpriteFrameName:@”gamebg.png”];

15.        bgSprite.position = ccp(winSize.width/2,winSize.height/2);

16.        [batchNode addChild:bgSprite];

17.        // ⑤创建僵尸精灵，设置坐标位置在屏幕之外

18.        CCSprite* zSprite = [CCSprite spriteWithSpriteFrameName:@”z_00_01.png”];

19.        zSprite.position = ccp(winSize.width+zSprite.contentSize.width,winSize.height/2);

20.        // ⑥创建一个数组用来保存动画

21.        NSMutableArray* array = [NSMutableArray array];

22.        // 遍历所有图片，然后从精灵帧缓存中获取与图片名称相对应的精灵帧保存到数组当中

23.        for(int i = 1;i<=8;i++){

24.            NSString* fileName = [NSString stringWithFormat:@”z_00_0%i.png”,i];

25.            CCSpriteFrame* frame = [[CCSpriteFrameCache sharedSpriteFrameCache]

26.                spriteFrameByName:fileName];

27.            [array addObject:frame];

28.        }

29.        // ⑦创建一个动画并设计成重复动作

30.        id animation = [CCAnimation animationWithSpriteFrames:array delay:0.1f];

31.        id animate = [CCAnimate actionWithAnimation:animation];

32.        id repeate = [CCRepeatForever actionWithAction:animate];

33.        // ⑧创建一个CCMoveTo让精灵移动到特定的位置

34.        id moveTo = [CCMoveTo actionWithDuration:10.0f

35.            position:ccp(-zSprite.contentSize.width/2,winSize.height/2)];

36.        // ⑨让僵尸精灵运行动画和移动动作

37.        [zSprite runAction:repeate];

38.        [zSprite runAction:moveTo];

39.        // ⑩将僵尸精灵添加到精灵表单中

40.        [bgSprite addChild:zSprite];

41.    }

42.    return self;

43. }

复制代码


上面程序中，编号①代码读取animation.plist
文件将精灵帧纹理添加到精灵帧缓存当中。编号②代码根据animation.png
文件创建一个精灵表单。编号③代码将精灵表单作为层的子节点添加到层当中。编号④代码创建背景精灵添加到精灵表单中。编号⑤代码创建僵尸精灵，并设置坐标位置。


编号⑥代码创建一个数组，并遍历所有图片，然后从精灵帧缓存中获取与图片名称相对应的精灵帧保存到数组当中。编号⑦代码创建动画对象并传入精灵图片帧数组，同时指定动画的播放速度，然后将动画设计成一个重复的动作。编号⑧代码创建一个CCMoveTo
让精灵移动到特定的位置。

编号⑨代码让僵尸精灵执行动画和移动的动作。编号⑩代码将僵尸精灵添加到精灵表单中。

通过以上步骤，我们就完成了通过精灵表单创建
cocos2d
动画效果的过程。单击“
Run
”按钮执行
AnimationCacheTest
项目，模拟器显示和直接使用图片帧创建动画的效果一样。使用精灵表单可以大大提升游戏的性能，在实际的项目开发当中应该更多地采用精灵表单的方式加载所有的精灵对象。