UE5 で正式に追加された Common UI プラグイン。
UI を作る上で Widget の標準機能にはないが、よく必要に迫られることの多い機能がプラグインとして提供されいてる。
すごく便利なんだだけど、その割には公式の解説がちょっとこころもとないとも感じる。
ググってもほかに参考記事が非常に少なかったこともあり、自分で調べたことは忘れないようにメモしておきたい。
Common UI プラグイン
Common UI の機能については、以下の公式サンプルで使用が確認できた。
- 機能別サンプル
- CommonUI の基本的な機能を確認するならまずこれ
- Map/CommonUI.umap : レベルに基本的な機能を説明するサンプルが入ったレベル
- ExampleContent/UMG/CommonUI フォルダ : 実際に Common UI プラグインの利用アセット
- Lyra Starter Game
- CommonUI を C++ も使用した上で独自にカスタムされた Widget が定義されている、より実践的なサンプル
- UI フォルダ : Widget は CommonUI もしくはその独自カスタムされた Widget を使用
- UI/Foundation フォルダ : CommonUI の機能をよく利用し、ボタン等の UI を構成するベースとなるパーツ
ひとまずは、機能別サンプルで見るほうがよさそう。
Lyra Starter Game は C++ がっつり見ないと全容が見えないし、他の機能とも密接にかかわってるので、読み解いてくのには結構労力がいる。
Common UI プラグインを有効にすると、Widget のパレットには以下のような「共通 UI プラグイン」の項目が追加される。
名前を見るだけでも、明らかに便利そうな UI パーツが追加されていることがわかる。
今回はその中でも簡単に導入できて、かつ、とても便利な Common Action Widget に関して使い方を調べたので以下で解説する。
UI におけるキーボード・マウス or ゲームパッド問題
よくある UI デザインとして、入力デバイスのボタン自体をアイコンとして UI に表示したい場合がある。
例えば、コマンド入力が必要な場面や、チュートリアル、アイテムスロットがボタンを割り当てる HUD なんかで表示することが多いと思う。
プラットフォームのコントローラが1種であるなら何の問題もない。
しかし、例えば、プラットフォームが PC だった場合はどうするか。PC ゲームではゲームパッド or キーボード・マウスどちらも対応する場合が多い。そういう場合、現在アクティブになっているボタンのテクスチャを動的に切り替えたいと思うはず。
例えば、普段、キーボード・マウス入力時は左のスクショのようにキーボードのスペースキーを表示したいが、ゲームパッドの入力があった時点で右のスクショのように A ボタンに変更したいというケース。
真面目に実装を考えると面倒な問題だが、CommonUI プラグインの Common Action Widget を使用することで、実はこれがあっさり解決できるようになる。
Common Action Widget の使い方
あっさりとは言ったが、最初は事前準備がいくつか必要になる。順を追って解説する。
Input Action を定義する
CommonUI では、Input Action という入力デバイスと UI を紐づける仕組みがある。
これは、特定の操作（上記の例では Jump）が、キーボードのキーとゲームパッドのボタンのどれに相当するかの対応付けを DataTable として事前に登録しておくことで入力を抽象化して取り扱うことができる仕組みである。
コンテンツブラウザ上で、右クリックメニューから、その他 > 共通UI InputActionDataTable を選択する。
CommnUIInputActionDataTable では、特定の操作に対して、キーボード・マウス入力とゲームパッド入力の対応付ける情報を設定する。 (ここでは主に今回の利用用途で最低限必要な設定だけに絞って書く)
- Display Name : その入力の種類における表示用の名前
- Hold Display Name : その入力が Hold タイプだった場合の表示用の名前
- Keyboard Input Type Info: キーボード入力時の定義
- Key : キーボードでの入力を設定
- Override State : Enabled (基本的にはデフォルトの Enabled にしておけばよい)
- Action Requires Hold : Hold 入力させるかどうか
- Hold Time : Hold させる時間
- Default Gamepad Input Type Info: ゲームパッド入力時の定義
- Key : ゲームパッドでの入力を設定
- Override State : Enabled (基本的にはデフォルトの Enabled にしておけばよい)
- Action Requires Hold : Hold 入力させるかどうか
- Hold Time : Hold させる時間
CommonInputBaseControllerData で割り当てるテクスチャを設定する
次に、各デバイスごとに割り当てるテクスチャを設定する必要がある。
ブループリントクラスから CommonInputBaseControllerData を新規作成する。
これは利用したいデバイスごとに作成する。
今回の例でいうと、キーボード・マウス用、ゲームパッド用で2つアセットを作成して、それぞれで入力キーに対して表示したいテクスチャ、ブラシ設定を登録する。
ここでは、以下の点に注意して設定すること。
- Input Type
- デフォルトで "Mouse and Keyboard" になっている
- ゲームパッド用の場合は "Gamepad" にする
- Gamepad/Gamepad Name
- Input Type を "Gamepad" にした場合は、ここを "Generic" にする
- ここは C++ で拡張してない限りは "Generic" しか選択肢がない
- デフォルトでは "None" になっているが必要なパラメタなのでしっかり設定しておく
作成した CommonInputBaseControllerData はプロジェクト設定で事前に登録しておく。
プロジェクト設定の ゲーム > Common Input Settings を選択。
入力 > Platform Input > Windows > Default > Controller Data に作成した CommonInputBaseControllerData を登録しておく。
また、以下のパラメータに関しても確認しておく。
- Supports Mouse and Keyboard : True
- Supports Gamepad : True
- Default Gamepad Name : Generic
- (Gamepad/Gamepad Name で設定した名前。通常だと Generic しか選択できない)
Common Action Widget を表示したい Widget の中に配置
以上で事前準備が完了。後は Common Action Widget を実際にボタンテクスチャを表示したい Widget にレイアウトする。
Widget のパレット、共通 UI プラグイン > CommonAcitonWidget をドロップして位置を調整する。
例えばこんな感じ。
Common Action Widget の InputActions のプロパティに、InputAction で作った CommnUIInputActionDataTable とカラムを作ったときのキーを設定しておく。
InputAction で設定されている Display Name は、CommonActionWidget の GetDisplayText ノードから取得可能。ボタンの説明用にテキスト表示したい場合は、このテキストを BP で割り当てるようにするとよりスマート。
実行結果
こんな感じ。
なお、CommonActionWidget の InputAction は SetInputAction ノードなどで自由に変更が可能 (ただし変更したら再描画するように促さないといけない。BP 上だと Delay 挟んで Visible 切り替えで描画促すとか？)。
また、On Input Method Changed イベントで入力デバイスの変更を検知できる。
Hold 時の UI 表示にも対応しているようだが、まだ実験できてないので、一旦ここまで。
コメント