Unreal Editor for Fortnite の UMG ウィジェット | Fortnite ドキュメンテーション

ユーザーウィジェットは、ウィジェットエディタで UMG ウィジェットを使用して設計されます。

ユーザーウィジェットは、UMG ウィジェットと仕掛けの各機能を結ぶルートをたどるという点でマップのようなものです。ユーザーウィジェットがわかると、UI の構成を理解するのに役立ちます。ウィジェットエディタでは、以下を調べることができます。

UI レイアウトおよびデザイン。
ビューモデルの各関数。
ビューバインディングにおけるウィジェットバインディング。

機能テンプレートで「HUD Controller」フォルダを開き、UW_HCD01 ウィジェットをダブルクリックすると、そのウィジェットがどのように作成され、HUD 制御の仕掛けにバインドされたかについて確認できます。

ウィジェットのレイアウト

ウィジェットレイアウトは、カスタム UI を作成するための設計段階です。ウィジェットエディタでは、[Palette (パレット)] パネルから UMG ウィジェットを使用して外観を作成し、独自の UI の機能を設計できます。 UMG ウィジェットを使用する順番によって、UI の外観が決まります。

UMG ウィジェットの機能の詳細については、ウィジェットエディタドキュメントの「パレット」セクションを参照してください。

UW_HCD01 ウィジェットが開いている状態で、[Hierarchy (階層)] パネルを確認します。 [Hierarchy (階層)] パネルには、使用された UMG ウィジェットと、それらがビューポートに追加された順序が表示されます。

UMG ウィジェットは、ビューポートに追加された後、[Hierarchy] パネルで名前を変更できます。

すべてのウィジェットデザインには、画面として機能するルートウィジェットが必要です。 Root というオーバーレイ ウィジェットが、デザインのルートにあり、画面として機能します。このビューポートは Fill Screen (画面を塗りつぶす) に設定されています。これにより、デザインによりルートで指定された領域が埋められます。

グリッドパネルは、体力ゲージとシールドゲージのデザインを格納するために使用されます。グリッドパネルは柔軟なグリッドで、子ウィジェットを縦横列に合わせて配置できます。

グリッドパネルでは、縦横列の数、縦横列が占めるスペース、デザインでウィジェットが占めるレイヤー、および特殊な移動オプション「Nudge (ナッジ)」を制御するオプションがその子ウィジェットに追加されるため、縦横列をさらにカスタマイズすることができます。

Nudge は、スペースを占めることなく、X 軸と Y 軸を使って子ウィジェットを移動させることができます。この場合、コンテナ内のコンテンツのみが移動されますが、コンテナの位置とレイアウトで占めるスペースは維持されます。

ShieldBarContainer という Overlay ウィジェットは、グリッドパネルの最初の子ウィジェットです。このウィジェットは横列 1、縦列 0 に配置され、横列スパン 1、縦列スパン 0 にまたがって表示されます。 ShieldBarContainer ウィジェットは Layer1 に表示されます。

つまり、ShieldContainer のすべての子ウィジェットはレイヤー 1 にあるため、デザインの前面に表示されますが、横列 1 にあるため、その背後にあるウィジェットの右に配置されます。シールドゲージは 2 つの横列 (0 と 1) にまたがり、これがシールドゲージの長さを決定します。

Nudge > Y オプションを使用すると、ShieldBarContainer ウィジェットをデフォルト位置から -25.0 スレート単位分下に移動して、その背後にある Health Container を少し覆うようにできます。

HealthBarContainer という Overlay ウィジェットは、グリッドパネルの 2 番目の子ウィジェットです。このウィジェットは横列 1、縦列 0 に配置され、横列スパン 1、縦列スパン 0 にまたがって表示されます。 HealthBarContainer ウィジェットは Layer0 に表示されます。

つまり、HealthBarContainer のすべての子ウィジェットは、レイヤー 0 上にあるため、デザインの背面に表示されます。体力ゲージは横列 0 にあるため、シールドゲージの左側に表示されます。 HealthBarContainer は横列 0 と横列 1 にもまたがり、これによって体力ゲージの長さが決まります。

シールドと体力ゲージを構成する UMG ウィジェットの詳細と、全体的なデザインにおけるそれらの目的を以下に示します。

ShieldBarContainer

ShieldBarContainer には、シールドゲージのデザインを構成するすべての UMG ウィジェットが格納されます。シールドゲージは、次の要素で構成されています。

UMG ウィジェット	ウィジェット名	目的
画像	ShieldBar_backing	シールドゲージのデザイン全体を囲むコンテナとして使用されます。これは MI_HCD01_Backplate というマテリアルインスタンスです。
スタックボックス	ShieldContent	ShieldBar_Backing マテリアルと ShieldBarContainer 内で、その子ウィジェット (シールドゲージアイコンとシールドゲージのマテリアル) を左から右に整列します。
画像	ShieldIcon	前面レイヤーとして使用されるシールドアイコンのマテリアルです。
オーバーレイ	ShieldBarContainer	ShieldContent Stack Box の第 2 縦列でその子ウィジェットをレイヤー化するために使用されます。これらのウィジェットによって、シールドゲージのマテリアルが構成されます。
画像	ShieldBarStroke	シールドゲージを囲むコンテナとして使用されます。これは MI_HCD01_BarStroke というマテリアルインスタンスです。
Image	シールドバー	M_ProgressBar_Basic マテリアルは、ウィジェットが HUD 制御の仕掛けから受け取る情報に応じて、シールドゲージ内を左右に動くためのマテリアル関数を使用する動的な 2 トーンマテリアルです。

HealthBarContainer

HealthContainer には、体力ゲージのデザインを構成するすべての UMG ウィジェットが格納されます。体力ゲージは次の要素で構成されています。

UMG ウィジェット	ウィジェット名	目的
スタックボックス	Health Content	その子ウィジェット (体力ゲージアイコンのデザインと体力ゲージのマテリアル) を HealthContainer 内で左から右に整列します。この Stack Box は、ShieldContainer Overlay ウィジェットを囲むようにして、シールドゲージが UI デザイン全体の中央になるように配置されます。これは、HealthContent Stack Box の X 軸の寸法が ShieldContent Stack Box よりも大きいためです。
画像	HPIcon	前面レイヤーとして使用される体力アイコンのマテリアルです。
オーバーレイ	HPBarContainer	HealthContent Stack Box の第 2 縦列でその子ウィジェットをレイヤー化するために使用されます。これらのウィジェットが体力ゲージのマテリアルを構成します。
画像	HPBarStroke	体力ゲージを囲むコンテナとして使用されます。これは MI_HCD01_BarStroke というマテリアルインスタンスです。
画像	HPBar	HUD 制御の仕掛けからウィジェットが受け取る情報に応じて、体力ゲージ内を左右に動くためのマテリアル関数を使用する動的な 2 トーンマテリアルです。

次に、ビューモデルを選択して UI マテリアルを更新し、インゲームでプレイヤーの現在の体力とシールドのステータスを表示する方法について説明します。

ビューモデル

ビューモデルは一連の関数を通じてプレイヤー情報を制御します。これらの関数は、UMG ウィジェットと仕掛けの機能を通じてプレイヤー情報をコントロールすることができます。ビューモデルは、UMG ウィジェットをクリエイティブの仕掛けにバインドする特定の方法を提供します。

ビューモデルは、ユーザーウィジェットを使用して仕掛けで実行されている関数をリッスンし、デフォルトのユーザーインターフェースを置き換えます。次に、そのビューモデルは仕掛けの関数を使用し、ビューバインディングを通じて UI を更新します。

たとえば、シールドと体力ゲージのビューモデルは、HUD 制御のシールドと体力の関数群をリッスンします。 HUD 制御関数がプレイヤーのシールドと体力に対して実行されると、ビューモデルはこれらの関数をリッスンし、ビューバインディングを通じて情報を渡して UI を更新します。

いろいろなビューモデルを使用することができます。以下のビューモデルのリストには、仕掛け固有のビューモデルがあることに注目してください。これらにはその仕掛けに固有の関数が含まれています。

次のビューモデルは、関数リスト内の仕掛け関数を通じて、UI の複数のパーツを制御します。

仕掛け - HUD 制御チーム/スクワッドプレイヤー情報リストは、UW_HCD01 ウィジェットで使用されます。このテンプレートは 1 人のプレイヤー (ユーザー本人) によってプレイされることを想定しているため、Controlling Player Info (制御プレイヤー情報) を使用して HUD 制御から情報を取り込みます。

この UI サンプルでは、HUD 制御の関数をリッスンすることで、このビューモデルを使用して体力とシールドを制御します。

仕掛け - HUD 制御のチーム/スクワッドプレイヤー情報リストには、体力とシールドのビューモデルがあります。

次に、体力とシールドの UI マテリアルをビューバインディングで HUD 制御機能にバインドする方法を説明します。

View Bindings (バインディングを表示)

ビューバインディングは、UMG ウィジェット機能をバインドされた仕掛けの関数にマッピングし、HUD の UI を更新します。 UW_HCD01 ウィジェットでは、ShieldBar および HPBar マテリアルが HUD 制御の Shield および Health 関数にバインドされています。これらの関数は、ゲーム内のシールドと体力を監視し、保持しているシールドと体力の量に基づいてバーのマテリアルを更新します。

シールドと体力の UI を機能させるには、まず UMG ウィジェットを選択し、特定の仕掛けの関数にウィジェットプロパティをバインドします。バインディングは [View Bindings (ビューバインディング)] パネルで作成する必要があります。

UMG ウィジェットを追加する

Image ウィジェット (ShieldBar および HPBar) を、まず [Hierarchy (階層)] パネルから選択し、次に [View Bindings] パネルから選択します。 [+Add Widget (+ウィジェットを追加)] ボタンをクリックすると、ビューモデルの関数のリストを開くことができます。ウィジェットのプロパティ情報を制御するため、ウィジェットに関数が追加されています。この場合、ShieldBar と HPBar のマテリアルを制御するのは Brush 関数です。

MI_HCD01_BarStroke マテリアルを制御するために、Brush 関数が HPBar に追加されています。

仕掛けバインディングを追加する

バインドするウィジェットを決定した後、仕掛けのバインディングタイプを選択します。ウィジェットフィールドの隣に空のフィールドがあります。空白のフィールドをクリックすると、利用可能な仕掛けのバインディングのリストが開きます。仕掛けのバインディングのオプションが、ウィジェットと仕掛けのバインディングのフィールドの下に自動的に表示されます。これらのオプションは、仕掛けから受信する情報に基づいてウィジェットがどのように更新するかを決定します。

UW_HCD01 ウィジェットは Set Scalar Parameter を使用して Brush のプロパティを更新します。

View Bindings (バインディングを表示)

ShieldBar Brush プロパティ	HealthBar Brush プロパティ

[Details] パネル

ShieldBar マテリアル	HealthBar マテリアル

UW_HCD01 ウィジェットでは、Image ウィジェット (ShieldBar および HPBar) の Brush プロパティ ([Details] パネルにある) にダイナミックマテリアルがあります。

仕掛けのパラメータを設定する

マテリアルでプレイヤーのシールドと体力の最新状態を反映させるために、仕掛けのバインディングには、仕掛けの情報を UMG ウィジェットに送信するために設定する必要のあるパラメータがあります。

このサンプルでは、Image ウィジェットとその Brush 関数は、HUD 制御の Brush パラメータに自動的に追加されます。このバインディングでは、どの Image ウィジェットの Brush プロパティを更新するかが決まります。

次に、Parameter Name で、Brush マテリアルで更新するパラメータを指定します。ここでは、このフィールドに「Progress」と入力します。

最後に、バインディングの値はビューモデルによって決定されます。バインディングの [Value] フィールドでは、HUDPlayerInfoListViewmodel > Controlling Player Info > Shield および Health 関数が設定されます。

HUD 制御機能では、Progress プロパティを参照して体力とシールドの値を渡すことで、スカラーパラメータ変換関数を介して Image ウィジェットの Brush プロパティを更新するようになりました。

Progress は、ProgressStart と ProgressEnd の値の間でバーを前後に動かす値です。これは、Progress の値が 0 から 1 の間に制限されているということです。

ShieldBar マテリアルパラメータグループ	HealthBar マテリアルパラメータグループ

体力とシールドがフルの状態でゲームを開始した場合、ダメージを受けると、Progress プロパティと Normalize Progress プロパティに応じてバーが左に移動します。これらのプロパティにより、プレイヤーがダメージを受けたときにマテリアルが左側にどの程度移動するのかが決定します。

体力とシールドが回復するとき、マテリアルは、Progress プロパティおよび Normalize Progress プロパティを使用して、劣化するときと同じ速度でバーを右側に移動します。

他のユーザーウィジェットを開いてそれらを読み取れるかどうかを確認し、UMG ウィジェットが階層に追加された順番、ユーザーウィジェットに対して選択されたビューモデルのタイプ、UMG ウィジェットのパラメータと仕掛けの関数がビューバインディングでどのようにバインドされるのかを把握します。

装備アイテムビューモデル

このビューモデルは、HUD 制御の仕掛けと併せて使用することで、[Equipped Item Info Widget Override (装備アイテム情報ウィジェットのオーバーライド)] ウィジェットスロットを使用して、装備アイテムの統計情報を追跡することができます。どの UI サンプルも装備アイテムとして WID_Assault_AutoHigh_Athena_C_Ore_T03 アサルトライフルを使用します。