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

CCAnimation パラパラアニメ cocos2d スプライトで作る

バッチノード、スプライトを使った CCAnimationパラパラアニメを作り方。

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

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

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

test3.png
test3.png

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

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

スプライトからパラパラアニメ

スプライトからパラパラアニメを作る方法です。
プログラムをやってきた自分としては、これが一番解りやすかったです。
CGRectMake(0,0,32,32)で画像の座標とサイズを指定します。

////////////////////////////////////////////////////////
//パラパラアニメ スプライトVER 位置を自分で入力して登録する
////////////////////////////////////////////////////////
//スプライトをつくる
CCSprite *sp999= [CCSprite spriteWithFile:@"test3.png"];
sp999.position = ccp( 200, 150); //スプライトの位置設定
[self addChild:sp999];

//画像データを配列に登録
CCSpriteFrame* frame1 = [CCSpriteFrame frameWithTexture:sp999.texture rect:CGRectMake(0,0,32,32)];
CCSpriteFrame* frame2 = [CCSpriteFrame frameWithTexture:sp999.texture rect:CGRectMake(32,0,32,32)];
CCSpriteFrame* frame3 = [CCSpriteFrame frameWithTexture:sp999.texture rect:CGRectMake(0,32,32,32)];
CCSpriteFrame* frame4 = [CCSpriteFrame frameWithTexture:sp999.texture rect:CGRectMake(32,32,32,32)];

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--------------------------------------------------------

バッチノードからパラパラアニメ

つぎはバッチノードを使った記述の仕方です。解説書によるとバッチノードを使うと処理速度が上がると書かれていました。


////////////////////////////////////////////////////////
//パラパラアニメ バッチノードVER 位置を自分で入力して登録する
////////////////////////////////////////////////////////

//バッチノードの設定 ※バッチノード使うと容量を圧縮できる
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 = [CCSpriteFrame frameWithTexture:bbb.texture rect:CGRectMake(0,0,32,32)];
CCSpriteFrame* frame2 = [CCSpriteFrame frameWithTexture:bbb.texture rect:CGRectMake(32,0,32,32)];
CCSpriteFrame* frame3 = [CCSpriteFrame frameWithTexture:bbb.texture rect:CGRectMake(0,32,32,32)];
CCSpriteFrame* frame4 = [CCSpriteFrame frameWithTexture:bbb.texture rect:CGRectMake(32,32,32,32)];

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--------------------------------------------------------


-------------------------------------------------------
[参考]
公式サイト
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 10:46