製作基本的 Animate Sprites

 

這裡示範如何使用一張包含所有連續動畫的動作圖片 Animation Texture Atlas，來製作 Flipbook 動畫效果，所謂 Flipbook 動畫效果，就是利用多張圖片快速置換，使眼睛產生圖片會動的錯覺，這種效果在遊戲中很常使用。

首先我們必需要有一張包含所有分解動作的影像，而且要確切知道每個的分解動作片段的影像大小，如下圖（每個分解動作大小為 90 x 90 Pixel）。

接著在的 cocos2d 專案內增加一個 CCSprite 的 Subclass，並將其命名為 HawkSprite，這麼做的目的是我們希望利用此類別來產生動畫，日後當我們需要使用此動畫時，只需在場景內建立該類別的物件即可，而不是將動畫的生成方法直接寫在場景裡，這樣會很亂也不符合效益。

接著在 HawkSprite 類別的建構式裡寫下動畫產生的方法，其程式碼如下。

-(id)init {
    self = [super init];

    if (self) {

        //Animation Texture Atlas的設定(包含層級與標籤)
        CCSpriteBatchNode *hawkBatchNode = [CCSpriteBatchNode batchNodeWithFile:@"Hawk.png"];
        [self addChild:hawkBatchNode z:0 tag:0];

        //製作第一個動畫片段
        CCSprite *hawkSprite = [CCSprite spriteWithTexture:hawkBatchNode.textureAtlas.texture rect:CGRectMake(0, 0, 90, 90)];
        [hawkBatchNode addChild:hawkSprite];

        //將動畫片段放置於畫面中心並放大兩倍
        CGSize size = [[CCDirector sharedDirector] winSize];
        hawkSprite.position = ccp(size.width/2, size.height/2);
        hawkSprite.scale = 2.0f;

        //宣告一個陣列來放置所有的動畫片段
        NSMutableArray *hawkArray = [NSMutableArray array];

        //將所有動畫片段放入陣列中
        int frameCount = 0;
        for (int y = 0; y < 3; y++) {
            for (int x = 0; x < 5; x++) {

                 //單一動畫片段
                 CCSpriteFrame *frame = [CCSpriteFrame frameWithTexture:hawkBatchNode.textureAtlas.texture rect:CGRectMake(x*90, y*90, 90, 90)];
                 [hawkArray addObject:frame];

                 frameCount++;
                 if (frameCount == 14)
                     break;
            }
        }

         //製作動畫與設定每個影格的延遲時間
         CCAnimation *hawkAnimation = [CCAnimation animationWithFrames:hawkArray delay:0.1f];

         //將動畫設定成無限循環
         CCAnimate *hawkAction = [CCAnimate actionWithAnimation:hawkAnimation];
         CCRepeatForever *repeat = [CCRepeatForever actionWithAction:hawkAction];

         //執行動畫
         [hawkSprite runAction:repeat];
    }

    return self;
}

在上述程式碼中的 CCSpriteBatchNode 其實就是 CCSpriteSheet，只是現在 CCSpriteSheet 已經從 cocos2d 中移除了，現在都改用 CCSpriteBatchNode 來設定放置這些 CCSprite。

最後，只需要在場景內鍵入以下程式碼，就可以將動畫置入場景中。

HawkSprite *hawk = [[HawkSprite alloc] init];
[self addChild:hawk];
[hawk release];