Parrot のユーザー インターフェース

UMG

Unreal の UI システムは、Unreal Motion Graphics (UMG) と呼ばれます。 これは、Unity の標準 uGUI システムとは大きく異なります。 UMG の UI デザイナー オーサリング ツールは、Unity の UI ツールキット UI ビルダーに最もよく似ています (これを使用したことがあればわかります)。 このデザイナーについては公式ドキュメントで詳しく説明されています。「UI を表示する」と「UMG (Unreal Motion Graphics) のベスト プラクティス」ページは、Unity から移行するデベロッパーにとって役立ちます。 UMG の中核を成すのはウィジェットです。ウィジェットとは、ユーザー インターフェースを構築するために使用できる、あらかじめ用意された一連の関数と階層です。

共通UI

CommonUI は、Parrot で使用する、Epic Games で制作されたファーストパーティ プラグインです。 CommonUI は、通常、手動で繰り返し設定するには多くの時間を要するウィジェット全体に「共通の」スタイルとアクションを設定します。 具体的な例としては、入力デバイスの変更を検知し、画面上の入力アイコンを自動的に切り替えるといったことが挙げられます。 これは手動で行うと非常に時間がかかりますが、Common UI はこのプロセスを自動化します。 CommonUI は、Enhanced Input のキー再マッピング サポートにも必要です。これは、「Enhanced Input」のドキュメントで詳しく説明されています。

1. CommonUI を設定するには、まず [Plugins (プラグイン)] ウィンドウで有効にする必要があります。 メニューで、[Edit (編集)] > [Plugins (プラグイン)] に移動し、「Common UI Plugin」を検索して有効にし、エディタを再起動します。

   

2. [Project Settings (プロジェクト設定)] > [General Settings (一般設定)] に移動して、[Game Viewport Client Class (ゲームのビューポート クライアント クラス)] を 「GameViewportClient」から「CommonGameViewportClient」に変更します。 これにより、 CommonUI ウィジェットがエンジンからの入力イベントを受信できるようになります。

   

3. [Project Settings] > [Common Input Settings (共通入力設定)] で、[Enable Enhanced Input Support (拡張入力サポートを有効)] のチェックボックスを選択します。 これにより、Enhanced Input が CommonInput と連携できるようになります。 CommonInput により、CommonUI ウィジェット内の入力が処理されます。

   

4. 最後に、コードで使用できるように、プロジェクト内のいくつかのモジュールを有効にする必要があります。 「$ProjectName.Build.cs」ファイルに移動します。この場合、これは「Parrot.Build.cs」ファイルです。 PublicDependencyModuleNames のリストに以下のものを追加します。

   • CommonInput

   • CommonUI

   • EnhancedInput

   • GameplayTags

   • UMG

Parrot 固有のウィジェット階層 

Parrot で最初に確認する UI クラスは AParrotHUD です。 Unreal Engine の HUD クラスは、各ローカル プレイヤーごとに作成されるアクタであり、ヘッドアップ ディスプレイ (HUD) を制御します。 これには、直接描画可能なキャンバスとデバッグ キャンバスがあります。 ゲーム モード設定の一部として割り当てることもできます。 Parrot でこのクラスを使用する場合、これはすべてのウィジェットが作成および管理されるルート ウィジェットを所有するアクタになります。

この所有ウィジェットのクラス タイプは UParrotGameLayout です。 UParrotGameLayout は、他のすべての UI ウィジェットを格納する C++ ベースのウィジェット コンテナです。 その中には、UCommonActivatableWidgetContainerBase タイプの「レイヤー」のリストがあります。 表示する他のすべてのウィジェットは、これらのレイヤーのいずれかにプッシュされます。

設定する基本レイヤーは以下のとおりです。 

• ゲーム：UMG HUD ウィジェットを配置するレイヤー

• GameMenu：HUD の上に表示したいウィジェットを配置するレイヤー

• メニュー：一時停止画面、設定画面、インベントリ画面など、すべての画面ウィジェットを配置するレイヤー

• モーダル：すべてのモーダル ポップアップを配置するレイヤー

Parrot では、アクティブ化可能な画面用のクラス階層も作成しました。これらのウィジェットはすべての共通機能を共有し、メニュー レイヤーに配置されるためです。 クラス階層は以下のとおりです。 

この設定で、Parrot のすべての UI 画面を作成します。  

ウィジェット スタイリング 

Common UI プラグインと画面設定を使用すると、ウィジェットのスタイル設定を始めることができます。 「Content/UI/Widgets/Common」の W_ButtonBase がよい例です。 これは、「Content/UI/Styling」にある ButtonStyle_Base スタイル データを使用します。 Common UI から UCommonButtonStyle クラスを使用します。 カスタマイズできるオプションは豊富にあります。 たとえば、ボタンのステートに応じてサウンドやブラシなどです。 Common UI には、使用するウィジェットに応じて、このようなさまざまなスタイリング クラスが用意されています。 カスタマイズが必要な場合は、これらのスタイル設定済みウィジェットのエンジン コードを参考にすることをお勧めします。 

ロード画面

Parrot のロード画面では、Epic Games のファーストパーティ プラグイン CommonLoadingScreen を使用します。 このプラグインの実際の使用例は、Epic Games の Lyra サンプル プロジェクトにもあります。 このプラグインを使用する理由を理解するには、まず Unreal Engine におけるレベルのローディングの基本を理解する必要があります。  

Unreal Engine でレベルのローディングを処理する方法はいくつかあります。 簡単な方法は、ブループリントで Open Level ノードを呼び出すことです。 この関数は、文字列またはマップへのソフト オブジェクト参照によってマップをロードします。 シンプルなマップであれば問題なく動作しますが、注意点があります。 この関数が呼び出されると、マップは同期的にロードされるため、新しいマップに必要なデータの量によっては、顕著なスタッタが発生する可能性があります。 また、ビューポートに追加されたウィジェットが、前のレベルに存在するプレイヤー コントローラーに関連付けられてしまうという問題もあります。 レベル遷移時に、このウィジェットはレベルのアンロードの一部としてクリーンアップされます。

マップに基づいて新しいゲーム モード (たとえば、シングル プレイヤー レベルとマルチプレイヤー レベル) をロードすることは有益です。 しかし、ロード画面を永続化し、Open Level で発生する可能性のあるローディング ヒッチを回避するにはどうすればよいでしょうか。 BP_ParrotGameInstance を見てみましょう。   

ここでレベルを非同期的にロードすることで、Open Level が呼び出されるまでにアセットが準備されていないという問題を解決できます。 コメントにもあるように、ロード画面の処理もここですでに処理されています。 プラグインの設定は簡単で、ロード画面ウィジェットは [Edit] > [Project Settings] > [Common Loading Screen (共通ロード画面)] から設定できます。 

また、ここの [Debugging (デバッグ)] トグルにも注目してください。 これらのトグルをエディタ内でテストすることで、パッケージ版でのロード画面の動作をより正確に把握できます。

これで、ロード画面のレベルがロードされるようになりました。 BP_ParrotGameInstance を詳しく調べて、シングル プレイヤーとマルチプレイヤーのレベル順序がどのように設定されているかを確認してみてください。 ゲーム ステートの設定については、「Parrot の Unreal ゲームプレイ フレームワーク」のドキュメントで説明されています。