変換関数：UMG でマテリアル パラメータを設定する

ゲームプレイのイベントとデータに基づいて更新される、変化するマテリアルを含む動的 UI を作成します。 UI を動的にするには、UI マテリアル、View Bindings、さらに 3 つの Set Material Parameter 変換関数 (Set Texture、Scalar、および Vector Parameter) を組み合わせて使用する必要があります。

Unreal Editor for Fortnite (UEFN) では、多数のパラメータを含む基本マテリアルが提供されています。 Tracker の仕掛け を使用すると、敵の撃破の進行状況に応じて動的に更新されるマテリアルの例として、プログレス バー形式のウィジェットで撃破数を追跡できます。

マテリアル インスタンスを作成する

これらのマテリアル インスタンスの作成に使用されるアセットはすべて、UEFN でネイティブに入手できます。 この例のマテリアルを作成する方法については、 メーター マテリアル を マテリアル チュートリアル セクションで参照してください。

1. M_Tracker の マテリアル インスタンス を作成して、「MI_TrackerExample」という名前を付けます。

   

2. 新しい マテリアル インスタンス で、好みに応じて IconScaleX と IconScaleY を変更します。 この例のマテリアルは、それぞれ 0.7 に設定されています。

   進行状況に応じてウィジェットを塗りつぶす、撃破 ProgressColor をカスタマイズできます。 TrackerProgress、アイコン、IconColor のチェックは外しておきます。 これらは後で、トラッカーの仕掛けで使用されます。

   

アイコンは、「Fortnite」フォルダ ([Textures] > [Icons]) にあります。

トラッカー ウィジェットを設定する

トラッカーの仕掛けで参照できるカスタム トラッカー ウィジェットを UMG で作成し、カスタム撃破 UI でプレイヤーの撃破数を追跡します。

1. コンテンツ ブラウザ 内で右クリックし、[User Interface (ユーザー インターフェース)] > [Widget Blueprint (ウィジェット ブループリント)] > [User Widget (ユーザー ウィジェット)] を選択します。

   

2. 次の例のように、トラッカーのマテリアルとトラッカーのタイトルを表示する、シンプルなトラッカー ウィジェットを作成します。

   

3. Overlay を widgetgraph にドラッグします。 この方法で、ウィジェットを構成するすべての要素を積み重ねます。 このウィジェットを画面のどこに表示するか決定することもできます。

   

4. Stack Box を Overlay 内にネストし、Tracker のマテリアル とタイトルを左右方向に配置できるようにします。

   

5. Overlay を Stack Box 内にネストし、Tracker のマテリアル を作成してシンプルな暗い背景の Stack Box に重ねて表示できるようにします。

   

6. Overlay 内に、2 つの Image ウィジェットをネストします。 F2 キーを押して、ウィジェットの名前を「TrackerBackground」と「TrackerMaterial」に変更します。

   

7. TrackMaterial を選択して、[Details (詳細)] パネルでオプションを開きます。 [Details] パネルで [Brush (ブラシ)] > [Image (画像)] を選択して、作成した MI_TrackerExample マテリアルを検索します。

   

8. 下の画像サイズを X=96.0、Y=96.0 に設定します。 ゲーム内でよく見える大きさにする必要があります。

   

   これでトラッカーのマテリアルが設定できました。トラック マテリアルが読みやすくなるように、マテリアルの背景を作成する必要があります。

9. [TrackerBacking] を選択し、[Hierarchy (階層)] で、[Details] パネルで [Brush] > [Draw As (描画対象)] > [Rounded Box (角丸ボックス)] を選択します。

   

10. 上記の [Tint (ティント)] オプションを中間色に設定して読みやすくします。 この例では、[Hex sRGB] フィールドのティントは 3A3A3AFF に設定されています。

    

11. [Horizontal Alignment (水平アライメント)] と [Vertical Alignment (垂直アライメント)] のオプションを [Fill (塗りつぶし)] に設定します。 これで TrackerBacking では、TrackerMaterial を含むコンテナが確実に塗りつぶされます。

    

TrackerMaterial に背景が作成され、すべてのゲーム内シーンで読みやすくなりました。

トラッカーのテキストを設定する

トラッカーのマテリアルがトラッカー ウィジェットで参照されたら、UI で追跡されているプレイヤーに通知するテキストを設定します。

1. Overlay を含む Stack Box に Text Block をネストします。 Text Block の名前を「TrackerTitle」に変更します。

   

2. [Hierarchy] で [TrackerTitle] を選択し、[Details] パネルで [Vertical Alignment] を [Center Align Vertically ( 垂直方向に中央揃え)] に設定します。 これでテキストが常に TrackerMaterial に対して中央揃えになります。

   

3. テーマに合わせてサイズを縮小したり、アウトラインを追加したり、書体を変更したりすることにより、フォント スタイルの一部を変更します。

   この例では、次のように変更されています。 フォント サイズ = 24 [Typeface] = [Bold (太字)] アウトライン = ダーク レッド

   [Appearance (アピアランス)] カテゴリ内のフォント関連の設定はすべてカスタマイズできます。

   

すべての最終デザイン タッチが完了すると、TrackerMaterial と TrackerTitle の準備が整います。

両アイテムの間にスペースを追加するには、TrackerMaterial を含む [Overlay] の右側にパディングを追加します。

1. Overlay を選択します。

2. [Details] パネルで、[Padding (パディング)] を展開します。

3. [Right Padding (右側のパディング)] を 16px に変更します。

画像とテキストの間にスペースが追加されます。

複数のオブジェクト間のスペースを簡単に変更する場合は、これらのオブジェクトを含む Stack Box に Image ウィジェットを挿入し、Image Size X を必要なスペースに設定して、[Draw As None] に設定します。 画像は表示されなくなりますが、Stack Box 内のスペースは保持されます。

オブジェクト間のスペースが管理しやすくなり、各ウィジェットでパディングを探す必要がなくなります。

Set Material Parameter を設定する

次に、トラッカー ウィジェットのマテリアル パラメータにトラッカーの仕掛けの値をバインドします。

ビューモデルを追加する

1. メインメニューから [Window (ウィンドウ)] > [Viewmodel (ビューモデル)] を選択して、トラッカー ビューモデルをウィジェットに追加します。

   

2. [Viewmodel] ウィンドウで、[+Viewmodel] を選択します。

   

3. ポップアップ ウィンドウで、[Device - Tracker View Model (仕掛け - トラッカー ビューモデル)] を選択します。

4. メニュー バーから [Window] > [View Bindings] を選択して、[View Bindings] パネルを開きます。

   

トラッカーからデータのバインディングを開始して、ウィジェットを操作する準備が整いました。

Set Scalar Parameter

スカラー パラメータ は、整数 値または 浮動小数 値を取り込みます。 たとえば、プログレス バーは、トラッカーでのユーザーの撃破数に応じて、TrackerMaterial で塗りつぶされます。

マテリアルは、トラッカーの仕掛けによる撃破数を変換して TrackerMaterial を塗りつぶすように設定されています。 ユーザーは、そのデータを MI_TrackerExample のプログレス マテリアル パラメータにバインドするだけです。

トラッカーの早期撃破

ほぼ完全な撃破トラッカー

1. [TrackerMaterial] ウィジェットを選択して、[View Bindings] ウィンドウで [+Add Widget (+ウィジェットを追加)] をクリックします。

   

2. 左側のフィールドで、[TrackerMaterial] > [Brush] を選択します。

   

3. 右側のフィールド (TrackerMaterial のブラシにバインドするデータを含む) で、[Conversion Functions] > [Set Scalar Parameter] を選択します。

   

   これにより、ブラシ 設定で Set Scalar Parameter と呼ばれる関数が実行されます。 現在、ブラシに MI_TrackerExample が含まれるため、ユーザーが指定したスカラー パラメータを検索して値を代入します。

   

4. [Parameter Name (パラメータ名)] フィールドに「TrackerProgress」と入力すると、Tracker の進行状況に応じてマテリアルが塗りつぶされます。

   

   ユーザーのマテリアルでは正しいパラメータを見つけられないため、パラメータを間違えないことが重要です。 パラメータ名を忘れた場合は、マテリアル インスタンスを開いて、右側にあるパラメータを検索します。

5. 値 の隣にある リンク アイコン を選択して、ドロップダウン メニューから [MVVM_UEFN_Tracker] > [Value] を選択します。 これにより、トラッカーの現在の進行状況がバインドされます。

   

これで、現在のトラッカーの進行状況がマテリアルに直接入力されるようになりました。 トラッカーに割り当てられたプレイヤーが撃破すると、トラッカーのマテリアルがゆっくりと塗りつぶされます。

Set Vector Parameter

ベクター パラメータは、Vector4 の値を取り込みます。 ベクターは通常、色 - RGBA (4 つのベクター) に使用されており、ユーザーは、仕掛けの設定に応じて、Vector4 を使用してアイコン カラーを変更します。

ベクターの詳細については、Unreal Engine ドキュメントの「 ベクターのマテリアル式 」を参照してください。

1. [Hierarchy] で [TrackerMaterial] を選択し、[View Bindings] ウィンドウを開いて [+Add Widget (+ウィジェットを追加)] を選択します。

   

2. 左側の空のフィールドで [TrackerMaterial] > [Brush] プロパティを選択します。

   

3. 右側の空のフィールドで [Conversion Functions] > [Set Vector Parameter] を選択します。

   

   前述のように、このバインディングは TrackerMaterial (この例では MI_TrackerExample) から ブラシ を取得し、ユーザーがマテリアル インスタンスで指定した ベクター パラメータ を設定します。 ユーザーは、トラッカーの仕掛けで設定されているあらゆるオプションに合わせてアイコン カラーを設定できます。

4. [Parameter Name] フィールドに「IconColor」と入力します。

   

5. 値 の隣にある リンク アイコン を選択して、[MVVM_UEFN_Tracker] > [Color] を選択します。 これで、トラッカー ビューモデルから Icon Color プロパティに値が設定されます。

   

トラッカーの仕掛けに設定されているすべてのアイコン カラーがマテリアルに渡されます。 オレンジ色のアイコンにする場合は、仕掛けで設定するだけで、オレンジ色になります。 この例で使用されたマテリアルはその設定が済んでいます。

Set Texture Parameter

テクスチャ パラメータは Texture2D の値を取り込みます。 テクスチャは通常、画像またはアイコンに使用されるため、仕掛けの設定に基づいて、テクスチャを使用してアイコンを変更します。

テクスチャの詳細については、Unreal Engine ドキュメントの「 テクスチャ 」を参照してください。

1. [Hierarchy] で[TrackerMaterial] を選択し、[View Bindings] ウィンドウで [+Add Widget (+ウィジェットを追加)] を選択します。

2. 左側の空のフィールドで [MVVM_UEFN_Tracker] > [Brush] を選択します。

3. 右側の空のフィールドで [Conversion Functions] > [Set Texture Parameter] を選択します。

   

4. [Parameter Name] フィールドに「Icon」と入力します。

   パラメータ名を入力するときは間違えないようにしてください。 パラメータ名を忘れた場合は、MI_TrackerExample で設定可能なパラメータのリストを確認できます。

   

5. 値 フィールドの隣にある リンク アイコン を選択して、ドロップダウン メニューから [MVVM_UEFN_Tracker] > [Icon] を選択します。 これで、トラッカー ビューモデルから Icon プロパティに値が設定されます。

   

テクスチャ パラメータが設定されました。 トラッカーの仕掛けで設定されたアイコンを問わず、パラメータがウィジェットに渡されます。

トラッカーのテキストをトラッカー名にバインドする

次に、作成したトラッカーのタイトルを、トラッカーの仕掛けの同じ設定にバインドします。

1. [Hierarchy] で [TrackerTitle] を選択し、[View Bindings] ウィンドウを開いて [+Add Widget (+ウィジェットを追加)] を選択します。

   

2. 左側の空のフィールドで、ドロップダウン メニューから [TrackerTitle] > [Text] を選択します。

   

3. 右側の空のフィールドで、ドロップダウン メニューから [MVVM_UEFN_Tracker] > [Name] を選択します。

   

このバインディングにより、トラッカーのタイトルが Text Block に渡されます。

トラッカーの仕掛けを設定する

次に、トラッカーの仕掛けの UMG で作成したウィジェットを参照します。 それにより、撃破 UI が HUD で表示されるようになります。

1. トラッカーの仕掛け をプロジェクトに追加します。

2. Tracker のタイトル に名前を付けます。 この名前がウィジェットの TrackerTitle テキストに表示されます。

   

3. [HUD Widget (HUD ウィジェット)] フィールドにウィジェットを追加します。

   

4. [Quest Icon (クエスト アイコン)] フィールドを、Tracker で表示させたいアイコンに変更します。 MI_TrackerExample 上のデフォルトのエイリアン アイコンがオーバーライドされます。

   

5. アイコン カラー で 色 を選択します。 上記で設定したアイコンが、選択した色を取り込みます。

   

6. その他の設定を続けて、プレイヤーにトラッカーを追加します。

最終結果

これで 左上にカスタムのトラッカー ウィジェットが表示されるようになりました。 ゾンビや他のプレイヤーを撃破した場合にも、ウィジェットがゆっくりと塗りつぶされます。 このように、Set Material Parameter を使用してユーザー独自のカスタム ウィジェットにゲームプレイ データをリンクさせることができます。