トップページ »  » CCAnimation パラパラアニメ cocos2d plistで作る

CCAnimation パラパラアニメ cocos2d plistで作る

公式サイトにのっているパラパラアニメの記述方法です。うーんややこしかった・・・涙。

[作るもの]
4枚の画像をパラパラマンガのようにきりかえる

[パラパラアニメ 基礎解説]
http://dkoubou2.chips.jp/blog6/2012/04/ccanimation_cocos2d1.html

[素材]
サンプルで使用する画像ファイル

test3.plist
plistはスプライトシートの位置座標をまとめたファイル。zwoptexなどの海外ソフトなどを
使うと書き出せます。zwoptexの解説は後ほど掲載する予定。

test3.png
test3.png

サンプルは 32×32の画像が縦2横2で 4つ並んでいる画像を使うとする。

4枚の画像は 
1.gif
2.gif
3.gif
4.gif

パラパラアニメ plistを使う VER

plistを使う方法はなれれば簡単です。コードもかなり短くなります。最初のコードは
forループで省略してないバージョンです。


////////////////////////////////////////////////////////
//パラパラアニメ plistを使う VER
////////////////////////////////////////////////////////

//plist設定 スプライトの一データの入ったファイル
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"test3.plist"];

//バッチノードの設定 バッチノード使うと容量を圧縮できる
CCSpriteBatchNode*bbb= [CCSpriteBatchNode batchNodeWithFile:@"test3.png"];
[self addChild:bbb];//画面に登録
//スプライトをつくり バッチノードに入れる
CCSprite *sp999= [CCSprite spriteWithFile:@"test3.png"];
sp999.position = ccp( 200, 150); //スプライトの位置設定
[bbb addChild:sp999];

//画像データを配列に登録
CCSpriteFrame* frame1 = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:@"1.gif"]];
CCSpriteFrame* frame2 = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:@"2.gif"]];
CCSpriteFrame* frame3 = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:@"3.gif"]];
CCSpriteFrame* frame4 = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:@"4.gif"]];


NSArray* animFrames = [NSArray arrayWithObjects: frame1, frame2,frame3,frame4,nil];

//アニメをつくる

CCAnimation *animation = [CCAnimation animationWithFrames:animFrames delay:1.05f];
id repeat = [CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:animation restoreOriginalFrame:NO]];
[sp999 runAction:repeat];
//end--------------------------------------------------------


パラパラアニメ plistを使う VER ループで登録

最初のバージョンにforループ処理を追加してより短くしたものです。公式サイトの解説にはこんな感じのコードがのっています。いきなりこれだったので、混乱しました。


///////////////////////////////////////////////////////
//パラパラアニメ plistを使う VER ループで登録
////////////////////////////////////////////////////////

//plist設定 スプライトの一データの入ったファイル
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"test3.plist"];

//バッチノードの設定 バッチノード使うと容量を圧縮できる
CCSpriteBatchNode*bbb= [CCSpriteBatchNode batchNodeWithFile:@"test3.png"];
[self addChild:bbb];//画面に登録
//スプライトをつくり バッチノードに入れる
CCSprite *sp999= [CCSprite spriteWithFile:@"test3.png"];
sp999.position = ccp( 200, 150);
[bbb addChild:sp999];

//画像データの登録 [ループで登録]--------------------
NSMutableArray *animFrames = [NSMutableArray array];
for(int i = 1; i <=4; i++) {
CCSpriteFrame *frame = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:@"%i.gif",i]];
[animFrames addObject:frame];
}

//アニメをつくる

CCAnimation *animation = [CCAnimation animationWithFrames:animFrames delay:1.05f];
id repeat = [CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:animation restoreOriginalFrame:NO]];
[sp999 runAction:repeat];
//end--------------------------------------------------------


以上がパラパラアニメのコード解説です。cocos2dは使いやすいといわれてますが、
ややこしい部分もあるんだなーと、調べてて思いました。パラパラアニメ作るだけで
めちゃくちゃ苦労した2日間でした。


-------------------------------------------------------
[参考]
公式サイト
http://www.cocos2d-iphone.org/wiki/doku.php/prog_guide:index
のActions, Transformations and EffectsのAnimationに解説あり

How To Use Animations and Sprite Sheets in Cocos2D
http://www.raywenderlich.com/1271/how-to-use-animations-and-sprite-sheets-in-cocos2d
http://www.raywenderlich.com/tutorials
plistを使ったアニメーションの作り方

自堕落なページ
http://d.hatena.ne.jp/corrupt/20110523/1306143469
plistを使わず自分で スプライトシートの位置指定してアニメを作る方法 を書かれています

ハマケン100%開発
http://hamken100.blogspot.jp/2011/08/cocos2d_19.html

-------------------------------------------------------






by   at 11:15