【cocos2d入門】cocos2dのアニメーション

12月 09

Posted by: daichi / Category: iphone開発

前回までのcocos2d入門。
【cocos2d入門】Hello World! | iphoneアプリで稼げるのか

前回でcocos2dのHelloWorldが終了。
今回はcocos2dでアニメーションします。
ここで使うcocos2dのバージョンは、前回同様cocos2d-0.9.0-alphaです。

Action

今回からプロジェクトの作成手順は書きません。
前回の記事を参考にしてください。
本当は新たにターゲットを作ろうと思いましたが、面倒なので前回のHelloWorldターゲットに処理を追加することにします。
ActionはLabelやSpriteに対して有効なので、今回はLayerクラスの中での処理がメインになります。

cocos2dでアニメーションはActionと呼ばれます。Actionは移動、回転、拡大といったベーシックなアニメーションからそれらのリバース、繰り返し、同時実行、順次実行、イージング、メソッド実行等の複雑な操作までが簡単に行えるように作られています。

ベーシックアニメーション

移動

移動はCCMoveBy, CCMoveToクラスで指定します。
Layerクラスのinitメソッド内で,CCMoveByアニメーションを記述してみます。

^?View Code OBJECTIVE-C

-(id) init
{
	if( (self=[super init] )) {
 
		CCLabel* label = [CCLabel labelWithString:@"Hello World" fontName:@"Marker Felt" fontSize:64];
		CGSize size = [[CCDirector sharedDirector] winSize];
		label.position =  ccp( size.width /2 , size.height/2 );
		[self addChild: label];
 
		id moveBy = [CCMoveBy actionWithDuration:2.0f position:ccp(10,0)];
		[label runAction:moveBy];
        }
        return self;
}

アクションはLayerへaddChildした後に記述すれば問題ありません。

^?View Code OBJECTIVE-C

	id moveto = [CCMoveBy actionWithDuration:2.0f position:ccp(10,0)];

上の部分でactionを生成しています。
actionWithDurationで実行する時間を、positionで移動する場所を指定しています。この場合、X方向に+10の場所まで、２秒かけて移動するアニメーションになります。

^?View Code OBJECTIVIE-C

	[label runAction:moveBy];

上のようにLabelやSpriteのrunActionメソッドにactionインスタンスを渡すだけです。簡単すぎます。アニメーションが！

これをUIKit系でやろうとするとこんな形になります。

^?View Code OBJECTIVE-C

[UIView beginAnimation:nil context:nil];
[UIView setAnimationDuration:2.0f];
frame = CGRectMake(frame.origin.x + 10,frame.origin.y, frame.size.width, frame.size.height);
[UIView commitAnimation];

これはまだ移動のみのアニメーションなのでよいですが、このアニメーション終了後に別のアニメーションを、さらに別のを、と続けていくと、だいぶ面倒になってきます。
が、cocos2dを使うとさくっとできます。すばらしい！

ちなみに、Actionクラスで最後にByとつくものは相対的なAction、Toとつくものは絶対的なActionになります。上の例でCCMoveToと指定すると(10, 0)の位置にLabelが移動する感じです。

回転

回転はCCRotateBy,CCRotateToクラスです。以降はActionクラス関連のみのソースを書くことにします。

^?View Code OBJECTIVE-C

id rotateBy = [CCRotateBy actionWithDuration:2.0f angle:180*2];
[label runAction:rotateBy];

これは２秒かけて一回転するアニメーション。１秒で半回転します。引数なども直感で分かると思います。

拡大

拡大はCCScaleBy, CCScaleToクラスです。

^?View Code OBJECTIVE-C

id scaleBy = [CCScaleBy actionWithDuration:1.0f scale:2.0f];
[label runAction:scaleBy];

これは１秒間で大きさを２倍にするアニメーション。それ以上の説明はいりませんね。

ジャンプ

ジャンプはCCJumpBy, CCJumpToクラス。

^?View Code OBJECTIVE-C

id jumpBy = [CCJumpBy actionWithDuration:4.0f position:ccp(100,0) height:200 jumps:4];
[label runAction:jumpBy];

これは４秒間かけて、高さ200の位置までのジャンプを４回繰り返し、X+100の位置まで移動するアニメーション。多少ごちゃごちゃしますが、UIKitを思えばものすごくシンプルです。

他のベーシックなアニメーションの詳細はこちらに。
prog_guide:actions [cocos2d for iPhone]

リバース

リバースとは、アニメーションの逆再生のイメージです。例えば、

^?View Code OBJECTIVE-C

id scaleBy = [CCScaleBy actionWithDuration:1.0f scale:2.0f];
id reverse = [scaleBy reverse];
[label runAction:reverse];

などとすると、最初に2倍に拡大された状態から、１秒かけて等倍まで縮小されるアニメーションになります。
actionインスタンスのreverseメソッドでリバースActionが生成できます。

繰り返し

繰り返しはCCRepeat, CCRepeatForeverクラスです。ベーシックアニメーションに対して繰り返し処理をさせることができます。

^?View Code OBJECTIVE-C

id scaleBy = [CCScaleBy actionWithDuration:1.0f scale:2.0f];
id repeat = [CCRepeat actionWithAction:scaleBy times:2];
[label runAction:repeat];

上の例では、拡大アニメーションを２回繰り返します。

同時実行

同時実行はCCSpawnクラスです。

^?View Code OBJECTIVE-C

id rotateAction = [CCRotateBy actionWithDuration:4 angle:180*4];
id jumpAction = [CCJumpBy actionWithDuration:4 position:ccp(size.width,0) height:100 jumps:4];
id spawn = [CCSpawn actions:rotateAction, jumpAction, nil];
[label runWithAction:spawn];

CCSpawnのactionsメソッドにactionクラスを列挙すれば、それらが同時に実行されます。この例では回転とジャンプが同時に行われます。
これはcocos2dのサンプルコードにもあるので、動きを見てみてください。
ジャンプを４回するのですが、１回ジャンプするごとに半回転していきます。

順次実行

順次実行はCCSequenceクラスです。

^?View Code OBJECTIVE-C

id spawn = [CCSpawn actions:rotateAction, jumpAction, nil];
id backwards = [spawn reverse];
id sequence = [CCSequence actions: spawn, backwards, nil];

同時実行のところで作ったジャンプ＆回転アニメーションとそのリバースアニメーションを順番に実行します。CCSequenceのactionsメソッドにActionクラスを指定すると、その順に実行されます。
このあたりのことはこちらに詳細が。
prog_guide:actions_composition [cocos2d for iPhone]

イージング

イージングはたくさんあるので、CCEaseInだけ紹介しておきます。イージングでは移動する速度を変化させてアニメーションできます。

^?View Code OBJECTIVE-C

id move = [CCMoveBy actionWithDuration:1.0f position:ccp(100,0)];
id ease = [CCEaseBackIn actionWithAction:move];

口では説明しづらいので、実際に試してみてください。
速度の変化のグラフはここにまとまっています。
prog_guide:actions_ease [cocos2d for iPhone]

メソッド実行

メソッド実行はCCCallFuncクラスです。例えばこのようにすると、

^?View Code OBJECTIVE-C

                id move = [CCMoveBy actionWithDuration:1.0f position:ccp(100,0)];
		id fanc = [CCCallFunc actionWithTarget:self selector:@selector(fanc)];
		id seq = [CCSequence actions:move, fanc, nil];
		[label runAction:seq];

moveが実行された後で、fancメソッドが実行されます。
これも詳細はこちらで。
prog_guide:actions_special [cocos2d for iPhone]

アニメーションはこの辺で。
他にもアニメーションはあるので、詳しくはAPIを確認してみてください。

# ほんとはアニメーション動画も用意したかったですが、心が折れました。

次はイベントやります。

タグ: cocos2d, チュートリアル, ライブラリ, 入門

2 Responses to “【cocos2d入門】cocos2dのアニメーション”

Hide Says:
12月 9th, 2009 at 3:20 PM
日本語でのcocos2dの解説とても参考になります。
続きが楽しみです！
daichi Says:
12月 9th, 2009 at 9:47 PM
>Hideさん
ありがとうございます。
今週は短期集中でcocos2d攻略予定なので、よろしくです！

iphoneアプリで稼げるのか