iPhone-Cocos2d Animation Frame

iPhone-Cocos2d 動畫 (連續圖片播放)
Last Update: 2010/07/14 20:42

前置

環境:
XCode 3.2.2
Cocos2d 0.99.4

準備工作 :
Zwoptex (官網)
連續圖片

建立動畫資源檔案

以 Zwoptex 製作 .plist 及 .png
執行 Zwoptex => File => New
再將所有圖片全選, 拖曳到 Zwoptex 的視窗裡

點擊Untrim(不自動剪裁)
選擇適當大小
Layout -> Apply (自動排版)
儲存圖片(Texture, 建議png)
儲存描述檔 ( .plist, 格式為xml, 主要描述各圖檔座標)


把它們加到專案的 Resource 裡吧
加入後, 開啟 .plist -> Root -> Frame 可以看到原始圖檔名稱


接下來的一切動作都只在 init 函式裡

建立動畫來源

接著要建立 CCSpriteSheet 及 CCAnimation

我是以Cocos2d的範本建立專案
如果什麼都沒做就 Debug 的話應該會看到 Hello World
我們不需要這個
請將 init 函式的 if 區塊內容清空
加入 CCSpriteSheet 的 初始化, 看起來會像下面的程式碼

-(id) init
{
 if( (self=[super init] )) {
      CCSpriteSheet *ss = [CCSpriteSheet
                           spriteSheetWithFile:@"fox.png"];
 }
 return self;
}

緊接著 CCSpriteSheet
一樣在 if 區塊裡加入下面的程式碼, 將 CCAnimation 建立起來

[[CCSpriteFrameCache sharedSpriteFrameCache] 
  addSpriteFramesWithFile:@"fox.plist"];//Load plist.

NSMutableArray *animFrames = [NSMutableArray array];
for(int i = 1; i <= 10; ++i) {//for each frame. 
 [animFrames addObject:
  [[CCSpriteFrameCache sharedSpriteFrameCache]
   spriteFrameByName:
   [NSString stringWithFormat:@"fox_%04d.png", i]]];
}
CCAnimation *anim = [CCAnimation 
      animationWithName:@"walk"
      delay:0.1 frames:animFrames];

OK, 一行行說吧
先把 描述檔(.plist)載入

再將每個 Frame 取出並儲存(for)
其中的字串 @"fox_$04d.png"
是圖檔的名稱格式, 它會填入4個數字, 不足補零

最後我們有了圖檔的座標、大小和順序就可以建立動畫

連結你的動畫

  CCAction *action = [CCRepeatForever actionWithAction:
       [CCAnimate actionWithAnimation:anim restoreOriginalFrame:NO]];

CCSprite 要執行什麼動作都必需要依靠 CCAction 來操作
所以我們將 CCAnimation 與 CCAction 做個連結吧

  
  CCSprite *sprite =[CCSprite 
         spriteWithSpriteFrameName:@"fox_0001.png"];        
  
  CGSize winSize = [CCDirector sharedDirector].winSize;
  sprite.position = ccp(winSize.width/2, winSize.height/2);

這裡值得提的, 大概是 spriteWithSpriteFrameName
不再是用一般 Resource 的圖檔, 而是來自 Frame name

  [sprite runAction:action];
  [ss addChild:sprite];
  [self addChild:ss];

sprite 要執行剛建好的動作(CCAction)
再將 sprite 加入 ss(CCSpriteSheet), 以連結圖檔
最後把 ss 加入當前場景即可

恭喜，執行吧!!

完整專案下載

---