【ティラノスクリプト】ksでメニュー画面を作り、指定したキーから開くようにする備忘録
ウウーッとんでもねえ～～～！
これは試行錯誤した日記みたいなものです。方法を求めて読むと大変なことになる（？）ので使えそうなとこだけ使ってください。
素人なので3日くらい掛かりました おげげ
動機：自由にメニュー画面を作りたいぞい
そのような動機があって（？）ksでメニュー画面を作ることにしました。
というのも、わいがjavascriptからっきしワカランなため、やりたいことの諸々がhtmlからではうまくいきませんでした。
（素のksならhtmlとcssで記述した方が断然はやいのだが……）
ゲームを休止する[sleepgame]および復帰させる[awakegame]があり、それぞれ[showsave]などの単体のタグや[button]ではroleの役割でも指定できるため、自作は可能ではないかと思いついた所存です。
01：雛形を用意
とりあえず、変遷するページの背景やボタンなどを用意。
裏でゲーム画面を見せたかったので、背景の不透明度を下げて後ろが見えるようにしました。
コンフィグは後で作ります
02：[sleepgame]する
もともと表示していたbutton群の中のメニューボタンを、fix="true"にして置き換えます。role="menu"は消す。
私の場合、メニューボタンをマクロにまとめて入れ込んでいたのでそこを変更しました。
next="false"の属性を設定したかったため、とりあえずrole="sleepgame"ではなくジャンプ先に[sleepgame next="false"]のタグを設置しました。buttonに設定する方法あるかもしれんけどわからん。
※なおこの方法は間違っていました。後ほど解決方法を書いております。
必要に応じて整地する
変遷した画面は、元の画面に被さるようにしたかったため、一番上に新しくlayerを用意しました。
作中では前景0/1/2のレイヤーを使っていたので、前景3を用意。
そこへ背景に使いたい画像を表示（レイヤーモードしたかったけどブラウザによっては対応してないみたいなのでいったん断念）、すでに表示されているボタンを片付けるため[cm]と[clearfix]。
ここは必要に応じてレイヤーに表示された画像も片付けます（私のように被せるのではなく、キャラ絵とか出てる画像を消したい場合は消す）。一気に画像消す方法わからんと思ったら初期config画面の上の方見たらコピペで出来ますぞ。
前景レイヤに重ねた場合、messageレイヤがぶち抜いてくるため、私はmessageレイヤのみ消去しました。
03:[awakegame]する
[sleepgame]をすると、必ず[awakegame]もしくは[breakgame]しなければなりません。今回は前者。
ページを閉じるbuttonを設置し、ゲームに戻れるようにします。
04：世は大バグ時代
どうしたことだ！？なぜかバグる
ところが、buttonを押すとフリーズしてしまうという状況が発生。
一瞬消えるものの、また同じ変遷先のページがループして表示され、フリーズするということに。コンソールやデバッグツール見てもエラーが表示されておらず、何がどう詰まってるかわからん。
そこで脳のあらゆる記憶を呼び覚ましていたところ、「あれ？fixだかなんだかって別storageに飛ぶ必要があったんじゃなかったっけ？」と不確かな記憶がモワモワ出てくる。ソースはわすれた
（公式サイトにあるコンソールを見る限りではsleepgameの移動先を同じks内でも良さそうなのだが、同じにするとどうしても動かない。また省略しても動かない）
以前画面のホーム画面を全体的にhtmlレイヤで構成した際にも、ジャンプを挟むとバグり散らかすということがあった。（このときはジャンプ先の処理をそのまま書いてやるとうまくいった）
そこで[sleepgame]タグで飛ぶ先を別storage（ks）に分けたところ、一度は元の画面に戻れるように。
しかしnext="false"がちゃんと機能していないのか、文章が進んでまう。
[sleepgame]の下に[s]を置くとフリーズ。キーで開いたメニュー画面を通ると同じ画面なのに挙動が同じではなく、フリーズ。
などトラブルがまためちゃめちゃ出てくる。ﾅﾝﾀﾞｺﾚﾜ まだそんなごちゃごちゃ中身書いてないのに！！！ただ行って戻りたい、それだけのことなのに！！！！！！！！！！！！！！！
とりあえず一番目下の疑問は、next="false"が機能していないこと。間で特別変わったタグや処理もしていないのに、なぜか反映されない。
テスト編：バージョンを上げてみる
もしかしたら本体のバグでは！？と思い、現在触っている安定版（521f）から最新版（521k）にデータをコピーし、再度検証。
うーん、同じだ。[sleepgame next="false"]→[awakegame]で進んでしまう。
テスト編：別の角度から検証
次に、テストページを作成。
ページの遷移などを行わず平地でタグの検証を行い、ちゃんとオプションが機能しているのか確認する。
1：文章の間に[sleepgame next="false" target="*testdayo"]を設置し、遷移先で数度のクリックを挟み[awakegame]をする。
これはちゃんとうまくいった。[sleepgame]前に表示されていた文章が再度表示された。バックログも重複していない。
2：簡単なジャンプを挟む
次に、簡単な操作をともない[awakegame]に戻る。今回は遷移先でglinkの選択を行ってみる。
glinkの遷移先を[awakegame]にして検証。これもうまくいった。
つまりオプション自体はちゃんと動くのだ……ﾄﾞｳｼﾃ……ﾄﾞｳｼﾃ……
3：遷移先を別ksにする
結果的に同じks内でsleepgameは使えたが、それじゃなんで……？
そこらへんはよくわからないが、とりあえず同じ条件にしてみる。*testdayoの中身を別ksに。
この場合もうまくいった。sleepgameの遷移先がどこであろうと問題ないみたいだ。
4：fixボタンから遷移する
今度はfix属性のボタンから遷移し、起き上がってみることにする。遷移先は先程と同じ別ks。
すると！ 今回のバグの初期段階と同じ現象が起こった。本来ならば[sleepgame]をした場所に戻るはずが、[sleepgame]後の処理にループするように戻ってしまいました。見たことあるぞぉこれぇ～親の顔より見た（大嘘）
このことから、なんかよくわからんけどバグが起こるのはfixボタンが原因の可能性が高いということは言えそうである。
そもそもfixボタンとは？
固定ボタンのこと。シナリオ中で選択肢を選んだりするときとは違って、メニューボタンのように、常に画面内に表示するよう設定されます。
つまり今回のバグは、常駐しているfixボタンが押された瞬間に立ち戻ってしまうため、繰り返し遷移先に向かってしまうということなのだろうか？
とはいえ初期段階で起こったそのバグは、遷移先を別ksにすることで収束したかのように見えたが……？
解決編：過去作の確認
そういえば過去作で、コンフィグをfixボタンに設定していたはずでございます。内容を確認した。
このときはプラグインをお借りしていたため、その中身を確認することになる。
コンフィグへのボタン自体はrole="sleepgame"で行われており、特にnext="false"は指定されていないけれど、問題なく元の画面に復帰している。はえー、不思議なものじゃ。
今度はconfig.ksを見てみる。特に変わった処理はない……気がする。もともと同梱されている初期のconfig.ksと復帰の仕方に変わりはない。はて？
ダッタラサァ！
真似をしてみます。遷移先でsleepgameしていたのを、roleに差し替える。戻れたじゃねえかよおおおおおおおお
今までのあれこれはなんだったの？ 私はnext="false"に踊らされていたというのか……
つまり結果的に、next="false"を記載しなくてもrole="sleepgame"から復帰したら元の画面に戻れるということである。
ということは？：role="sleepgame"はコンフィグ等に使用されることを想定しており、このようにfixボタンからの遷移も出来てそのまま復帰できる。一方で[sleepgame]は平地で使われることを想定しており、fixボタンを通すとバグる。
そういうことだろ！ｼﾞｬﾝ（どぶろっく）
05：キーコンフィグでksを設定
私の大好きなゲームとおそろいにしたかったため（私は好きなものに対してキショめのヤンデレである）、前述の通り、F1キーでメニュー画面、F2キーでバックログを表示することに決めた。
これもありメニュー画面の設定は難航したともいえる。
「sleepgame使えるよ」？
キーコンフィグの設定ページには、こんなことが書いてあった。
★sleepgameについて
キーコンフィグで[sleepgame]を発動することができます。
以下のように指定してください。
sleepgame storage=config.ks target=start
しかしこれを設定すると、先程まで大乱闘していた[sleepgame]と同じ挙動になってしまうのじゃ。
つまりnext="false"が効かず、[awakegame]するとシナリオが進んでしまう。
しかしこうも書かれていた。
★関数の直接指定
上記キーワードの代わりにJavaScriptの関数を指定することもできます。
(指定例)
"Enter": function () {
alert("Hello!")
},
つまりキーコンフィグからjavascriptを指定できる。
なんとどういうわけだかTYRANO.kag.ftag.startTag("sleepgame", {next:false})は効くのだ！
（これが効くならなんでそのタグである[sleepgame]は効かないんだよ……）
そういうわけで、role="sleepgame"と同じ挙動がF1キーで設定できた。steam版ダンガンロンパくん、これでおそろいだね…♡♡ﾁｭｯ F2にバックログを入れたのもおそろい ﾆﾁｬｱ
バックログについてはHTMLの表示領域でスクロールする必要があるため、上行こうとしたらバックログ表示されるのがダルかったので場所変えた。でも上ホイールでバックログ出ないとか殺されたいんかという人もいるだろうしここは難しい。
とりあえず妥協
同じキーを押したら画面を閉じるようにしたかったが、javascriptがよくワカラン私には無理だった。
多分キーにsleepgameを設定してしまっている（sleepgame中にsleepgameは出来ない）ので、二重に押すことが出来ないのだと思われる。でも[sleepgame]使えないからよォ～～！遷移先で設定できねんだよォ～～！
ここについては後々機会があれば有識者に意見を伺いたいところ。まあバッテン押したら閉じれるしとりあえずいっか。
06：世は第二次大バグ時代
ここまでで、とりあえず「メニュー画面を開いて元の画面に戻る」という基本的なことは出来た。
次に必要なのは各ボタンをきちんと機能させることであります。
セーブ機能くん
ここらへんくらいからよく覚えてない。というのもいろんなことを試した結果、なんか知らん間にちゃんとなっていたからである。
最初、セーブ画面を呼び出したらメニュー画面のままセーブされてしまうので、これをどうにかしようとした……と思う……
でも結果的に、なんか、セーブボタンを押したら下に敷いていたメニュー画面が消えるようになっていた。勝手に。
途中経過では、変数を持たせて[awakegame]したあとmake.ksで振り分けようとしていた。ところがなんかめちゃめちゃ重くなったり復帰後うまいこと進まないという現象が起きた。重いから[clearstack]したらifの数が合わなくなったり、[showsave]のアップデートで[showsave]後にクリックを挟む形式になったこともあり使い勝手が悪かった。
最終的な解決法では普通に[button role="save"]を指定しただけで、「あれ？ これでうまくいかなかったから試行錯誤してたんじゃなかったっけ？？」と思ったがもうホント覚えてない。記憶喪失
これを指定したのも、もうメニュー画面でセーブしてもいいかな……（弱音）と思い始めたからである。why？
覚えてないが、通常のメニュー画面のセーブと同じ挙動になったので、別に難しく考える必要はなかったということです。ね。
ロード機能くん
これについては現状、上のセーブ項目で試した方法を用いている（[awakegame]してからmake.ksに振り分け条件を記載）。
role="load"だとうまくいかないみたいです。セーブでの試行錯誤は無駄ではなかったんや。ここにきてなぜか感動。
ちなみに[awakegame]するときはmake.ksを通ります。し、ロード時も同様。
07：とりま完成
あとのbacklogやtitleはroleで指定したら問題ないですハイ。やったぞ！！
コンフィグはまだ画面作ってないから後でやるとして、ひとまず完成しました。メニュー画面らしくなった。デザインとかは後で変えるかもだけど。
ついでに背景はcssアニメを入れてキラキラに。
しばらくメニュー画面のデザインについて悩んでいたので、まあ自分の触れる範囲で組めたのはでかいと思う。後々手を入れるためにも……まあこれでいくかもしれませんが……
問題点としては、その同じF1キーで画面閉じたいがやり方わからんというのと、クリックしてメニュー画面に遷移して戻ってきたらメニューボタンのホバーアニメがなんか知らんが消えないということであります（当たり前だがF1キーからいくとならない、ホバーしとらんから）。
一度clearfixしてから再表示するとおとなしくなっている。
これはまあホバーアニメ切るなりなんかやり方試すなりして後々対処したい。
追記(23/10/01)：ホバーが消えない件についてはメニューを閉じるときに変数を持たせて、make.ksで[clearfix]したあと再びメニューボタンを出すようにしたら解決しました。なんか不具合出たらまた直します。
またなんか問題や進捗があれば更新するかも。
↓動画版
うおお三日くらいやってたァ…🥹👍
— 紅屋都代丸 (@bnyty0) September 22, 2023
素人ながら自分用に備忘録書いたのでなんか…こう…参考になればぜひ…#ティラノスクリプト
【ティラノスクリプト】ksでメニュー画面を作り、指定したキーから開くようにする備忘録｜紅屋都代丸 #note https://t.co/qLrMuF3QIP pic.twitter.com/CNppDAoMJz
この記事が気に入ったらサポートをしてみませんか？