メニューを作る(2)・ナビゲーション（Unityメモ）

凪野静寸

2023年4月18日 15:45

ナビゲーションをつけました。

前回のまとめ

前回は大体のレイアウトと「スロット」間の遷移を実装しました。
例えば「出撃する」というシーンであれば、派遣するパーティ・出撃先のマップ・受ける任務の情報がスロットにあたります。
GUIの操作では、項目を選択後Goでスロットに遷移します。

前回時点の実装。「出撃」ユースケース→「パーティ」スロットを表示。左下がスロットが持つ操作、右下がユースケース選択、右側が子スロット

このままではメニュー階層間の遷移ができず不便なので、メニュー階層を追加しました。

スロットの階層とナビゲーション

スロットの仕様について列挙します。
・プレイ中の行動をユースケースとして分類。ユースケースはいわゆるシーンに近い
・ユースケースに必要な情報をスロットとして整理。ユースケース自体もスロットの一種
・スロットはそれぞれいくつかの操作を持つ。一覧からの選択、フィルタなど。「別スロットへの遷移」も操作として持たせる
・スロットは木構造をとる。つまりスロットは子のスロットを持ちうる

最後の項目がポイントです。GUIでもスロットの階層を表示する必要があります。加えて、階層間の移動を操作しやすく実装する必要があります。この辺りの事情はWebサイトのナビゲーションの設計と似ているように感じます。

スロットの階層表示では、子を持つスロットの場合に、子を表示しつつ親（中間ノード）と子のどちらを操作するのか一目で分かるような表示を考えるのに頭を使いました。というのもこのGUIの場合、親も子もそれぞれ別の操作を持つので、操作を行う主体がどのスロットなのか把握できないとGUIが使いにくいためです。
配置や色ではどうにもならなかったので、実世界のファイル整理を当てはめてみると少し区別しやすくなりました。そう、インデックスラベルや付箋を貼って資料を探しやすくするやつです。

選択中のスロットにインデントをつけて区別することにして、配置をアイデアふせん上で試行錯誤してみました。

アイデアふせんによる試行錯誤。これを記録として残せるのがGoogleスライドの便利なところ

ナビゲーションの実装

メニューのナビゲーションの実装で苦労した点を挙げます。
・スロット階層の決定方法
・子スロットの表示範囲→操作中のスロットの兄弟を表示する
・スロット階層の表示範囲→操作中のスロットの親までを表示する
・ナビゲーション時に保持するスロット→操作中のスロットそのものではなく、親（中間ノード）と、子の兄弟のインデックスに分けて保持した
・同じボタン入力に対して遷移の動作を切り替える→状態遷移器を使用する

スロット階層については、スロットの木構造と現在のスロットが分かれば、現在のスロットからルートへたどっていけばスロット階層は一意に求められます。
子スロットとスロット階層との表示、保持するスロットの単位については、本GUIの制約が関係しています。
例えば「パーティを組む」スロットの場合、パーティに関するスロットは「ユニットの配置」（陣形）・「ユニット」といった子スロットを持ちます。パーティのスロットを埋めるために「配置」や「ユニット」などの子スロットの兄弟を切り替えながら作業したいので、子のスロットは兄弟をタブのように常に表示しておきたいです。
次に、子の兄弟を表示しつつスロット階層を表示したいので、スロット階層は親までを表示することにしました。

ナビゲーション時に保持するスロットの単位についても、兄弟の切り替えの実装の都合です。ボタン入力では兄弟のインデックスを指す定数を取得し、GUI側では親を保持しておきます。そうすると、操作中のスロットをその兄弟に切り替えるときに子の配列をインデックスで参照すればよいので、実装が楽になります。

ボタン入力の処理については、遷移先のスロットの種類によって、同じボタン入力でもボタン類の更新処理が異なります。そのためスロットの種類を状態に当てはめ、状態遷移器を用いて処理を切り替えることにしました。