ティラノのホバー要素のトラブルあれこれ
選択肢にマウスカーソルが乗った時に、ホバーで画像を出す方法。
選択肢の背景が変わるのは[button]タグに実装されていますが、そうじゃなくて別の場所に画像を出すパターンです。
[iscript]で実装できることまではわかりました。
jQueryで hoverを使う場合の例。参考にさせていただきました。
jQueryで mouseover,mouseoutの場合
以下のサイト様からanimateメソッドのところを参考にしました。
そしてできたのがこれ。animateの縦移動とイージングのeaseOutBackを使ってホバーで画像がひょこっと飛び出すようにしています。
;ボタン定義
[button storage="sentaku.ks" target=*jumpjyunbi1 preexp=1 exp="f.sentaku = preexp" name="sentaku1,sentaku" graphic="tips/hukidashit.png" fix="true" auto_next="false" x=380 y=165 ]
[button storage="sentaku.ks" target=*jumpjyunbi2 preexp=2 exp="f.sentaku = preexp" name="sentaku2,sentaku" graphic="tips/hukidashit.png" fix="true" auto_next="false" x=380 y=396 ]
;選択肢1の予測アイコン表示
[image layer=6 name="yosokuhover1,yosokuhover11,yosokuhoverall" folder="image" storage='tips/yosokub.png' x=180 y=130 time=0 wait=true]
[image layer=6 name="yosokuhover1,yosokuhover12,yosokuhoverall" folder="image" storage='tips/yosokub.png' x=180 y=310 time=0 wait=true]
[image layer=6 name="yosokuhover1,yosokuhover13,yosokuhoverall" folder="image" storage='tips/yosokub.png' x=180 y=490 time=0 wait=true]
;選択肢2の予測アイコン表示
[image layer=6 name="yosokuhover2,yosokuhover21,yosokuhoverall" folder="image" storage='tips/yosokub.png' x=180 y=30 time=0 wait=true]
[image layer=6 name="yosokuhover2,yosokuhover22,yosokuhoverall" folder="image" storage='tips/yosokub.png' x=180 y=210 time=0 wait=true]
[image layer=6 name="yosokuhover2,yosokuhover23,yosokuhoverall" folder="image" storage='tips/yosokub.png' x=180 y=390 time=0 wait=true]
[anim name="yosokuhoverall" opacity=0 time=0]
;ホバー処理
[iscript]$(".sentaku1").on({
mouseover: function(){
$(".yosokuhover11").css({position:"absolute",top:130});
$(".yosokuhover11").animate({top:'30px',opacity: 1}, 300 ,'easeOutBack');
$(".yosokuhover12").css({position:"absolute",top:310});
$(".yosokuhover12").animate({top:'210px',opacity: 1}, 400 ,'easeOutBack');
$(".yosokuhover13").css({position:"absolute",top:490});
$(".yosokuhover13").animate({top:'390px',opacity: 1}, 500 ,'easeOutBack');
},
mouseout: function(){
$(".yosokuhover1").animate({opacity: 0}, 200);
}
});$(".sentaku2").on({
mouseover: function(){
$(".yosokuhover21").css({position:"absolute",top:130});
$(".yosokuhover21").animate({top:'30px',opacity: 1}, 300 ,'easeOutBack');
$(".yosokuhover22").css({position:"absolute",top:310});
$(".yosokuhover22").animate({top:'210px',opacity: 1}, 400 ,'easeOutBack');
$(".yosokuhover23").css({position:"absolute",top:490});
$(".yosokuhover23").animate({top:'390px',opacity: 1}, 500 ,'easeOutBack');
},
mouseout: function(){
$(".yosokuhover2").animate({opacity: 0}, 200);
}
});
[endscript]
これを何のために作ったかというと、選択肢の結果の予測画像をホバーで出したかったためです。
なので、実際の利用時には、storage='tips/yosokub.png'のところをstorage=&f.s1yosoku[1]や&f.s1yosoku[2]などとしてあります。[eval exp="f.s1yosoku[1] = 'tips/yosokub.png'"]という形で画像のファイル名を変数に入れることで、条件次第で常に違う画像をホバーさせることができます。
実装はできましたが、問題が発生しました。
ホバー画像が出ない時があるのです。
原因究明に時間がかかりましたが、原因は[iscript]にたどり着く前に「文字送り」をめちゃくちゃ連打することなのがわかりました。
連打プレイはありえないことではありません。早く先を読みたいと思ってたり、リプレイで飛ばしたいテキストが分かってるときなどに、キーボードのリターンキー連打で発生します。
また、文字送りをマウスホイールに割り当てて、マウスホイールを素早く転がしながらテキストを読んでいると、かなりの頻度でこの不具合に突き当たります。
解決法その1
連打ができないようにすればいいのではないか？と思い、[iscript]の手前で入力を殺すことにしました。つまり、文字送りの入力をできなくしてから[iscript]の処理を行うのです。
入力を止める機能はデフォルトでは実装されていません。なのでいろいろ検索したところ、config.tjsをいじる方法が公開されていました。
ティラノスクリプトマウス＆キーボード操作の改造 · GitHub
こちらを参考に特定のフラグがたった時に入力をできなくさせたのですが、それでも解決しませんでした。
入力ができないというよりも、入力後にfalseを返して何もしない状態にするようですが、それでもダメなようです。(原因よくわからない）
解決法その2
[iscript]じゃない方法でホバーを出します。[button]のenterimgを使います。通常はボタンの画像を変えるだけですが、下記のサイト様で、buttonタグのホバー時にx,y座標を変更するプラグインが公開されていました。これによって、ボタンと別な場所にホバー画像を出すことができます。
この方法だと、[iscript]と違って、文字送り連打をしてもホバーがしっかりと働きます。なので不具合の原因がiscriptにある、というのが確認できました。
ちなみにiscriptの中身を、mouseoverではなくhover使用にしたり、animateを別な効果にしたりしてもやっぱり不具合は出るので、iscriptを使うことそのものが問題であると感じています。
さて、このマクロで一応解決はしたのですが、わたしの狙ったような挙動にはならなかったので、この方法も使わないことにしました。（ボタン画像を離れた場所に出すと、いったんenterimgが外れた感じになるため）
解決法その3
以前から感じていたのですが、ティラノでは動的に何かをしようとすると、スクリプトが不具合を起こすことがあります。例えば、文字の高速送りをctrlキーに割り当てて早送りするのはノベルゲーでは基本的なフォーマットですが、これをやると、わりとよくエラーが出ます。音楽が再生されないのはしょっちゅうですが、ときにはスクリプトを謎に飛び越えたりもします。
これと同じような仕組みで、文字送りキー連打が不具合を引き起こしてる可能性があります。
（ちなみに連打されているときに「テキスト＋クリック待ちタグ」があるときは大丈夫です。
5回分くらいの「テキスト＋クリック待ちタグ」が用意されていると、連打しても、クリック待ちのスタック的なもの（？）を消化して、[iscript]がきちんと処理されます。
ところが、「テキスト＋クリック待ちタグ」が一回分くらいしかないときに連打すると、[iscript]が働かなくなります。）
内部的な仕組みはわかりませんが・・。
とりあえず、動的に何かをするとよくない＝高速で文字を表示させるのが悪いのかもしれない、と思い、文字表示を遅くしました。
前回のエントリでconfig.tjsの文字速度を早くしてあったので、これをデフォルトの速さに戻しました。
しかし、解決しませんでした。
仕方がないので解決はあきらめました。
こちらにできることとしては、
[iscript]の前には、「テキスト＋クリック待ちタグ」を5回分くらい確実に用意すること。
これによって、連打されても文字送りのスタック的なもの（？）を消化させるようにして、[iscript]が働きやすくします。
あとは、readme的なもので対処です。つまり、「ctrlで早送りをすると不具合が出がちです。また、マウスホイールで文字送りのとき、マウスホイールをたくさん回しすぎると、ホバー画像が出ない時があります。リターンキーでの文字送りも、連打しすぎるとホバー画像が出ない時があります」
こういった感じで何とかするしかありません・・。
一番肝心なのは、動的要素のあるゲームはティラノで作らないこと、だと感じました。
