ユーザー ウィジェットは、ウィジェット エディタで 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 制御の関数をリッスンすることで、このビューモデルを使用して体力とシールドを制御します。
次に、体力とシールドの 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 関数です。
仕掛けバインディングを追加する
バインドするウィジェットを決定した後、仕掛けのバインディング タイプを選択します。 ウィジェット フィールドの隣に空のフィールドがあります。 空白のフィールドをクリックすると、利用可能な仕掛けのバインディングのリストが開きます。 仕掛けのバインディングのオプションが、ウィジェットと仕掛けのバインディングのフィールドの下に自動的に表示されます。 これらのオプションは、仕掛けから受信する情報に基づいてウィジェットがどのように更新するかを決定します。
UW_HCD01 ウィジェットは Set Scalar Parameter を使用して Brush のプロパティを更新します。
View Bindings (バインディングを表示)
[Details] パネル
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 の間に制限されているということです。
体力とシールドがフルの状態でゲームを開始した場合、ダメージを受けると、Progress プロパティと Normalize Progress プロパティに応じてバーが左に移動します。 これらのプロパティにより、プレイヤーがダメージを受けたときにマテリアルが左側にどの程度移動するのかが決定します。
体力とシールドが回復するとき、マテリアルは、Progress プロパティおよび Normalize Progress プロパティを使用して、劣化するときと同じ速度でバーを右側に移動します。
他のユーザー ウィジェットを開いてそれらを読み取れるかどうかを確認し、UMG ウィジェットが階層に追加された順番、ユーザー ウィジェットに対して選択されたビューモデルのタイプ、UMG ウィジェットのパラメータと仕掛けの関数がビュー バインディングでどのようにバインドされるのかを把握します。
装備アイテム ビューモデル
このビューモデルは、HUD 制御の仕掛けと併せて使用することで、[Equipped Item Info Widget Override (装備アイテム情報ウィジェットのオーバーライド)] ウィジェット スロットを使用して、装備アイテムの統計情報を追跡することができます。 どの UI サンプルも装備アイテムとして WID_Assault_AutoHigh_Athena_C_Ore_T03 アサルト ライフルを使用します。
「Devices」 > 「HUD Controller」 > 「Widgets」フォルダの順に開き、UW_HCD03_SelectedItem ウィジェットをダブルクリックします。 このビューモデルから、UI で次のような多数の武器の情報と統計情報を追跡できます。
アイテム アイコン
アイテム名
弾薬アイコン
弾薬カウント
弾薬サープラス
マガジン タイプの武器かどうか