![見出し画像](https://assets.st-note.com/production/uploads/images/103325040/rectangle_large_type_2_218b99e3c3a41048110a6c3f552a9022.png?width=1200)
メニューを作る(2)・ナビゲーション(Unityメモ)
ナビゲーションをつけました。
前回のまとめ
前回は大体のレイアウトと「スロット」間の遷移を実装しました。
例えば「出撃する」というシーンであれば、派遣するパーティ・出撃先のマップ・受ける任務の情報がスロットにあたります。
GUIの操作では、項目を選択後Goでスロットに遷移します。
![](https://assets.st-note.com/img/1681686883532-rPIRf0NMdA.png?width=1200)
このままではメニュー階層間の遷移ができず不便なので、メニュー階層を追加しました。
スロットの階層とナビゲーション
スロットの仕様について列挙します。
・プレイ中の行動をユースケースとして分類。ユースケースはいわゆるシーンに近い
・ユースケースに必要な情報をスロットとして整理。ユースケース自体もスロットの一種
・スロットはそれぞれいくつかの操作を持つ。一覧からの選択、フィルタなど。「別スロットへの遷移」も操作として持たせる
・スロットは木構造をとる。つまりスロットは子のスロットを持ちうる
最後の項目がポイントです。GUIでもスロットの階層を表示する必要があります。加えて、階層間の移動を操作しやすく実装する必要があります。この辺りの事情はWebサイトのナビゲーションの設計と似ているように感じます。
![](https://assets.st-note.com/img/1681690837978-HU2gYyPKWN.png)
スロットの階層表示では、子を持つスロットの場合に、子を表示しつつ親(中間ノード)と子のどちらを操作するのか一目で分かるような表示を考えるのに頭を使いました。というのもこのGUIの場合、親も子もそれぞれ別の操作を持つので、操作を行う主体がどのスロットなのか把握できないとGUIが使いにくいためです。
配置や色ではどうにもならなかったので、実世界のファイル整理を当てはめてみると少し区別しやすくなりました。そう、インデックスラベルや付箋を貼って資料を探しやすくするやつです。
![](https://assets.st-note.com/img/1681720042336-g8KIrzs3od.png?width=1200)
選択中のスロットにインデントをつけて区別することにして、配置をアイデアふせん上で試行錯誤してみました。
![](https://assets.st-note.com/img/1681794301925-UlmJcuAJYM.png?width=1200)
ナビゲーションの実装
メニューのナビゲーションの実装で苦労した点を挙げます。
・スロット階層の決定方法
・子スロットの表示範囲→操作中のスロットの兄弟を表示する
・スロット階層の表示範囲→操作中のスロットの親までを表示する
・ナビゲーション時に保持するスロット→操作中のスロットそのものではなく、親(中間ノード)と、子の兄弟のインデックスに分けて保持した
・同じボタン入力に対して遷移の動作を切り替える→状態遷移器を使用する
スロット階層については、スロットの木構造と現在のスロットが分かれば、現在のスロットからルートへたどっていけばスロット階層は一意に求められます。
子スロットとスロット階層との表示、保持するスロットの単位については、本GUIの制約が関係しています。
例えば「パーティを組む」スロットの場合、パーティに関するスロットは「ユニットの配置」(陣形)・「ユニット」といった子スロットを持ちます。パーティのスロットを埋めるために「配置」や「ユニット」などの子スロットの兄弟を切り替えながら作業したいので、子のスロットは兄弟をタブのように常に表示しておきたいです。
次に、子の兄弟を表示しつつスロット階層を表示したいので、スロット階層は親までを表示することにしました。
![](https://assets.st-note.com/img/1681719567166-vhWkxGgzET.png?width=1200)
ナビゲーション時に保持するスロットの単位についても、兄弟の切り替えの実装の都合です。ボタン入力では兄弟のインデックスを指す定数を取得し、GUI側では親を保持しておきます。そうすると、操作中のスロットをその兄弟に切り替えるときに子の配列をインデックスで参照すればよいので、実装が楽になります。
ボタン入力の処理については、遷移先のスロットの種類によって、同じボタン入力でもボタン類の更新処理が異なります。そのためスロットの種類を状態に当てはめ、状態遷移器を用いて処理を切り替えることにしました。
![](https://assets.st-note.com/img/1681719497208-dZt0xn1qHR.png?width=1200)
出来たもの
前回はGIF動画を作ってみたのですが、いまいち分かりづらいので静止画で出します。いずれもボタンを選択してからGoした直後の画面表示です。
![](https://assets.st-note.com/img/1681794819660-11tUmdovA4.png?width=1200)
出撃ユースケース(シーン)を表示。
設計時はユースケースとして考えたが、分かりやすさのためGUIではシーンと表示。
パーティ、マップ、任務の3個の子スロットを持つ。
![](https://assets.st-note.com/img/1681794932467-m0pYPTvG9O.png?width=1200)
ちなみにこの状態で右側の「出撃」を選択してGoすると、上記の出撃ユースケースに移動
![](https://assets.st-note.com/img/1681795409801-UoGU0gsQRM.png?width=1200)
![](https://assets.st-note.com/img/1681795620000-E2ktgwIer9.png?width=1200)
ホームも各スロット表示と同じレイアウトです。
ホームでは各ユースケースを選択します。右下のボタンで移動先を選択する、という操作をホームでも統一しているので、ボタンの種類が右上と右下でかぶっています。ホーム限定で右上の方は消した方がいいかも。
![](https://assets.st-note.com/img/1681795943309-7utOUmGJ32.png?width=1200)
他のユースケースでも表示は同様です。
![](https://assets.st-note.com/img/1681795720339-Cd9w7YiV00.png?width=1200)
この状態で右上の出撃ボタンを選択してGoすると、ホームに戻らず出撃ユースケースに飛べる
次の実装
次はユニット一覧の表示を実装しようと思います。ビューやコンテントに続いて、ゲーム固有のモデルの扱いに入っていきます。
この記事が気に入ったらサポートをしてみませんか?