見出し画像

マウスカーソルが載ったときの処理を実装

このサイト主さん、全然更新していないのですが(ずっとログインしていないのでしょう)ゲーム制作でこの「マウスカーソルが載せたらパッとキャラクターが現れる」動作を使ってみたいなと、主さんの作ったサンプルファイルをインストールしてやってみました。

次のページに飛んだ際、その画像が消えないということがありましたので追加で方法をここで載せますね。


[hidemenubutton]
[layopt layer=message0 visible=false]

[stop_keyconfig]

[bg storage="room.jpg" time=500]

[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]

[layopt layer=0 visible=true]

[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]

[image layer=0 name="yamato_select,back" storage="../image/config/c_btn.png" x=0 y=230 width=960 height=250]
[image layer=0 name="yamato_select" storage="chara/yamato/normal.png" x=50 y=-20]
[ptext layer=0 name="yamato_select,select_text" text="【やまと】" x=380 y=250 size=42 time=0]
[ptext layer=0 name="yamato_select,select_text" text="あかねのクラスメイト。<br>目立たないが気のいいやつ。猫派。<br>※個人の見解によるものです" x=400 y=320 size=32 time=0]
[anim name="yamato_select" opacity=0 time=0]

[iscript]

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

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

[endscript]

[s]

*character_select
[return]

このコードを、

追加で


[hidemenubutton]
[layopt layer=message0 visible=false]

[stop_keyconfig]

[bg storage="room.jpg" time=500]

[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]

[layopt layer=0 visible=true]

[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]

[image layer=0 name="yamato_select,back" storage="../image/config/c_btn.png" x=0 y=230 width=960 height=250]
[image layer=0 name="yamato_select" storage="chara/yamato/normal.png" x=50 y=-20]
[ptext layer=0 name="yamato_select,select_text" text="【やまと】" x=380 y=250 size=42 time=0]
[ptext layer=0 name="yamato_select,select_text" text="あかねのクラスメイト。<br>目立たないが気のいいやつ。猫派。<br>※個人の見解によるものです" x=400 y=320 size=32 time=0]
[anim name="yamato_select" opacity=0 time=0]

[iscript]

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

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

[endscript]

[s]

*character_select
[return]

*backtitle
[iscript]
// akaneアイコンを非表示にする
document.querySelectorAll('.akane_icon').forEach(function(el) {
    el.style.display = 'none';
});
// yamatoアイコンを非表示にする
document.querySelectorAll('.yamato_icon').forEach(function(el) {
    el.style.display = 'none';
});

// 追加の要素を非表示にする場合
document.querySelectorAll('.その他のクラス名').forEach(function(el) {
    el.style.display = 'none';
});
[endscript]

[cm]
@jump storage="" target=""

javaScriptを使ったらちゃんと消えてくれました。




それでは。


この記事が気に入ったらサポートをしてみませんか?