共通 UI クイックスタート ガイド

共通 UI のコア機能を最初に学習するためのウォークスルー ガイドです。

このページでは、プロジェクトで共通 UI をセットアップする方法をステップごとに説明します。このガイドでは、以下について学習することができます。

  • 入力ルーティング をサポートするためのビューポートの設定。

  • コントローラーのボタンを UI 内のアクションにマッピングする、入力アクション データ テーブル の作成方法。

  • グローバル クリックおよび [Back (戻る)] ボタンの機能をサポートする デフォルト ナビゲーション アクション の設定方法。

  • コントローラー データ アセット を作成して、特定のプラットフォーム上の特定のタイプのコントローラーに割り当てる方法。

1. ビューポートの入力ルーティングの設定

ビューポートは、共通 UI におけるすべての入力ルーティングのベースです。共通 UI が入力をキャプチャすると、その入力はまずビューポートに送信され、その後、どのルート ノードが一番上に描画されててもそのルート ノードに送信されます。この機能をサポートするには、次の設定手順を実行する必要があります。

  1. [Edit (編集)] > [Project Settings (プロジェクト設定)] > [Engine (エンジン)] > [General Settings (基本設定)] を開きます。

  2. [Game Viewport Client Class (ゲームのビューポート クライアント クラス)]CommonGameViewportClient に設定します。

    Setting the viewport class to use Input Routing

独自のゲーム ビューポート クラスが必要な場合は、共通 UI を使用できるようにゲーム ビューポート クラスを CommonGameViewportClient から拡張する必要があります。

2. 入力アクション データ テーブルを作成する

共通 UI では、入力アクション データ テーブルを使用して、さまざまなプラットフォーム固有の入力に関連付けることができる名前付きアクションを作成します。例としては、共通 UI のコンテンツ フォルダにある GenericInputActionDataTable や ContentExample プロジェクトの NavigationInputActionDataTable を参照してください。

共通 UI の入力アクション データ テーブルは、プロジェクト設定や高度な入力システムで使用される入力アクションとは関係ありません。このデータ テーブルは、UI 入力の管理にのみ使用されます。

  1. コンテンツ ブラウザ で右クリックして、[Miscellaneous (その他)]> [Data Table Asset (データ テーブル アセット)] をクリックします。

  2. 行構造体として CommonInputActionDataBase を選択し、[OK] を押して新しい入力アクション データ テーブルを作成します。

    Common Input Action Data Base as the row structure for a new data table

  3. 新しい入力アクション行を追加するには、上のバーの [Add (追加)] ボタンをクリックします。

    Click the Add button to add a row

  4. 入力アクションの名前と、どのキーがその入力アクションをアクティブにするかに関する情報を入力します。

入力アクションは次のパラメータで構成されます。

パラメータ

説明

Display Name

入力アクションの名前。ナビゲージョン バー (ある場合) に表示されます。

Hold Display Name

ボタンを押したままにする必要がある場合の入力アクションの名前。

Nav Bar Priority

ナビゲーション バーのアクションを左から右にソートする際に使用する優先度。

Keyboard Input Type Info

マウスおよびキーボード (ある場合) を使用するときに該当するアクションで使用するキー。

Default Gamepad Input Type Info

ゲームパッド (ある場合) を使用するときに該当するアクションで使用するキー。

Gamepad Input Overrides

「特定の」ゲームパッドでこのアクションに使用されるキー。Nintendo Switch のゲームパッドで戻るボタンと進むボタンを入れ替えるなど、プラットフォーム固有のボタンのオーバーライドに役立ちます。

The A and B buttons on the Switch, switched

Touch Input Type Info

タッチ インターフェース (ある場合) を使用するときに該当するアクションで使用するキー。

一般的な UI ウィジェットは、これらの抽象的なアクションを実際の入力にマッピングします。たとえば、CommonButtonBase ウィジェットの [Triggering Input Action (トリガーする入力アクション)] に、データ テーブルと行名の参照を追加します。その後、そのアクションに関連付けられたボタンを押すと、共通 UI ボタンがアクティブになります。

Defining the triggering input action for a Common UI button

バージョン管理での競合を減らすために、関連する一連のアクションを独自のデータ テーブルにグループ化します。たとえば、すべてのメニュー ナビゲーション アクションを 1 つのテーブルにまとめ、より専門的なメニューのアクションも独自のテーブルにまとめます。その後、これらのデータ テーブルを参照する単一の複合データ テーブルを作成します。

3. デフォルトのナビゲーション アクションの設定

カーディナル ナビゲーションは、Unreal でネイティブにサポートされています。ただし、共通 UI は 共通 UI 入力データ アセットを使用して、すべてのプラットフォームで使用されるユニバーサルな進むおよび戻るの入力アクションを定義しています。

  1. コンテンツ ブラウザで新しい ブループリント クラス を作成します

  2. CommonUIInputData」を検索して、[Select (選択)] をクリックし、新しいブループリントを作成します。

  3. デフォルトの [Click (クリック)] アクションおよび [Back (戻る)] アクションを含む適切なデータ テーブルを割り当てます。

    Setting up default Click and Back actions

  4. このアセットを [Project Settings] > [Game (ゲーム)] > [Common Input Settings (共通入力設定)] > [Input Data (入力データ)] に割り当てます。

    Assigning the default actions in your project settings

上記で指定したアセットは共通 UI によって読み込まれ、デフォルトのナビゲーションで使用されます。指定されたクリック ボタンは、ボタンやその他のインタラクティブな要素をハイライトする際にマウス クリックの代わりとなり、指定された [Back] ボタンは、現在のメニューから前のメニューに戻るために広く使用されるものです。

4. コントローラー データ バインディング (プラットフォーム固有の UI 要素)

コントローラー データ アセット は、キー アクションを UI 要素に関連付けます。各コントローラー データは、入力タイプ、ゲームパッド、プラットフォームに関連付けられています。共通 UI はこの情報を使用して、現在のプラットフォームと入力タイプに基づいた正しいプラットフォーム固有の UI 要素を自動的に使用します。必要に応じて、複数の入力タイプまたは固有のゲームパッドをサポートするプラットフォームでは、ユーザーの入力を使用して正しいゲームパッドを見つけ、その UI 要素をランタイム時に入れ替えることもできます。

  1. コンテンツ ブラウザ を右クリックして、新しい ブループリント クラス を作成します。

  2. CommonInputBaseControllerData」を検索して、[Select (選択)] をクリックし、新しいコントローラー データ アセットを作成します。

  3. コントローラー データ アセットに、サポート予定のコントローラーの 1 つに関するアセットと情報を入力します。

    パラメータ

    説明

    Input Type

    これを [Gamepad (ゲームパッド)]、[Mouse & Keyboard (マウス & キーボード)]、または [Touch (タッチ)] に設定します。

    Gamepad Name

    コントローラーがゲームパッドの場合、これは、そのゲームパッドが対応しているプラットフォームになります。デフォルトのゲームパッドは、Generic という名前です。

    Input Brush Data Map

    UI 要素およびアイコンへのキーのマッピング。

    Input Brush Key Sets

    単一の UI 要素への複数のキーのマッピング。D パッドなど、異なる軸にマッピングされる可能性のある入力で役立ちます。

  4. サポート予定のすべての入力に対してコントローラー データを作成したら、これらのクラスを [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. コンテンツ ブラウザ で右クリックし、ブループリント を作成して、ベースとなる共通スタイルクラスの 1 つを選択します。

    The Common Style classes can be Blueprinted

  2. その [Details (詳細)] に、共通 UI ウィジェットに適用したいスタイル情報を入力します。これらは、通常、標準的な UMG ウィジェットのスタイリング オプションと同じです。

  3. これを適切なタイプの共通 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 など、さらに複数のグローバル アセットを備えています。

Unreal Engine のドキュメントを改善するために協力をお願いします!どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
キャンセル