来源于 通常讨论 分类 疯狂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 项目，模拟器显示和直接使用图片帧建立动画的效果同样。使用精灵表单能够大大提高游戏的性能，在实际的项目开发当中应该更多地采用精灵表单的方式加载全部的精灵对象。