見出し画像

【ティラノスクリプト】クリック待ちグリフをフェードインさせる

今回はあっさり記事です。
ティラノビルダーでも同様の編集で実装可能です。

CSSの編集

プロジェクトフォルダ内、「tyrano/tyrano.css」の適当な位置に下記のコードを追記します。

/*---------------------------------------------------------
 animation-nameにはtransタグのmethodや、
 maskタグのeffectと同じものが大体使えるよ
 fadeInのほかは、fadeInUpやfadeInDown辺りが癖がない感じ
---------------------------------------------------------*/

/* クリック待ちグリフ */
.img_next {
   animation-name: fadeIn;
   animation-fill-mode: both;
   animation-duration:2000ms;
}

/* glyphのfixで設定したクリック待ちグリフ */
.glyph_image {
   animation-name: fadeIn;
   animation-fill-mode: both;
   animation-duration:2000ms;
}

お疲れ様でした。これでおしまいです。
上記のコードではわかりやすいように2000ミリ秒(2秒)かけてフェードインさせていますが、animation-durationの数字を弄ることで変更可能です。

animation-nameを変更するとフェードイン時に様々なアニメーションを設定できるのでゲームの雰囲気に合わせて色々試してみると面白い演出ができるかもしれません。

上記コードのサンプルデモ

ゲームを楽しんで貰えたり、記事やプラグインがお役に立てましたらサポート(投げ銭)を頂けると幸いです!