來源於 通常討論 分類 瘋狂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 項目，模擬器顯示和直接使用圖片幀建立動畫的效果同樣。使用精靈表單能夠大大提高遊戲的性能，在實際的項目開發當中應該更多地採用精靈表單的方式加載全部的精靈對象。