カスタム体力ゲージとシールド ゲージを作成する

パレットにある UI マテリアル、UI テクスチャ、各種ウィジェットを使用して、Unreal Motion Graphics (UMG) 内にカスタム体力ゲージとシールド ゲージを作成し、デフォルトのフォートナイト ユーザー インターフェース (UI) を置き換えます。 体力ゲージとシールド ゲージは、ネームプレートに追加するか、HUD 内に個別に配置することができます。

体力ゲージとシールド ゲージのデザインと配置は、ゲームごとに独自であり、ゲーム タイプ (格闘ゲーム、マルチプレイヤー協力、ロール プレイングなど) が考慮されます。

マテリアルを変更せずにマテリアル インスタンスを設定する

次の例では、UEFN で作成されたさまざまなマテリアルを使用します。 矩形 (ボックス) および円形の進捗バーがあります。 矩形の進捗バーには、進捗バーを複数のセクションに変えるオプションもあります。

マテリアルは、UI マテリアル ラボからのマテリアル関数、マテリアル インスタンスに公開するパラメータ、およびそれらすべてを動作させる数学演算の組み合わせを使用して設定されています。

ウィジェットにマテリアルを使用することはベスト プラクティスです。 マテリアルはゲームプレイ データに基づいて動的に更新されるため、UI の最適化に役立ち、特殊なエフェクトを付加する方法が提供されます。 テクスチャは、数学関数では容易に実現できないより複雑なデザインにのみ使用されます。

マテリアル インスタンスは、再コンパイルせずにマテリアルの外観を簡単に調整できるパラメータがあるマテリアルのインスタンスを作成します。 マテリアルのインスタンスを作成するには、マテリアル を右クリックして [Create Material Instance (マテリアルインスタンスを作成)] を選択します。

UEFN ではいくつかのパラメータが公開されています。 次の例のマテリアルでは、バーがどの程度満たされるかが Progress パラメータによって変更されます。 その範囲は、M_CircleProgressBar の ConstantBiasScale ノードを使用して 0 ～ 100 に正規化されているため、フォートナイトの HP 範囲に収まります。

グラデーションである 背景色 (BGColor) および 液体の色 を変更できます。 その後に、左側のプレビュー ビューポートで変更をプレビューします。

マテリアル インスタンスは、さまざまな用途に必要な数だけ作成できます。 次の例では、2 つのマテリアル (一つは HP に、もう一つはシールドに) が使用されています

ウィジェット レイアウトのベスト プラクティス

UMG だけに関しては、画面上の絶対位置が必要な場合や、さまざまなウィジェットをどこに配置するのかを最終的に操作する必要がある場合に [Canvas] パネルを使用します。

小さめのウィジェットでは次のいずれかを使用します。

• オーバーレイ

• スタック ボックス

• サイズ ボックス (ウィジェットを特定のサイズに制限する必要がある場合)

• Grid Panel (コンテナのサイズを維持したままで、その中の小ウィジェットの位置を操作する場合)

マテリアルの準備が整ったら、コンテンツ ブラウザ内でウィジェット ブループリントを作成し、ウィジェットのサムネイルをダブルクリックして UMG エディタを開きます。

[Canvas] パネルを使用する

ここで示す例では、[Canvas] パネルを使用して、画面の特定の部分にウィジェットを固定することで、HUD 上の絶対位置に体力ゲージとシールド ゲージを配置しています。

個々の HUD 要素では、以下のウィジェットの組み合わせを使用することがベスト プラクティスです。

• Overlay - ウィジェットを積み重ねて配置する必要がある場合

• Stack Boxes - ウィジェットを水平または垂直にレイアウトする必要がある場合

• サイズ ボックス - ウィジェットを特定のサイズに制約する必要がある場合

• Grid Panel - コンテナのサイズを維持したままで、その中の小ウィジェットの位置を操作する場合

このことを念頭に置いて、体力ゲージとシールド ゲージのレイアウトを開始します。

1. HUD UI 全体が入るコンテナを作成し、個々の HUD 要素すべてを収めるコンテナとして [Canvas] パネル を作成します。

   

   この例では、体力ゲージとシールド ゲージが画面の下部中央に固定されます。

2. [Canvas] パネル内で Stack Box をネストさせて、体力ゲージとシールドゲージのコンテナを作成します。 このデザインでは、これらの要素が左から右に積み重ねられます。

   

   Stack Box 内でウィジェットを垂直にレイアウトする場合は、[Details (詳細)] パネルの [Behavior (動作)] > [Orientation (向き)] で、Orientation の設定を変更します。

3. ウィジェットを 階層 に追加するときに、ウィジェットを選択した状態で F2 を押して、整理しやすいようにウィジェットの名前を変更します。

   

4. 階層内で Stack Box を選択すると、[Details] パネルに [Anchors (アンカー)] オプションが表示されます。 Shift + Ctrl を押して、そのオプションを開きます。 3 行目の 2 列目 にあるオプションを選択して、HUD の下部中央に Stack Box を固定します。

   

   これで、Stack Box が下部に固定されました。 花のアイコンは、[Canvas] パネル内でウィジェットが固定されている位置を示しています。

5. 画面の下端につかないように、Stack Box を上方に動かします。 そうするには、[Position Y (位置Y)] オプションを編集します。

   正の値であればウィジェットが下方に動き、負の値であれば上方に動きます。

   

6. [Size To Content] チェックボックスをオンにし、コンテナのサイズがその中のコンテンツに合わせて常に変わるようにします。

   

HP バーとテキストを設定する

体力ゲージとシールド ゲージのコンテナの準備ができたので、体力ゲージとシールド ゲージのウィジェットを設定します。

1. Stack Box 内で Overlay をネストさせ、その名前を「HPOverlay」に変更します。 そうすると、HP テキストが丸い HP ゲージにオーバーレイされます。

   

2. HPOverlay 内で Image をネストさせ、その名前を「HPBar」に変更します。 これで、上記で作成したマテリアル インスタンスをウィジェットに追加できるようになりました。

   

3. 階層内で HPBar を選択し、[Details] パネルの Brush> Image で、カスタム体力ゲージのマテリアル インスタンスを選択します。

   

   マテリアル インスタンスのサイズを変更するには、後述の Image Size プロパティをカスタマイズします。

4. HPOverlay 内で Text Block をネストさせ、その名前を「HPText」に変更します。 これで、円形の体力ゲージの上にテキストを追加できるようになりました。

   

5. Text Block を選択し、[Details] パネルで Horizontal Alignment と Vertical Alignment を [Centre (中央)] に設定します。 これで、このテキストが常に HPBar の中央に整列するようになりました。

   

   画像をクリックすると、拡大表示されます。

6. テキストが HP ゲージに収まるように、Appearance > Font > Size で フォント サイズ を変更します。

   

   画像をクリックすると、拡大表示されます。

7. コンパイルします これで、HP ゲージと HP テキストの準備が整いました。

   

シールド ゲージとテキストを設定する

シールド ゲージとテキストを設定するには、前述の手順を繰り返します。 ただし、今度は HP ゲージとシールド ゲージの間にスペースを付加します。 HPShieldsContainer は Stack Box であるため、その子ウィジェットは自動的に水平にレイアウトされます。

Stack Box 内で Image ウィジェットを使用して、体力ゲージとシールド ゲージの間にスペースを付加します。 以下の手順を実行して、空白の Image ウィジェットを設定します。

1. Stack Box 内で Image をネストさせます。

2. Image の Brush の Draw As プロパティを [None (なし)] に設定します。

   

そうすると、ウィジェットに何も表示されませんが、その Image ウィジェットはレイアウト内で引き続きスペースを占めることになります。 Stack Box 内の要素の間隔を、パディングを利用せずに容易に管理できます。

1. 体力ゲージと同じプロセスで、シールド ウィジェット を設定します。

   シールド ゲージをすばやく作成するには、階層内で HPOverlay を右クリックして [Duplicate (複製)] を選択することで、HPOverlay を複製します。

   

2. Spacer Image 内で ShieldOverlay が Stack Box の末尾になるようにネストさせます。

   

   ウィジェット内に 2 つのタイプのゲージが並んで表示されます。

   

3. それぞれの変数の名前を、下図のウィジェット階層に表示されているように、「ShieldOverlay」、「ShieldBar」、「ShieldText」に変更します。

   

これで、体力とシールドの進捗バーに機能を追加するバインディングを作成する準備が整いました。

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

ビューモデルを追加する

ビューモデルは、仕掛けの機能をウィジェット ブループリントに追加する手段を提供します。 このビューモデルは、ビュー バインディングを使用して、ブループリント内のウィジェットを識別し、仕掛けの機能をそのウィジェットにグラフ化します。

HUD 制御プレイヤー情報ビューモデルは、HUD の一部をカスタム ウィジェットで置き換える方法を提供します。

1. [Window (ウィンドウ)] > [Viewmodels (ビューモデル)] を選択して開き、ビューモデル をウィジェットに追加します。

   

2. [Viewmodels] ウィンドウで、[+Viewmodel (+ビューモデル)] を選択します。 そうすると、現在使用可能なすべてのビューモデルがリストされているポップアップが表示されます。

   

3. 使用可能な HUD 制御ビューモデルには次の 2 つのタイプがあります。

   1. HUDPlayerInfoListViewModel のオプションで [Device - HUD Controller Team/Squad Player Info List Viewmodel] を選択します。 前述の情報によると、表示したいのはチーム/スクワッド プレイヤー情報ではなく、制御プレイヤー情報のみです。

      

      

   2. 制御プレイヤーとそのチーム/スクワッド用の個々のウィジェットを作成する場合は、[Device - HUD Controller Player Info Viewmodel] を選択し、[Device - HUD Controller Player Info Viewmodel] にあるプロパティをそれぞれのウィジェットに使用します。 そして、チーム/スクワッド プレイヤー情報リスト ビューモデルをビューモデルにバインドするスクワッド スタック ウィジェットを作成する必要があります。

      

      チーム/スクワッド プレイヤー情報リスト ビューモデルには HUD 制御プレイヤー情報ビューモデルと同じ情報がありますが、シナリオに応じて使い分けられます。

4. HUDPlayerInfoListViewModel のオプションで [Team/Squad Player Info List Viewmodel (チーム/スクワッド プレイヤー情報リストビューモデル)] を選択します。 前述の情報によると、表示したいのはチーム/スクワッド プレイヤー情報ではなく、制御プレイヤー情報のみです。

   

次に、ビューモデルからのデータをウィジェットにバインドするバインディングを設定します。

ToText ビュー バインディングを設定する

1. [Window] > [View Bindings (ビューバインディング)] を選択すると、[View Bindings] ウィンドウが開きます。

   

2. 階層 内で HPText を選択し、[View Bindings] にある [Add Widget (ウィジェットを追加)] を選択して、現在の 体力値 を示す HPText をバインドします。 空のバインディングが表示されます。

   

3. 左側のボックスは Widget プロパティ であり、右側のボックスは Widget プロパティにバインドするデータです。 左側のボックス をクリックすると、HPText Text Block のプロパティのリストが表示されます。 Text プロパティを選択して、HP 値をこのプロパティに渡します。

   

4. 右側のボックスは、選択されている Widget プロパティに渡すデータです。 ただし、Text プロパティで受け付けられるのは Text 型のデータのみです。 フォートナイトの HP 値は Float (つまり、 Double) 型であるため、それを適切な Text 型に変換する必要があります。 右側のボックス をクリックし、[Conversion Functions (変換関数)] > [To Text (Double) (テキストに変換(Double))] を選択します。

   

   多数のオプションのリストが表示されます。 通常、最も重要な設定項目が一番上にあり、その他の設定項目は、Text プロパティに渡される最終的な値の書式設定の手段を提供します。

   

   画像をクリックすると拡大表示されます。

5. [Value (値)] の横にある リンク アイコン を選択し、[HUD Controller Viewmodel (HUD制御ビューモデル)] で [Health value (体力値)] を選択します。

   

6. 空のフィールドをクリックし、左側の列で HUDPlayerInfoListViewmodel を選択して右側の [Controlling Player Info (制御プレイヤー情報)] が展開されたら、[Health (体力)] を選択します。

   

   これは、 [To Text (Double) 変換関数を通じて Float (つまり、Double) 型の Health プロパティを渡します。 [To Text (Double) は、ウィジェットに表示されるように、Health を Text 型に変換します。 そして、変換された Health が、HPText ウィジェットの Text プロパティに渡されます。

   

7. 上記の手順を繰り返して、ShieldText ウィジェットを設定します。 同じバインディングで、シールド値も表示されます。

   

マテリアル パラメータを設定

マテリアル パラメータを設定の仕組みについては、Unreal Engine のドキュメントの「マテリアル パラメータを設定」を参照してください。

次に、円形の進捗バーを設定します。 進捗状況は、プレイヤーの体力レベルとシールド レベルに応じて変化します。

1. 空のバインディングを円形の HPBar に設定します。

   

2. 左側のボックスで HPBar > Brush を選択します。 Brush には、円形の HP バーのマテリアル インスタンスが入っています。

   

3. 右側のボックスで [Conversion Functions] > [Set Scalar Parameter (スカラーパラメータを設定)] を選択します。

   

4. [Parameter Name (パラメータ名)] で、進捗バーの進捗状況を変更するパラメータの名前を入力します。

   このパラメータ名を探すには、HP ゲージのマテリアル インスタンスを開いて、右側のパラメータ値に注目します。

   

5. 進捗バーを制御するパラメータの名前は「Progress」になっています。 その名前を [Parameter Name] フィールドに入力します。

   

   [Parameter Name] がマテリアル インスタンスでのパラメータと同じであることが重要であり、そうでなければ、このマテリアルはゲーム内で機能しません。

6. [Value] の横にある リンク アイコン を選択します。 ToText のときと同様に、プレイヤーの Health を [Value] にバインドします。

   

これが、ビューモデルでの体力とシールドの統計データのバインドの最終的な結果です。 これで、プレイヤーの体力が変化するたびに Health プロパティが HP ゲージのマテリアル インスタンスに渡されて、Progress スカラー パラメータが更新されます。

ShieldBar で同じことを繰り返しますが、 Health プロパティにバインドするのではなく、Shield プロパティ にバインドします。

これで、HP およびシールドのバインディングが設定されたので、 次は、ウィジェットを HUD に表示します。

HUD 制御の仕掛けの設定

1. HUD 制御の仕掛けをレベルに配置します。

2. この仕掛けの [Details] パネルで、次のようになっていることを確認します。

   1. Show HUD (HUD を表示) = Yes (はい)

3. [Player Info Widget Override (プレイヤー情報ウィジェットオーバーライド)] フィールドで、カスタム体力ゲージとシールド ゲージが入っているウィジェットを使用します。

   

   画像をクリックすると拡大表示されます。

4. [Launch Session (セッションを開始)] を選択すると、体力とシールドのウィジェットが HUD に表示されます。 ダメージを受けたときに HUD で統計データが更新されることを確認することで、UI をテストします。

   

進捗バーのその他の例

矩形マテリアル は「Fortnite > UI > Material」にあり、基本的なボックスをカスタマイズして、多くのフォームを任意のウィジェットで背景として使用できます。

ここからマテリアル インスタンスを作成し、UMG での使用を開始します。

ここで提供された情報とマテリアルを使用して、次のような進捗バーを作成してみます。

• テクスチャを背景として使用して、プレイヤー アバター、表示名、HP ゲージを囲む。

  

• 「Fortnite > UI > Material」にあるテクスチャ、アイコン、進捗バーのマテリアル、矩形マテリアルを使用して、基本的な進捗バーを定型化する。

  

• プレイヤー アバターおよび表示名に合わせて分割した HP ゲージとシールド ゲージ。

  

次の内容

• 

  カスタム スクワッド ビューを作成する

  カスタム バックプレートの知識を展開して、プロジェクトのカスタム スクワッド ビューを作成します。