概要
先日、自分用に作成したライブラリにUI関連のモジュールを追加しました。
github.com
このモジュールを使用したUIを実装例を少しずつ解説していきたいと思います。
今回はどのようなことができるかの紹介です。
Unityバージョン
Unity 2021.3 以降
できること
UIApp・UIViewの定義
UIApp
1つのUI機能を定義します。
（インベントリ、スタートメニュー、HUDなど）
UIViewを1つ以上持っています。
また、UIAppを生成するときのモードとして
- 既存のUIAppと並行して生成する
- 既存のUIAppは非表示にして生成する（スタック方式）
- 常に存在する独立したものとして生成する
上記を選択できます。
スタック方式にすることで、メニュー画面→オプション画面→メニュー画面という遷移が簡単に実装できたりします。
UIView
1つの画面やウィンドウを定義します。
（インベントリ内のアイテム一覧ウィンドウ、アイテムに対するアクション選択ウィンドウなど）
また、UISingleViewというUIAppを必要としない独立したViewも定義されており、1つの画面で実装可能なシンプルなものはこちらでも実装可能です。
イベントの取得
UIApp、UIViewともに以下のイベントを簡単に取得可能です。
- StartShow
- EndShow
- StartHide
- EndHide
- Focus（UIViewのみ）
- Unfocus（UIViewのみ）
- Destroy
UIApp、UIView内部で表示、非表示の概念が実装されているため、継承することでこれらのイベントが簡単に取得可能になります。
表示非表示アニメーションの挿入
先ほど、表示、非表示の概念が実装されているという話をしましたが、この時のアニメーションの挿入も可能です。
また、シンプルなフェードアニメーションであれば1行でセットアップできます。
protected UniTask OnInitialize() { // 0.1秒でCanvasGroupをフェードさせる Animator.RegisterShowHideFadeAnimation(CanvasGroup, 0.1f); }
フローの実装
1画面に関する処理はUIViewの中に書けば問題ないですが、複数のViewにまたがる処理もあるかと思います。
そのような場合にUIAppFlowというステートマシンに近い概念を用意しており、UIAppに紐づく形でどのステートでどのViewを表示するかというフローを定義することができます。
ダイアログの実装
UIViewをダイアログとして表示することが可能です。
（ダイアログを重ねることも可能）
他のUIViewはUnfocusになり、ダイアログ外をクリックしたときにダイアログを閉じるか、背景を暗くするかを選択することもできます。
入力とその反応の実装
UIInputReceiverというクラスを用意しており、入力に対する動作を簡単に定義できます。
入力のバインディングは、InputSystemのInputAction、以下のInputBindingType、またはパスから指定可能です。
github.com
また、Buttonのトリガーとして上記の入力を紐づけることも可能です。
カーソルの実装
主にSelectableに追従するカーソルが実装可能です。
これにより、ゲームパッド操作時のUI挙動も比較的簡単に作れるかと思います。
Selectable関連
Selectableの状態による処理を定義可能
docs.unity.cn
上記のSelectableの状態による処理をスクリプトから定義可能です。
デフォルトでは、色の変更、カーソルの移動、カスタムアクションが指定可能です。
Navigationの自動設定
SelectableGroupという概念があり、こちらにSelectableを追加していくことでNavigationの設定を自動で行ってくれます。
また、ゲームパッド操作でViewのフォーカス時に自動で選択してくれたり、操作変更時に選択したり外したりを自動で行ってくれる機能もあります。
各パーツのラッパークラス
Buttonのラッパークラスで、先述の入力のバインディング機能を持ったUIButton、キー画像が一緒になったUIButtonKey、UIKeyImage、UIText、UIInputText、UIToggle、UISlider、など、少し便利なパーツクラスが使用可能です。
