【ティラノスクリプト】マウスカーソルが載ったときに何かする

ティラノスクリプトというかjQeryの話です。最近めっちゃ使うようになったのでメモがてらまとめておきます。
いろんな方法があると思いますが、ここではhoverメソッドを使ってマウスカーソルが載ったときの処理を実装してみます。他はなるべくタグを使って頑張ります。

f:id:onigirimgmg:20170605004103g:plain

DEMO（Chrome推奨）
hover_sample.ks（※Dropbox）

サンプルに収録されてる素材しか使っていないのでコピペすれば動く……はず。
以下ざっくりとした解説です。

[button graphic="../fgimage/chara/akane/normal.png" target="*character_select" name="character_icon,akane_icon" x=500 y=50 width=150 height=150 fix=true]
[button graphic="../fgimage/chara/yamato/normal.png" target="*character_select" name="character_icon,yamato_icon" x=700 y=50 width=150 height=150 fix=true]

[anim name="character_icon" opacity=0 time=0]
[anim name="character_icon" opacity=255 time=500]

この部分でボタンを表示しています。ボタン画像は立ち絵をベースにCSS（後述）でトリミングやら背景色やら角丸やらを設定しました。なのでgraphicには立ち絵のパスを指定しています。
今回はボタンをクリックしても何も起きないようにしたかったので、fixをtrueにしてジャンプ先のラベル（*character_select）で[return]しています。
[anim]タグはボタンをふわっと表示させるためのものです。透明にした直後に500ミリ秒かけて不透明にしています。

[image layer=0 name="akane_select,back" storage="../image/config/c_btn.png" x=0 y=230 width=960 height=250]
[image layer=0 name="akane_select" storage="chara/akane/normal.png" x=50 y=40]
[ptext layer=0 name="akane_select,select_text" text="【あかね】" x=380 y=250 size=42 time=0]
[ptext layer=0 name="akane_select,select_text" text="なぜかゲーム制作に詳しい女の子。<br>楽して儲けようとする人には厳しい。<br>※個人の見解によるものです" x=400 y=320 size=32 time=0]
[anim name="akane_select" opacity=0 time=0]

ここの部分でマウスカーソルが載ったときに表示する要素を記述しています。
上から順番に、

半透明の黒い帯（configの透明画像を再利用してCSSで背景色を指定してる）
キャラクター画像（立ち絵をそのまま表示）
キャラクター名（timeパラメータを指定しないと[anim]が効かないっぽい）
説明文（同上）
要素をいったん透明にするための[anim]

です。全部透明な状態で表示されています。

$(".akane_icon").hover(
	function(e) {
		$(".akane_select").css("opacity","1")
	},
	function(e) {
		$(".akane_select").css("opacity","0")
	}
);

この部分でマウスカーソルが載ったときの動きを設定しています。載ったときは要素を不透明にして、離れたときは要素を透明に戻しています。

参考：jQuery：マウスポインターが要素に出入りした時の処理を実装するには？（mouseover、mouseout、mouseenter、mouseleave、hover） - Build Insider

最後にCSSで色々見た目の設定をしました。以下のコードをtyrano.cssの最後とかにコピペしてください。

.character_icon {
	object-fit:none;
	border-radius:10px;
	box-shadow:5px 5px 5px rgba(0,0,0,0.5);
	-webkit-filter:grayscale(100%);
	filter:grayscale(100%);
}
.character_icon:hover {
	-webkit-filter:grayscale(0%);
	filter:grayscale(0%);
}
.akane_icon {
	object-position:50% 25%;
	background-color:#ffa500;
}
.yamato_icon {
	object-position:35% 25%;
	background-color:#1e90ff;
}

.select_text {
	cursor:default;
	text-shadow:2px 2px 5px black, -2px 2px 5px black, 2px -2px 5px black, -2px -2px 5px black;<feff>
}
.back {
	background:rgba(0,0,0,0.5);
}