TapShingyoは多数のSpriteから正解のものをタップしていく次世代お経アプリです。

このアプリで実装したフェードなどの簡単なアニメーション関係の処理をまとめました。

拡大・縮小

拡大・縮小する

auto sprite = Sprite::create("hoge.png");
sprite->runAction(FadeTo::create(float durationTime, float scale));

第2引数でslaceを指定します。
1.0が等倍です。

カウントダウンアニメーション

以下は実際にTapShingyoで使用している処理です。
ゲームスタート時の「数値が1瞬だけ表示される」カウントダウン用のアニメーション部分のコードです。

auto sequence = Sequence::create(
    ScaleTo::create(0.1, 1.0),
    DelayTime::create(0.3),
    ScaleTo::create(0.1 ,0.0),
    RemoveSelf::create(true),
    NULL
);
auto sprite3 = Sprite::create("count-3.png");
sprite3->runAction(sequence);

auto count2Anim = Sequence::create(
    DelayTime::create(1),
    sequence,
    NULL
);
auto sprite2 = Sprite::create("count-2.png");
sprite2->runAction(count2Anim);

auto count1Anim = Sequence::create(
    DelayTime::create(2),
    sequence,
    NULL
);
auto sprite1 = Sprite::create("count-1.png");
sprite1->runAction(count1Anim);

カウントダウンは1回しか使用しない演出のため、シーケンスの最後にRemoveSelfを設定して、アニメーション再生後にSpriteを削除しています。
数字2、1がすぐに表示されないように、それぞれにDelayを入れるという処理になっています。

フェード

フェード・イン

auto sprite = Sprite::create("hoge.png");
sprite->setOpacity(0);
sprite->runAction(FadeIn::create(float durationTime));

FadeInを指定したからといって勝手に初期表示を透明にしてくれるわけではありません。
そのため、setOpacity(0);します。

フェード・アウト

auto sprite = Sprite::create("hoge.png");
sprite ->runAction(FadeOut::create(float durationTime));

こちらも、現在の透明度を単純に、現在地から255に変更するだけの感じです。

透明度を指定する

auto sprite = Sprite::create("hoge.png");
sprite ->setOpacity(0);
sprite ->runAction(FadeTo::create(float durationTime, float opacity));

「透明から半透明にする」など、透明度を指定する場合はFadeToを使います。
Sprite->setOpacity()はint 0 - 255の値を取りますが、FadeToは0.0 - 1.0を与える点に注意します。

フェード・イン、フェード・アウトを繰り返して点滅を表現してみます。

auto sequence = Sequence::create(
    cocos2d::FadeIn::create(0.5),
    cocos2d::DelayTime::create(0.25),
    cocos2d::FadeTo::create(0.5, 0.75),
    cocos2d::DelayTime::create(0.25),
    NULL
);
auto repeat = RepeatForever::create(sequence);

auto sprite = Sprite::create("hoge.png");
sprite ->runAction(repeat);

Sequenceは連続してアニメーションを指定するものです。シーケンス処理なので第一引数から順番に処理されます。

RepeatForeverは名前通り、エンドレスの繰り返し処理を行います。

スプライトの移動

指定座標への移動

auto sprite = Sprite::create("hoge.png");
sprite->runAction(MoveTo::create(float durationTime Vec2(float x, float y)));

現在位置に関わらず、指定の座標へ移動させる場合にMoveToを使用します。

現在位置からの移動

auto sprite = Sprite::create("hoge.png");
sprite->runAction(MoveBy::create(float durationTime Vec2(float x, float y)));

現在位置からいくら移動するかを指定するのがMoveByです。
x座標は移動せず、y座標を20移動する場合はMoveBy::create(1, Vec2(0, 20))というように指定します。

複数アニメーション

複数のアニメーションを次のようにまとめることができます。

シーケンス処理

処理を1つずつ実行します。
前述のSequenceがこれに当たりますので、コードは割愛します。

並列に実行する

たとえば拡大とフェードを同時に実行するというように、複数のアニメーションを並列に実行したい場合はSpawnをつかいます。

auto spawn = Spawn::create(
    ScaleTo::create(0.35, 1.35),
    FadeOut::create(0.3),
    NULL
);
auto pSprite = Sprite::create("img/ts-tap.png");
pSprite->setScale(0);
pSprite->runAction(spawn);

TapShingyoでは、タップ時に(目立たない)ポインタを表示しており、上記はそのコードの一部です。

※どこをタップしたかわかるように、表示するポインタ、、、正式名称はあるのでしょうか。どなたか教えてください。

繰り返し

アニメーションを繰り返し実行する場合はSequenceやSpawnとRepeatを組み合わせます。

N回繰り返し

auto sequence = Sequence::create(
    ScaleTo::create(0.05, 0.85),
    ScaleTo::create(0.03, 1.0),
    NULL
);
auto repeat = Repeat::create(sequence, int count);

Repeatは同じ処理をN回繰り返す場合のリピート処理です。

無限に繰り返し

auto sequence = Sequence::create(
    ScaleTo::create(0.05, 0.85),
    ScaleTo::create(0.03, 1.0),
    NULL
);
auto repeat = RepeatForever::create(sequence);

RepeatをRepeatForeverに変えるだけ。簡単ですね。

Easing

イージングとは

前述のアニメーションは直線的な処理にすぎず、実際に画面上に表示すると単調なものであることが分かると思います。

そんなアニメーションに緩急をつけてなめらかな動きを実現するのがイージングです。
リッチなアニメーションにイージングは欠かせません。

cocos2d-xは標準で十分な数のイージングに対応しています。

イージングの実装

auto seq = Sequence::create(
     EaseIn::create(MoveBy::create(0.4, Vec2(0,  12)), 3),
     EaseIn::create(MoveBy::create(0.4, Vec2(0, -12)), 3),
     NULL
);

MoveやScaleなど、前述のアニメーション処理にイージングをかませるだけで実装ができます。 コード量は増えてしまいますが、直観的でわかりやすいですね。

対応しているイージングと、イージングの見本

イージングの種類と実際の動きは以下を参照しております。

アルファシス – alphasis.info –
jQuery プラグイン ≫ jQuery Easing Plugin ≫ jQuery Easing Plugin | エフェクト動作パターン集
http://alphasis.info/2011/05/jquery-easing-plugin/

私にとっては最も使い勝手が良いのですが、jQueryのサンプルのなのです。

そのため、上記サイトで挙動をチェックし、次のサイトでcocos2d-xでの対応状況とクラス名をチェックしております。

Cocos2d-x v3:イージングの設定 | Lady Wendy
http://ladywendy.com/lab/cocos2d-x-v3/167.html

素晴らしいまとめをありがとうございます。

さいごに

今回ご紹介した物を組み合わせるだけで、複雑なアニメーションが実装できます。

ちょっとした動きが付くだけで見た目も、アプリの手触りもずいぶんちがったものになりますので、積極的に組み込んでいきましょう。

ただし、時間を浪費しないよう こだわり過ぎには注意 ですね。


単純なアプリにも苦労やドラマがある、、、

ぜひTapHannyaShingyoをDLしてみてください。


2016年04月04日:アプリリンクを追加