Calleigh’s blog

幸せは毎日の食卓から

絵や文字を点滅させるアニメーションを作る

[anim]タグ

章が変わるときやストーリーが終わったとき、タップ待ちを示す画像や文字を表示させることがあります。目に付きやすいように点滅させたいな〜と思ったらアニメーション用のタグ[anim]が用意されています。
対象となるのは、[image] [ptext] [button]の3種類です。そのため、以下の[image]タグの箇所は好きなものに置き換えて読んでください。
[image]のstorageは /data/fgimage/ 以下、
[button]のgraphicは /data/image/ 以下になります。

[image layer="" name="tap" storage="tap.png"]
    // 画像を表示させる。画像に tap という名前を付ける
[anim name="tap" opacity="0" time="600" effect=""]
    // tapと名前が付いている要素を不透明度ゼロにするアニメーション
[anim name="tap" opacity="255" time="600" effect=""]
    // tapを不透明度マックスにするアニメーション

実行してみると、「tap」と描かれている絵が表示され、段々と消え、段々と表示される、という感じになります。
イメージとしては合っていますが、これだと一度しか点滅しません。[anim]タグをコピペした回数だけ、点滅を繰り返すことができますが、それだとコピペ回数を上回ると点滅しなくなりますし、間抜けな記述になりますね。(ギュウギュウなのに間抜けとは)

アニメーションを繰り返させたいときは[keyframe]タグを利用する。

[keyframe]タグで繰り返すアニメーションの内容を定義して、

[keyframe name="blink"]   // blinkという名前のキーフレームアニメーションを定義
    [frame p="45%" opacity="0"]
        // 0-45%の時間を掛けて、不透明度をゼロにする
    [frame p="90%" opacity="255"]
        // 46-90%の時間を掛けて、不透明度をマックスにする
[endkeyframe] // ここまでがキーフレームアニメーションblinkの内容

[kanim]タグで実行します。

[image layer="" name="tap" storage="tap.png"]
[kanim name="tap" keyframe="blink" count="infinite" time="1300" delay="200" easing=""]  // キーフレームアニメーションblinkの実行

p="45%"というのは、実行時に指定したtime="1300"のうちの45%の時間、つまり585ミリ秒間を、不透明度ゼロにするアニメーションに割り当てるという意味になります。
p="90%"というのは、実行時に指定したtime="1300"とうちの46%〜90%の時間、つまり次の586ミリ秒間を、不透明度マックスにするアニメーションに割り当てるという意味になります。
p="90%"でアニメーションを終わらせることで、90-100%の時間、つまり最後の130ミリ秒間はtap画像が表示されたままの状態を維持できます。常に動きっぱなしにならないようにすることで過度にうるさい画面にならず、見やすくなります。好みです。

pの値 経過時間
(ミリ秒)
tapの状態
0 0 [image]タグにより画像が表示されている状態
1 1 消え始める
22 286 半透明な状態
45 585 完全に透明になって見えなくなる
46 586 表示され始める
67 871 半透明な状態
90 1170 完全に見える状態になる
100 1170〜1300 tapが完全に表示されたままの状態
(何もしない)

count="infinite"とすることで、100%までいくとまた0%に戻ってアニメーションが始まるのを繰り返します。
[kanim]タグの方で時間を指定するので、easingを指定することでいつもの演出でtapが表示されたと見せかけてバビュンと消えて待ったを掛ける演出などもできそうです。directionを指定すれば巻き戻し演出もできます。
delayを指定することで、tap画像が現れた途端に消え始めたりせず、プレイヤーに画像を見る時間を十分に与えてから消え始めるようにできます。

画像/文字の表示及びキーフレームアニメーションの実行を内容としたマクロを定義することもできますが、私は章の終わりに決まった演出を表示させるマクロを組んでいるので、その中に組み込んでいます。
[stop_kanim]タグは、シナリオファイルをジャンプする際にレイヤー解放するようにしているため、私は使用していません。