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

木内智史之介(シャッチョー)
ミンカさんけっこんしてくださいおねがいします(ズザー
SEGAさん、DIVAの筐体ください(ズザー

cocos2d-Xmas Special

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

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

イベントの様子は、

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

今回の課題

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

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

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

基本アニメーション

移動 (確認する

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

スケール (確認する

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

回転 (確認する

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

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

スキュー (確認する

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

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

透明度 (確認する

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

イージング

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

Ease(確認する

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

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

EaseExponential(確認する

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

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

EaseSine(確認する

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

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

EaseElastic(確認する

elastic = 弾力のある, ゴム紐

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

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

EaseBounce(確認する

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

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

EaseBack(確認する

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

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

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

順番再生(確認する

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

1
2
3
4
5
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);

同時再生(確認する

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

1
2
3
4
5
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)のように待機時間を指定するようです。

1
2
3
4
5
6
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

参考文献

感謝です!