cocos2d Advent Calendar 2011 -3日目 波紋のアニメーションやてみた。オッパイぷるるんもあるんだよ！

お疲れ様です。ZuQ9->Nnです。

この投稿は、cocos2d Advent Calendar 2011
ってイベントのための、ポストです。

なんでも、技術的なTipsをクリスマスまで、順番にブログで書いていくのだとか。。
2011年に入って、ながらく、ブログをさぼってしまいました。

ずっと、気にはなってたんですが、1度サボってしまうと
そのあと、ズルズルと怠惰を続けてしまうのが人間ってもので
今回思い切って、このイベントでブログを再開したいと思います。

さて、前置きが多少、長くなりましたが、本題に移ります。
iPhoneのアプリに

Pocket Pond


というアプリがあるんですが、iPhoneの画面をタップすると、
波紋が広がって、とても、綺麗なんですよね。。

あー、こんなの、作ってみたいなって前々から、思ってました。
いろいろ、調べていくとcocos2dのCCWave3Dあたりを使うと
比較的、簡単に実装できると知って、挑戦していました。。

今回は、cocos2dのテンプレートで自動作成された
HelloWorldLayer.mを変更していきます。
なお、環境は、Xcode4.2、cocos2d 1.0.1です。

試して、調べていくうちに分かったのですが波紋はCCWave3Dではなく、CCRipple3Dでした。
CCRipple3Dは、
+ (id) actionWithPosition: (CGPoint) pos radius: (float) r waves: (int) wav
　　　amplitude: (float) amp grid: (ccGridSize) gridSize duration: (ccTime) d
でアクションを作成し、runActionで実行させるだけでおｋ

今回は、画面をタッチした位置で波紋を作りたいので、
第一引数のposにはタッチした座標を、
第二引数のradiusは波紋の波の半径で、数値が大きいほど大きな波紋ができるようです
第三引数のwavesは波の数で、数値が大きいほど波紋の数が多くなるようです
第四引数のamplitudeは振幅率で、数値が大きいほど、激しく大きな波になるようです
第五引数のgridはアニメーションの影響範囲で、数値が大きいほど、広い範囲で波が起きるようです
第六引数のdurationはアニメーションの実行時間で、数値が大きいほど長く、アニメーションが実行されるようです。

。。。○○のようですって表現はあくまで、私見であって、
確証がイマイチとれてません。。間違っていればご指摘お願いします。

今回は、- (void) ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)eventを
オーバーライドして、そこに、アニメーションの記述をしていきます。

ハマりどころ。
アニメーションを作成し、それをそのままrunActionで実行してしまうと
アニメーションが終了した後に元の状態にならず、波の変形が残ってしまいました。

いろいろぐぐったところCCSequenceで波のアニメーションの後
CCStopGridを実行してやると元の状況にもどりました。

最終的に出来たソースがこちらです。

- (void) ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [[touches allObjects] objectAtIndex:0];
CGPoint touchLocation = [touch locationInView:[touch view]];
touchLocation = [[CCDirector sharedDirector] convertToGL:touchLocation];

id effect = [CCRipple3D actionWithPosition:ccp(touchLocation.x, touchLocation.y)
radius:130 waves:10 amplitude:160 grid:ccg(80,80) duration:5];

[self runAction:[CCSequence actions:effect, [CCStopGrid action], nil]];
}

こちらのソースはあくまでもサンプルで第二引数から第六引数までの
数値は、適当に、それっぽい動きをするように何度か見て決めましたので
もし、気に入らなければ、適当に変更してみてください。

ちなみに、initメソッドでself.isTouchEnabled = YES;も
忘れずに記述してくださいね。そうしないとtouchが反応しませんので。。

んでもって。実行したところ、こんな感じです。


いろいろ、パラメータをいじくって行くうちに。一つの野心が芽生えてきた。
これって、ひょっとして。いわゆる。「オッパイぷるるん」が出来んではなかろうか。。

ってな訳で、早速やってみました。。こんな感じです。。。



最後は、ややネタに走ってしまいましたが。
こんなに簡単にこんなに派手なアニメーションができるのは
cocos2dのすばらしいところですね。

既出しているアプリで同じような機能が実装されていますが、
自分が作って、動かしてみると、やっぱりニヤニヤが止まりません。

2011年残り少ないですが、来年には
バンバン定期的にアプリがリリースできるよう
今後も、技術的なアウトプットをブログで続けます。

cocos2d Advent Calendarの次の方は
たくみさんって方です。
リンクをこの後に張るのかな。。イマイチよくわからんが、後は頼んだ。。