cocos2d-x 勉強第8回「アニメーション機能あれこれ」

cocos2d-Xmas Special

【日本最大級】cocos2d-Xmas Special by #gumistudy〜 Chukong Technologies（cocos2d-x開発元）他登壇！〜【日本初解説！cocos2d-x 3d extentionとは！？】【cocos2d-xを語り尽くす！】

12月13日(金)に、ベルサール半蔵門でcocos2d-xのイベントが開催されました。
自分も参加予定だったのですが、業務の折り合いがつかずに断念…(´；ω；`)ﾌﾞﾜｯ
次回こそはキチッとさんかしたいですね。。

イベントの様子は、

http://qiita.com/Masa_Yama/items/1b0339f75bfd1ff9b965
http://qiita.com/fam_jp/items/f8407f121e3992a44326

などで紹介されております。楽しそう！

今回の課題

さて、今回は、cocos2d-xで用意されているアニメーション機能に関して、いくつか試して見ようと思っています。
jQueryでいうところの$("some").animate()とか$("foo").fadeIn()などに該当する機能ですね。

なお、今回の記事は、どうにも「もうアニメーションで迷わない。 Cocos2d-xのCCActionまとめ」で書かれている内容の写経となりそうです。

みんな、そっちの記事を読んだほうがいいよ！

基本アニメーション

移動（確認する）

FiniteTimeAction *move = MoveTo::create(1.0f, Point(0, 0));
sprite->runAction(move);

スケール（確認する）

FiniteTimeAction *scale = ScaleTo::create(1.0f, 2.0f);
sprite->runAction(scale);

回転（確認する）

FiniteTimeAction *rotate = RotateTo::create(1.0f, 180.0f);
sprite->runAction(rotate);

余談になるが、この簡単な例では360.0fというような確度指定では、回転のアニメーションが一切発生しなかったです。
おそらく、360度=0度として処理されたと思われます。
1回転したい！という場合はどういう指定にするべきなんですかねーー？

スキュー（確認する）

FiniteTimeAction* skew = SkewTo::create(1.0f, 30.0f, 45.0f);
sprite->runAction(skew);

「スキュー」という言葉が聞き慣れないけど一般的な言葉なんだろうか…？

透明度（確認する）

FiniteTimeAction* fade = FadeTo::create(1.0f, 10);
sprite->runAction(fade);

イージング

モーションに緩急をつけるための機能という認識でおｋかしら？

Ease（確認する）

ゆっくり入ったり、ゆっくり終わったり

ActionInterval* action = MoveTo::create(2.0f, Point(0, 0));
sprite->runAction(EaseInOut::create(action, 2));

EaseExponential（確認する）

Easeより「ねちっこい」動きになるらしい

ActionInterval* action = MoveTo::create(2.0f, Point(0, 0));
sprite->runAction(EaseExponentialInOut::create(action));

EaseSine（確認する）

Easeより軽めの緩急がつくらしい

ActionInterval* action = MoveTo::create(2.0f, Point(0, 0));
sprite->runAction(EaseSineInOut::create(action));

EaseElastic（確認する）

elastic = 弾力のある, ゴム紐

たしかに弾力のある動きになります。

ActionInterval* action = MoveTo::create(2.0f, Point(0, 0));
sprite->runAction(EaseElasticOut::create(action, 0.3f));

EaseBounce（確認する）

Elasticより硬い動きになります。

ActionInterval* action = MoveTo::create(2.0f, Point(0, 0));
sprite->runAction(EaseBounceOut::create(action));

EaseBack（確認する）

行きすぎてバックする感じの動きに。

ActionInterval* action = MoveTo::create(2.0f, Point(0, 0));
sprite->runAction(EaseBackOut::create(action));

順番再生、同時再生、タイミング

順番再生（確認する）

一つの再生が完了したら次の再生、という感じの。

Sequence* seq = Sequence::create(
    EaseInOut::create(MoveTo::create(2.0f, Point(0, 0)), 2),
    EaseInOut::create(ScaleTo::create(1.0f, 2.0f), 2)
);
sprite->runAction(seq);

同時再生（確認する）

動かしながら、大きくしたい、とかそういう感じの。

Spawn* spawn = Spawn::createWithTwoActions(
    EaseInOut::create(MoveTo::create(2.0f, Point(0, 0)), 2),
    EaseInOut::create(ScaleTo::create(1.0f, 2.0f), 2)
);
sprite->runAction(spawn);

待機（確認する）

DelayTime::create(3.0f)のように待機時間を指定するようです。

Sequence* seq = Sequence::create(
    EaseInOut::create(MoveTo::create(2.0f, Point(0, 0)), 2),
    DelayTime::create(3.0f),
    EaseInOut::create(ScaleTo::create(1.0f, 2.0f), 2)
);
sprite->runAction(seq);

今回のまとめ

今回は、本当に「もうアニメーションで迷わない。 Cocos2d-xのCCActionまとめ」こちらの記事の丸写しと言っても過言ではない、そんな~~手抜き~~記事でした。
参照元の方に怒られたらこの記事はそっと消そうかなと思います。

次回に向けて

次回は、「ローカルストレージの扱い」に関してやってみたいと思います。

ファイルに保存
変数の永続化

などですね。

ソースコード

https://github.com/8823-scholar/cocos2d-x-study/commit/0161249a7ba0d7949516db9b42a5a5b62b883cae

参考文献

もうアニメーションで迷わない。 Cocos2d-xのCCActionまとめ

感謝です！