前回の続きです。
「CSSとクラス（HTMLのclassやKSファイルのname）を使えばボタンや画像の位置を変えることができる」
JavaScriptを使って、CSSで定義したクラスの付け外しができる
という点を知っていれば、前回の記事を読まなくても大丈夫です。
ただし、今回から少し難しくなるので、「その2」を何度か読み返して、色々なコードを試し楽しんでから今回の記事に挑むことをオススメします。
⇩前回
⇩初回
前回は、『プレイヤーがボタンを押したタイミング』で、ボタンや画像が動くようにしました。
これで、ボタンや画像が動く仕組みはわかってきました。よって、次はどのようなメニューバーを作るか、本格的に考えてみます。いわゆる、『設計』という段階です。
この記事では「読みながら全く同じものを作る」というコンセプトでやっているので、使う素材やボタンの配置などもこちらが指定しています。もし慣れてきたら、ぜひ、自分で用意した素材や配置などでメニューバーを作ってみてください。
（一緒に作るものはこんな感じ）
前準備
新規ゲームプロジェクト作成
前回まで使っていたゲームのデータは使いません。新たに新規ゲームプロジェクトを作成してください。
素材のDL
今回使う素材は、以下の通りです。すべて私が作成し、「フリー素材」として配布しているので、ご自由にお使いください。商用利用や、加工利用ともにOKとゆるゆる規約です。再配布のみNGです。事前にDLをしておいてください。
URL: https://grace-you.booth.pm/items/5459220
DLできるのは、以下の通りです。
メニューバー（menu_bar.png）
メニューバーを開閉した時に背景になるものです。200x400です。
メニューバーのボタン（menu_bar_btn.png）
メニューバーの開閉時、クリックするボタンです。200x30です。hover時に色を変えたり、開閉状態に合わせてボタンが変わる方がおしゃれですが、今回は簡略化のため行いません。
SAVE、LOAD、LOG、CONFIG ボタン（menu_bar_save.png など）
（白文字なのでここじゃ見えない！）
特に何の変哲もないただの文字ボタンです。今回は、メニューバーの中にこの4つを並べます。実際は、もっといろいろな機能を入れたいかもしれませんね。
画像の名前が正しいか確認してください。正しくない場合は、必ず画像の名前を修正しておいてください。
必要素材をフォルダに入れる
必要素材を呼び出せるよう、先にフォルダに入れておいてください。
menu_bar.png（メニューバー）
→ data/fgimage/ の中へ
menu_bar_btn.png（メニューバーのボタン）
→ data/image/ の中へ
menu_bar_save.png、menu_bar_load.png、menu_bar_log.png、menu_bar_config.png（SAVE、LOAD、LOG、CONFIG ボタン）
→ data/image/ の中へ
設計していく
どんな動きになるかイメージする
まずは頭の体操。先に、このメニューバーがどんな動きをするのかイメージしておきましょう。頭の中で妄想するだけで大丈夫です。
きっと、このメニューバーは右上にあります。「メニューバーのボタン（MENU）」をクリックすると、メニューバーが右上から下にスライドして出てくる。メニューバーの中には、SAVE、LOAD、LOG、CONFIG ボタンが並んでいる……、みたいなイメージでしょう。
ではさらに、どうやってメニューバーが下にスライドして出てくるのか、プログラミング部分をイメージしてみましょう。
前回の記事では、「ボタンをクリックすると、”slide_btn”というクラスを持つすべての画像やボタンに、”up”というクラスも追加してください」みたいなことをやりました。（ピンとこない方は、前回の記事を読み直してみてください。）
今回も、同じように「ボタンをクリックすると、何かしらのクラスが追加されて、メニューバーがスライドされる〜」みたいなイメージでできそうですね。前回は「slide_btn」と「up」というクラスにしてましたが、今回は「menu_bar」と「open」というクラス名にしましょう。
デフォルトでは上に小さく表示されていて、クリックすると”下に”スライドしてくる〜みたいなイメージですね。
なんとなくイメージできましたか？ ざっくりとイメージできていればOKです！ イメージできていれば、理解しやすいかなと思います。
メニューバーが開いている時の状態を実装してみる
というわけで、イメージしたことを形にしてみましょう。
まずは、メニューバーが開いている状態の実装をしてみます。ここでやったことはそのまま本番に適用されるというわけではなく、あくまで”おためし”でやってみるというものです。
data/scenario/title.ks の[s]の直前に、以下のコードを追加してください。
data/scenario/title.ks
; メニューバー
[image name="menu_bar,open" layer="0" storage="menu_bar.png" width=200 height=auto x=1080 y=-70 visible=true]
[button name="menu_bar,open" target="*click" layer="0" graphic="menu_bar_btn.png" width=200 height=auto x=1080 y=310 visible=true]
[button name="menu_bar,open" layer="0" graphic="menu_bar_save.png" width=170 height=auto role="save" x=1095 y=35]
[button name="menu_bar,open" layer="0" graphic="menu_bar_load.png" width=170 height=auto role="load" x=1095 y=100]
[button name="menu_bar,open" layer="0" graphic="menu_bar_log.png" width=170 height=auto role="backlog" x=1095 y=165]
[button name="menu_bar,open" layer="0" graphic="menu_bar_config.png" width=170 height=auto role="sleepgame" storage="config.ks" x=1095 y=230]
*click
[s]
（本来、メニューバーはシナリオ開始と同時に呼び出しますが、メニューバー開閉ボタンの固定ボタン化などが済んでいないので、タイトル画面にそのまま書いています。あくまで試しているだけ、という点にご注意ください。）
これで、ゲームをプレイしてみてください。
メニューバーが開いている状態になっていると思います。メニューバーの開閉はできませんが、SAVEやLOADは既に行えます。
今回は「読みながら全く同じものを作る」というコンセプトでやっているので、配置なども私の方で提示していますが、もし慣れてきたら、ここで自分好みの配置に調整しておきましょう。
（先にCLIP STUDIOなどのペイントツールで配置を考えておくと楽ですね！ 私はFigmaというツールで配置を考えてから実装し、微調整しています。）
メニューバーが閉じている時の状態を実装してみる
今度は、メニューバーが閉じている時の状態を実装してみましょう。
先ほど書いたコードを、以下の内容に書き換えてみてください。
data/scenario/title.ks
; メニューバー
[image name="menu_bar" layer="0" storage="menu_bar.png" width=200 height=auto x=1080 y=-370 visible=true]
[button name="menu_bar" target="*click" layer="0" graphic="menu_bar_btn.png" width=200 height=auto x=1080 y=10 visible=true]
[button name="menu_bar" layer="0" graphic="menu_bar_save.png" width=170 height=auto role="save" x=1095 y=-265]
[button name="menu_bar" layer="0" graphic="menu_bar_load.png" width=170 height=auto role="load" x=1095 y=-200]
[button name="menu_bar" layer="0" graphic="menu_bar_log.png" width=170 height=auto role="backlog" x=1095 y=-135]
[button name="menu_bar" layer="0" graphic="menu_bar_config.png" width=170 height=auto role="sleepgame" storage="config.ks" x=1095 y=-70]
*click
[s]
どこをどう書き換えたかわかりますか？
書き換えたポイントは、大きく2つあります。
“open”クラスを削除
メニューが開いている状態のコードではname=”menu_bar,open”としていましたが、閉じている状態のコードではname=”menu_bar”としています。開いているときはopenあり、閉じているときはopenなし。わかりやすいですね。
メニューバーに関するもの全てのyの値を -300
メニューバーが閉じている時、メニューバーのボタンなどは上の方にあり、開くと下の方に降りてきます。この点に関しては、ゲームをプレビューしてもらう方がわかりやすいでしょう。
これで、ゲームをプレイしてみてください。
「SAVE」などのボタンが消えてなくなりました。
これ、実際はSAVEボタンが存在しなくなったわけではなく、画面外に配置されているのです。
xやyのパラメータを大きくマイナスにすると、ボタンを画面外に配置することができます。この知識は、メニューバーのみならず、キャラクターを移動させたりする時などにも使えるかと思います。
動かしてみる
では、最後に。配置が大体こんな感じで良さそうかな〜と決まったら、前回やったように、メニューボタンをクリックしてメニューボタンがスライドするようにします。
まずはCSSを設定しておきましょう。
tyrano/css/animate.css の最後に、以下のコードを追加してください。
tyrano/css/animate.css
@keyframes menuOpen {
0% {
transform: translateY(0);
}
100% {
transform: translateY(300px);
}
}
.menu_bar.open {
animation: menuOpen 0.5s forwards;
}
クラス名などが変わっていますが、書いている内容は概ね前回と同じです。
「menuOpenは、Y軸方向に300px動かす指示ですよ」「menu_barかつopenのクラスは、menuOpenの指示に従って0.5秒間動きますよ」というものです。
そしてさらに、メニューバーのボタンも書き換えましょう。
「menu_barかつopenのクラスは、menuOpenの指示に従って0.5秒間動きます」という状態にしたので、やることはあと一つ。「openというクラスをつけるJavaScriptを書く」です。
data/scenario/title.ks
; メニューバー
[image name="menu_bar" layer="0" storage="menu_bar.png" width=200 height=auto x=1080 y=-370 visible=true]
[button name="menu_bar" target="*click" layer="0" graphic="menu_bar_btn.png" width=200 height=auto x=1080 y=10 visible=true exp="document.querySelectorAll('.menu_bar').forEach(function(element) {element.classList.add('open')})"]
[button name="menu_bar" layer="0" graphic="menu_bar_save.png" width=170 height=auto role="save" x=1095 y=-265]
[button name="menu_bar" layer="0" graphic="menu_bar_load.png" width=170 height=auto role="load" x=1095 y=-200]
[button name="menu_bar" layer="0" graphic="menu_bar_log.png" width=170 height=auto role="backlog" x=1095 y=-135]
[button name="menu_bar" layer="0" graphic="menu_bar_config.png" width=170 height=auto role="sleepgame" storage="config.ks" x=1095 y=-70]
*click
[s]
これも、ほぼ前回と同じです。「menu_bar_btn.png」のボタンをクリックすると、「"document.querySelectorAll('.menu_bar').forEach(function(element) {element.classList.add('open')})"」となります。これは、「すべてのmenu_barクラスに、openクラスも追加しますよ」という意味です。
このまま保存して、ゲームをプレビューしてください。
そして、「MENU」の文字部分をクリックすると……
メニューバーが開きました！
これですっごく、スライド式メニューバーっぽくなった！
長くなりましたが、とりあえず今回はここまでです。
補足
まるでもう完成しているかのように見えますが、このメニューバー、まだまだ色々な欠陥があります。
メニューを開いたまま、閉じられない。
このままゲームを始めると、メニューバーの背景の画像だけが残ってしまう（ボタンが消える・固定ボタンになっていない）
そもそもタイトル画面にメニューバーは出さないべき
などなど。
これらを、次回以降で少しずつ解決していきます。
今後も続きを書いていこうと思うので、よければ Xのフォローと該当ツイート（ポスト）のいいねをお願いします。もうすぐ完結すると思います。