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 加入當前場景即可
恭喜，執行吧!!
完整專案下載
