このページでは、プロジェクトで共通 UI をセットアップする方法をステップごとに説明します。このガイドでは、以下について学習することができます。
- 入力ルーティング をサポートするためのビューポートの設定。
- コントローラーのボタンを UI 内のアクションにマッピングする、入力アクション データ テーブル の作成方法。
- グローバル クリックおよび [Back (戻る)] ボタンの機能をサポートする デフォルト ナビゲーション アクション の設定方法。
- コントローラー データ アセット を作成して、特定のプラットフォーム上の特定のタイプのコントローラーに割り当てる方法。
1. ビューポートの入力ルーティングの設定
ビューポートは、共通 UI におけるすべての入力ルーティングのベースです。共通 UI が入力をキャプチャすると、その入力はまずビューポートに送信され、その後、どのルート ノードが一番上に描画されててもそのルート ノードに送信されます。この機能をサポートするには、次の設定手順を実行する必要があります。
-
[Edit (編集)] > [Project Settings (プロジェクト設定)] > [Engine (エンジン)] > [General Settings (基本設定)] を開きます。
-
[Game Viewport Client Class (ゲームのビューポート クライアント クラス)] を CommonGameViewportClient に設定します。
独自のゲーム ビューポート クラスが必要な場合は、共通 UI を使用できるようにゲーム ビューポート クラスを CommonGameViewportClient から拡張する必要があります。
2. 入力アクション データ テーブルを作成する
共通 UI では、入力アクション データ テーブルを使用して、さまざまなプラットフォーム固有の入力に関連付けることができる名前付きアクションを作成します。例としては、共通 UI のコンテンツ フォルダにある GenericInputActionDataTable や ContentExample プロジェクトの NavigationInputActionDataTable を参照してください。
共通 UI の入力アクション データ テーブルは、プロジェクト設定や高度な入力システムで使用される入力アクションとは関係ありません。このデータ テーブルは、UI 入力の管理にのみ使用されます。
-
コンテンツ ブラウザ で右クリックして、[Miscellaneous (その他)]> [Data Table Asset (データ テーブル アセット)] をクリックします。
-
行構造体として CommonInputActionDataBase を選択し、[OK] を押して新しい入力アクション データ テーブルを作成します。
-
新しい入力アクション行を追加するには、上のバーの [Add (追加)] ボタンをクリックします。
-
入力アクションの名前と、どのキーがその入力アクションをアクティブにするかに関する情報を入力します。
入力アクションは次のパラメータで構成されます。
| パラメータ | 説明 |
|---|---|
| Display Name | 入力アクションの名前。ナビゲージョン バー (ある場合) に表示されます。 |
| Hold Display Name | ボタンを押したままにする必要がある場合の入力アクションの名前。 |
| Nav Bar Priority | ナビゲーション バーのアクションを左から右にソートする際に使用する優先度。 |
| Keyboard Input Type Info | マウスおよびキーボード (ある場合) を使用するときに該当するアクションで使用するキー。 |
| Default Gamepad Input Type Info | ゲームパッド (ある場合) を使用するときに該当するアクションで使用するキー。 |
| Gamepad Input Overrides | 「特定の」ゲームパッドでこのアクションに使用されるキー。Nintendo Switch のゲームパッドで戻るボタンと進むボタンを入れ替えるなど、プラットフォーム固有のボタンのオーバーライドに役立ちます。 
|
| Touch Input Type Info | タッチ インターフェース (ある場合) を使用するときに該当するアクションで使用するキー。 |
一般的な UI ウィジェットは、これらの抽象的なアクションを実際の入力にマッピングします。たとえば、CommonButtonBase ウィジェットの [Triggering Input Action (トリガーする入力アクション)] に、データ テーブルと行名の参照を追加します。その後、そのアクションに関連付けられたボタンを押すと、共通 UI ボタンがアクティブになります。
バージョン管理での競合を減らすために、関連する一連のアクションを独自のデータ テーブルにグループ化します。たとえば、すべてのメニュー ナビゲーション アクションを 1 つのテーブルにまとめ、より専門的なメニューのアクションも独自のテーブルにまとめます。その後、これらのデータ テーブルを参照する単一の複合データ テーブルを作成します。
3. デフォルトのナビゲーション アクションの設定
カーディナル ナビゲーションは、Unreal でネイティブにサポートされています。ただし、共通 UI は 共通 UI 入力データ アセットを使用して、すべてのプラットフォームで使用されるユニバーサルな進むおよび戻るの入力アクションを定義しています。
-
コンテンツ ブラウザで新しい ブループリント クラス を作成します
-
「CommonUIInputData」を検索して、[Select (選択)] をクリックし、新しいブループリントを作成します。
-
デフォルトの [Click (クリック)] アクションおよび [Back (戻る)] アクションを含む適切なデータ テーブルを割り当てます。
-
このアセットを [Project Settings] > [Game (ゲーム)] > [Common Input Settings (共通入力設定)] > [Input Data (入力データ)] に割り当てます。
上記で指定したアセットは共通 UI によって読み込まれ、デフォルトのナビゲーションで使用されます。指定されたクリック ボタンは、ボタンやその他のインタラクティブな要素をハイライトする際にマウス クリックの代わりとなり、指定された [Back] ボタンは、現在のメニューから前のメニューに戻るために広く使用されるものです。
4. コントローラー データ バインディング (プラットフォーム固有の UI 要素)
コントローラー データ アセット は、キー アクションを UI 要素に関連付けます。各コントローラー データは、入力タイプ、ゲームパッド、プラットフォームに関連付けられています。共通 UI はこの情報を使用して、現在のプラットフォームと入力タイプに基づいた正しいプラットフォーム固有の UI 要素を自動的に使用します。必要に応じて、複数の入力タイプまたは固有のゲームパッドをサポートするプラットフォームでは、ユーザーの入力を使用して正しいゲームパッドを見つけ、その UI 要素をランタイム時に入れ替えることもできます。
-
コンテンツ ブラウザ を右クリックして、新しい ブループリント クラス を作成します。
-
「CommonInputBaseControllerData」を検索して、[Select (選択)] をクリックし、新しいコントローラー データ アセットを作成します。
-
コントローラー データ アセットに、サポート予定のコントローラーの 1 つに関するアセットと情報を入力します。
パラメータ 説明 Input Type これを [Gamepad (ゲームパッド)]、[Mouse & Keyboard (マウス & キーボード)]、または [Touch (タッチ)] に設定します。 Gamepad Name コントローラーがゲームパッドの場合、これは、そのゲームパッドが対応しているプラットフォームになります。デフォルトのゲームパッドは、Generic という名前です。 Input Brush Data Map UI 要素およびアイコンへのキーのマッピング。 Input Brush Key Sets 単一の UI 要素への複数のキーのマッピング。D パッドなど、異なる軸にマッピングされる可能性のある入力で役立ちます。 -
サポート予定のすべての入力に対してコントローラー データを作成したら、これらのクラスを [Project Settings] > [Game] > [Common Input Settings] > [Platform Input] で、関連付けられているプラットフォームに追加する必要があります。
[Default Gamepad Name (デフォルト ゲームパッド名)] は、コントローラー データ アセットの [Gamepad Name (ゲームパッド名)] フィールドに厳密に一致している必要があり、一致していない場合は認識されず、アイコンが表示されません。
各ゲームパッドのデータを、対応するプラットフォームの コントローラー データ 配列に割り当てます。1 つのプラットフォームに複数のゲームパッドを関連付けることができます。たとえば、PC ゲームでは、通常、一般的なゲームパッドの他に、マウスおよびキーボードのコントローラー データもサポートされています。ただし、特定のゲームパッド モデル用のコントローラー データを追加することもできます。
5. 共通 UI ウィジェット ライブラリとウィジェット スタイリング
共通 UI にはウィジェットのライブラリがあります。これは UMG パレットの Common UI プラグイン に表示されます。これらの多くは、さまざまなゲームやアプリケーションでよく使用されている UI 機能で、以下が含まれます。
- 日付/時刻 値および 数 値用の特殊なテキスト ブロック。
- カルーセル や アニメートされたスイッチャー など、ナビゲーションと表示の支援機能。
- ロード ガード や ハードウェア可視性境界 などのプラットフォーム支援機能。
- ボタンやテキストなどの基本的な機能を提供しながらも、スタイリングにはスタイル データ アセットを使用するウィジェット。
これらのどのウィジェットにも、同等の基本 UMG ウィジェットのスタイル オプションはありません。代わりに、これらは Common Style アセット を参照し、複数のメニューや HUD に一貫したスタイルを適用することができます。スタイル アセットに加えた変更は、それを使用するすべての共通 UI ウィジェットに適用されます。
共通スタイル アセットを作成するには、次の手順を実行します。
-
コンテンツ ブラウザ で右クリックし、ブループリント を作成して、ベースとなる共通スタイルクラスの 1 つを選択します。
-
その [Details (詳細)] に、共通 UI ウィジェットに適用したいスタイル情報を入力します。これらは、通常、標準的な UMG ウィジェットのスタイリング オプションと同じです。
-
これを適切なタイプの共通 UI ウィジェットに割り当てます。たとえば、Common Text Style アセットを作成した場合、Common Text ウィジェットの [Style (スタイル)] フィールドに割り当てます。
また、[Project Settings] > [Plugins] > [Common UI Editor (共通 UI エディタ)] の [Template Styles (テンプレｰト スタイル)] にも割り当てることができます。
手動でスタイルを割り当てていない共通 UI ウィジェットには、代わりに適切なテンプレート スタイルが使用されます。これにより、アプリケーションのグローバル デフォルト スタイルを簡単に作成することができます。
[Project Settings] > [Plugins] > [Common UI Framework (共通 UI フレームワーク)] メニューには、ローディング画面で使用される Default Throbber Material や、ロードされていない UI アセットのプレースホルダとして表示される Default Image Resource Object など、さらに複数のグローバル アセットを備えています。