Unreal Editor for Fortnite でカスタムバックプレートを作成する | Fortnite ドキュメンテーション

バックプレートは、プレイヤーのアバター画像、ゲーマータグ、体力、シールドなど、さまざまな情報を HUD に表示します。

バックプレートは、マルチプレイヤー協力ゲームでチームメイトを識別することから、乏しい体力やシールドの統計データを識別することまで、多くの機能を実行します。

Unreal Editor for Fortnite (UEFN) では、バックプレートはマテリアル、またはテクスチャとマテリアルの混合を使用して作成されます。テクスチャは、バックプレートに装飾的な華やかさを加え、マテリアルでは表現できないディテールを追加するコンテナとして使用されます。

ただし、テクスチャはメモリを大量に消費する可能性があります。これにより、メモリ容量に負担がかかり、島のパフォーマンスが低下する可能性があります。マテリアル内のテクスチャと Texture Sample ノードは、大量のメモリを占有します。

マテリアルは、フラットなデザインを作成するために使用するのが最適で、バックプレートにアニメーション効果を追加できます。マテリアルは、単純な代数計算の実行で GPU に依存するため、メモリの消費量が少なくなります。これにより、単純な形状の作成からマテリアル内の複雑なインタラクションのアニメートまで、幅広い操作が可能になります。



マテリアルを使用したフラット UI デザイン	テクスチャを使用した UI デザイン

テクスチャを使用する場合は、控えめに使用するようにしてください。UI テクスチャでは 256 x 256 ピクセルを超えるものは避けることをお勧めします。

マテリアルはレンダリングに GPU を使用するため、メモリ消費量が少なくなります。

アバターのバックプレートに使用する方法は、いくつかの要因によって異なります。

UI デザインに対する個人的な好み。
作成する島の体験の種類に合った UI スタイルとデザイン
節約したいメモリの量

このチュートリアルのアバターバックプレートデザインでは、基本デザインに 3 つのマテリアルインスタンスを使用します。次のバックプレートデザインは、M_UI_Shape_Rectangle マテリアルを使用して作成されたものであり、次の内容が含まれています。

半透明のピンクの背景
名前のテキストと半透明の背景を囲むピンク色のコンテナ
プレイヤーのアバターが入る水色の円
マテリアルを使って自分だけの UI を作りましょう！「マテリアルインスタンスでカスタム UI を作成する」を参照してください。

「UI ポップアップ」のドキュメントの「ユーザーウィジェット」ワークフローを使用して、次の操作を行います。

ユーザーウィジェットを作成します。
サムネイルの名前を「Player_Info」に変更します。
サムネイルをダブルクリックして、UMG ウィジェットエディタを開きます。

ウィジェットエディタでは、バックプレートデザインのアピアランスと画面配置をレイアウトします。その後、ビューモデルを追加し、既存のプレイヤー情報を取得してバックプレートのデザインにバインドするバインディング機能を作成します。

[Event Graph (イベントグラフ)] で次の操作を行います。

右上隅の [Fill Screen (画面いっぱいに表示)] 設定を選択し、代わりに [Desired (希望する表示)] に設定します。
この設定により、ウィジェットを指定のサイズに変更して、ゲームプレイ中に UI がシームレスに表示されるようにすることができます。
カスタム HUD の UI デザインをレイアウトするには、まずイベントグラフにパネルを追加します。
[Palette (パレット)] パネルで、[Panel (パネル)] セクションに移動し、[Canvas (キャンバス)] パネルをイベントにドラッグするか、[Hierarchy] パネルに直接ドラッグします。次に、パネルの名前を「HUD_Canvas」に変更します。
[Canvas] パネルには、さまざまな UI 要素を画面上の特定の場所に固定する方法が用意されています。キャンバスにパネルを追加する前に UI デザイン計画を立て、デザインレイアウトが [Canvas] パネルに反映されるようにしてください。
デザインの一部として特定の UI 要素を使用する必要がある場合のみ、[Canvas] パネルを使用してください。たとえば、HUD を構築していて、画面上の特定の場所にさまざまな子ウィジェットを配置する必要がある場合は、このパネルを使用します。
[Fill Screen] 設定を [Desired] に変更する代わりに、[Canvas] パネルのサイズを、最も一般的な画面アスペクト比 (16:9) である 1920 X 1080 または 2560 X 1440 に変更することもできます。
[Palette] パネルの [Panel] セクションから、[Hierarchy] パネルの [HUD_Canvas] の下に Stack Box をネストし、名前を「Backplate_StackBox」に変更します。これはバックプレート UI のコンテナであり、UI 変数を構成するウィジェットをネストします。
Stack Box に変数を追加すると、パネル内で左から右に自動的に積み重ねられます。
Stack Box を使用して、UI 要素を上から下に積み重ねることもできます。
[Palette] パネルの [Common (共通)] セクションから、Backplate_StackBox と Hierarchy の下に Image をネストします。次に、Image の名前を「Avatar_Image」に変更します。これには、アバターの境界線が含まれます。
[Palette] パネルの [Panel] セクションから、Overlay を Backplate_StackBox の下にネストし、名前を「Nameplate_Overlay」に変更します。 Overlay を使用すると、ウィジェットを積み重ねて配置することができます。
[Palette] パネルから、2 つの Image をドラッグして Nameplate_Overlay の下にネストします。
マテリアルにちなんで画像の名前を「Background」と「Border」に変更します。
[Size Box (サイズボックス)] パネルをドラッグして Nameplate_Overlay の下にネストします。
Size Box を使用して、ネストされた子のプロパティを設定します。これにより、Size Box 内のものがはみ出して他の UI 要素やゲームプレイを覆ってしまうことがなくなります。
Overlay を Size Box の下にドラッグしてネストし、名前を「Text_Overlay」に変更します。
Overlay がない場合、Size Box の下に子ウィジェットを 1 つだけ配置できます。
[Palette] パネルの [Common] セクションから、2 つの Text Block をドラッグして Text_Overlay の下にネストします。 Text Block の名前を「Active」と「Inactive」に変更します。

UI レイアウトが完了しました。次に、ウィジェットのプロパティを設定して、バックプレート UI 要素のサイズを画面サイズに合わせて調整します。

コンテナパネルは、その中の最大のウィジェットに合わせてサイズを自動的に調整します。プロパティの編集を開始する前に、親パネルにすべての子が含まれている必要があります。そうしないと、[Hierarchy] タブに子 UI 要素が追加されたときに、親要素の比率が変化する可能性があります。

[Backplate_StackBox] パネルのプロパティの設定を開始して、画面の配置とバックプレートの境界を決定します。

このバックプレートのデザインでは、次のプロパティが編集されました。

Stack Box が、アンカーに近くなるように [Event Graph] の適切な配置に移動します。

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

設定	値
Anchors (アンカー)	左下隅
Alignment (アライメント)	画面の端からウィジェットにパディングを提供する座標のペアに設定する必要があります。
Size To Content (サイズをコンテンツに合わせる)	True (オン)
Orientation (向き)	水平 (すべての子ウィジェットは左から右に表示されます)。
Shear X (せん断 X)	-20.0 (Stack Box を負の右方向に傾斜させます)。

Shift + Control キーを押しながら左下隅をクリックすると、ウィジェットの位置とアライメントが自動的に更新されます。

基本的なバックプレートレイアウトが整いました。これで、作成したマテリアルを追加し、ネームプレートの Text Block を編集する準備が整いました。

バックプレートアセットを追加し編集する

ウィジェットエディタには、選択したウィジェットの設定があり、マテリアルやテキストを追加したり、[Brush (ブラシ)] 設定で使用されるアセットプロパティを変更したりできます。

[Hierarchy] パネルでのマテリアルの配置順序に注意することが重要です。アセットを追加するときは、正しく表示されることを確認してください。背景アセットは一番下にレイヤー化し、追加のアセットは上にレイヤー化する必要があります。

マテリアルインスタンスを編集する

[Hierarchy] パネルでウィジェットを選択して、マテリアルとテキストの追加を開始します。

Stack Box の下の [Avatar Image (アバター画像)] を選択してウィジェットを強調表示し、[Details] パネルでそのプロパティを開きます。
[Details] パネルで、[Brush] 設定に [Avatar Border Material (アバター境界マテリアル)] を追加します。 [Image Size (画像サイズ)] 設定を調整して、Image ウィジェットをマテリアルに合わせます。
画像をクリックすると拡大表示されます。
マテリアルは塗料のようなものです。 [Brush] 設定に追加すると、マテリアルが画像ウィジェットのスペースを埋めます。
体験に特定のアバターがある場合は、次の操作を行ってください。
* オーバーレイを作成して、アバター画像を境界マテリアルの下に重ねます。
* インポートしたアバター画像を Image 背景レイヤーに追加します。
* 最上層に境界マテリアルを使用します。
[Hierarchy] パネルで [Background Image (背景画像)] を選択し、[Details] パネルで [Overlay (オーバーレイ)] オプションを開きます。
[Details] パネルで、[Horizontal Alignment (水平アライメント)] と [Vertical Alignment (垂直アライメント)] の設定を [Center Alignment (中央アライメント)] に設定し、背景マテリアルを [Brush] 設定に追加します。 [Image Size] 設定を調整して、Image ウィジェットを背景マテリアルの色に合わせます。
画像をクリックすると拡大表示されます。
Nameplate_Overlay の下の [Border Image (境界線画像)] を選択してウィジェットを強調表示し、[Details] パネルでそのプロパティを開きます。
[Details] パネルで、[Horizontal Alignment] と [Vertical Alignment] を [Center Alignment] に設定し、境界マテリアルを [Brush] 設定に追加します。 [Image Size] 設定を調整して、境界線が背景色を囲むようにします。
画像をクリックすると拡大表示されます。

バックプレートが基本的な外観になり、Text Block を編集する準備が整いました。

ネームプレートを編集する

ネームプレートにはプレイヤーのゲーマータグが表示されます。上記で設計したバックプレートには、Size Box と Text Block の両方が含まれています。

Size Box のプロパティを編集することで、テキストが境界を越えて他の UI 要素に広がったり、プレイヤーの視界を遮ったりするのを防ぐことができます。

[Hierarchy] で [Size Box] を選択し、[Details] パネルでそのプロパティを開きます。
[Details] パネルで、[Horizontal Alignment] と [Vertical Alignment] の設定を [Center Alignment] に設定します。これにより、Text Block がネームプレート画像の中央に自動的に配置されます。 Size Box の [Width Override (幅のオーバーライド)] オプションと [Height Override (高さのオーバーライド)] オプションを [True] に設定し、Nameplate_Overlay の希望のサイズを設定します。
緑色のボックスには Size Box の境界線が表示されます。
画像をクリックすると拡大表示されます。
[Hierarchy] パネルで、Size Box を右クリックし、Text Block の [Wrap With… (…でラップ)] > [Size Box] を選択して、Size Box のプロパティに従ってプレイヤーテキストをラップします。

ネームプレート UI の基本設定が完了しました。すべての子要素は親のプロパティを引き継ぐため、それらのウィジェットに対して行う編集の量は最小限になります。

[Details] パネルでは、配置やフォントサイズ、色、ストロークなどを設定して、アクティブおよび非アクティブな Text Block を編集します。

アクティブなテキストが非アクティブなテキストとは別の色になっていることを確認します。この例では、アクティブな Text Block のフォントはサイズ 145、白、ストローク 6 であり、非アクティブな状態のフォントはサイズ 145、スレートグレー、ストローク 6 です。

アクティブプレイヤー名。

非アクティブプレイヤー名。

非アクティブなテキストボックスの [Visibility] 設定を [Hidden (非表示)] に設定します。これにより、ゲーム内でウィジェットへのバインドがトリガーされるまで、テキストが表示されなくなります。

非アクティブなテキストボックスの [Visibility] 設定を [Hidden] に設定します。

これにより、ネームプレートとアバターバックプレートのすべてのピースがまとめられます。

バインディング表示を追加する

UI デザインが構築されたので、ライブセッション中に受信する必要があるデータに基づいて、テキストボックスと Avatar_Image にバインディングを追加します。

HUD コントローラープレイヤー情報ビューモデルは、HUD の一部をカスタムウィジェットで置き換える方法を提供します。この設定を活用するには、バックプレートのビューモデルを作成する必要があります。

プレイヤー名テキスト

プレイヤー名を正しいフィールドに表示するには、次の手順に従います。

[Window (ウィンドウ)]> [View Bindings (バインディングを表示)] をクリックするか、画面の下部にある [View Bindings] を選択してドッキングし、[View Bindings] タブを開きます。
バインディング表示の HUDPlayerInfoViewModelBase リストを表示するには、下記を実行します。
1. [Window] > [Viewmodels (ビューモデル)] を選択して、[Viewmodels] ウィンドウを開きます。
1. [+Viewmodel (+ビューモデル)] に移動し、[HUD Controller Team/Squad Player Info Viewmodel Base (HUD コントローラーチーム/スクワッドプレイヤー情報ビューモデルベース)] を選択します。
HUD コントローラーチーム/スクワッドプレイヤー情報リストは、スクワッドやチームなしでコントロールプレイヤーの情報を表示する方法を提供します。
1. [Select] をクリックします。
[Hierarchy] リストから Text Block を選択するか、UI プレビュー画面の [Player Name] 領域をクリックします。
[View Bindings] タブから、[+Add Widget Active_Name] をクリックします。
[Active "PlayerName" (アクティブな「PlayerName」)] フィールドを選択し、[Text (テキスト)] > [Select] の順に選択します。
右側の空のフィールドで、ドロップダウンから [HUDPlayerInfoViewModel] > [Controlling Player Info (制御プレイヤー情報)] > [Player Name (プレイヤー名)] > [Select] の順に選択します。
最終的なバインディングは次のようになります。
Inactive_Name 要素に対して手順 2 から 3 を繰り返します。
非アクティブな名前の表示設定を変更するには、Inactive_Name に新しいウィジェットを追加します。最初のフィールドを選択し、ドロップダウンから [Visibility] > [Select] の順に選択します。
右側の空のフィールドをクリックし、[Conversion Functions (変換関数)] > [To Visibility (Boolean) (表示 (ブーリアン))] > [Select] の順に選択します。
このオプションを選択すると、3 つの新しいフィールドがポップアップ表示されます。 [Is Visible] の横にある [Link (リンク)] アイコンをクリックします。メニューから、[HUDPlayerInfoViewModel] > [Controlling Player Info] > [Is Eliminated (撃破)] > [Select] の順に選択します。
以下で、[True Visibility (真の可視性)] を [Not Hit-Testable (Self Only (ヒットテスト不可 (セルフのみ))] に設定します。 [False Visibility (False の可視性)] は [Collapsed] のままにします。これにより、プレイヤーが撃破されたり切断されたりすると、名前が Active_Name に置き換わりますが、プレイヤーが生きている場合は折りたたまれたままになります。
最終的な Inactive_Name バインディングは次のようになります。
画像をクリックすると拡大表示されます。
[Compile (コンパイル)] をクリックして変更を送信すると、プレイヤー名の作成は完了です。

プレイヤーアバターアイコン

[Hierarchy] から [Avatar_Image] を選択するか、UI プレビュー画面のプレイヤーアイコン領域をクリックします。
[+ Add Widget Profile_Image] をクリックします。
[Avatar_Image] > [Brush] の順に移動し、[Select] を押します。このバインディングは基本的に、Avatar_Image の [Details] パネルで選択された [Brush] 設定を参照します。
右側の空のフィールド内をクリックし、[Conversion Functions] > [Make Image Brush from Material (マテリアルから画像ブラシを作成)] > [Select] の順に選択します。
空の [Image Size] フィールドをウィジェットのアイコンの境界マテリアルのサイズに設定します。この例では、境界マテリアルは X=50、Y=45 です。
最終的なバインディングは次のようになります。
画像をクリックすると拡大表示されます。
[Compile] をクリックしてウィジェットを保存します。