ティラノスクリプトのボタンをふわっと出す

本編の実装はほぼ終わったので小ネタを書きます。

タイトル画面のボタン、ふわっと出したい。

※画面は開発中のものです

という実装がこちらです。

[button name=button_start x=135 y=230 graphic="title/button_start.webp" enterimg="title/button_start2.webp" target="gamestart" visible=false]
[button name=button_load x=135 y=320 graphic="title/button_load.webp" enterimg="title/button_load2.webp" role="load" visible=false]
[button name=button_cg x=135 y=410 graphic="title/button_cg.webp" enterimg="title/button_cg2.webp" storage="cg.ks" visible=false]
[button name=button_replay x=135 y=500 graphic="title/button_replay.webp" enterimg="title/button_replay2.webp" storage="replay.ks" visible=false]
[button name=button_config x=135 y=590 graphic="title/button_config.webp" enterimg="title/button_config2.webp" role="sleepgame" storage="config.ks" visible=false]

[iscript]
$(".button_start").css("opacity", 0);
$(".button_load").css("opacity", 0);
$(".button_cg").css("opacity", 0);
$(".button_replay").css("opacity", 0);
$(".button_config").css("opacity", 0);
$(".button_start").show();
$(".button_load").show();
$(".button_cg").show();
$(".button_replay").show();
$(".button_config").show();
[endscript]

[anim name=button_start opacity=255 time=600 left=125 effect="easeOutQuad"]
[wait time=200]
[anim name=button_load opacity=255 time=600 left=125 effect="easeOutQuad"]
[wait time=200]
[anim name=button_cg opacity=255 time=600 left=125 effect="easeOutQuad"]
[wait time=200]
[anim name=button_replay opacity=255 time=600 left=125 effect="easeOutQuad"]
[wait time=200]
[anim name=button_config opacity=255 time=600 left=125 effect="easeOutQuad"]

[s]

解説します。

まず [button]visible=false を指定し、非表示状態で出します。
また [anim] 等で使うために name 属性も指定しておきます。

しかしティラノスクリプトのタグでは visible=false で出したボタンを表示するタグが見当たりません。
そこで [iscript] で JavaScript を直接書きます。

ティラノスクリプトの実体(?)は jQuery なので jQuery の文法で書いてもいいし、素の JavaScript で書いてもいいでしょう。
私は文法が混在するのは嫌なので jQuery で書きました。
name 属性で指定した値はクラス名になるので、クラス名で要素を取得しています。

[iscript] の中身は、最初に非表示状態のボタンの透明度を 0 にします。
そしてボタンを表示します。ボタンには display: none が指定されている状態なので、jQuery なら show() で表示できます。
この時点では透明度が 0 なのでボタンは見えないままです。

[endscript] で JavaScript を終了し、次に [anim] でアニメーションしながらボタンを表示します。
透明度を 255 にしつつ微妙に左に移動しています。
上から順に表示するよう、[wait] で待ち時間を入れながら全部のボタンをアニメーションします。

以上!


タイトル画面をいい感じに作りたいけど、まずボタンの見た目をいい感じに作れないので苦しんでいます……。

私が装飾をつけるとダサすぎて駄目なので、かっこいいフォントの力に頼るしかない。

おわり