本編の実装はほぼ終わったので小ネタを書きます。
タイトル画面のボタン、ふわっと出したい。
※画面は開発中のものです
という実装がこちらです。
[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]
で待ち時間を入れながら全部のボタンをアニメーションします。
以上!
タイトル画面をいい感じに作りたいけど、まずボタンの見た目をいい感じに作れないので苦しんでいます……。
私が装飾をつけるとダサすぎて駄目なので、かっこいいフォントの力に頼るしかない。
おわり