変換関数：ビューモデルからテクスチャを表示する

Make Image Brush From Texture と Make Image Brush From Material の変換関数を使用すると、ユーザー ウィジェット内で直接、ビューモデルから Image ウィジェットにテクスチャまたはマテリアルを挿入できます。

Set Material Parameter の変換関数とは異なり、これら 2 つの変換関数では、テクスチャ パラメータを含むマテリアルは必要ありません。 これらの変換関数は、ユーザーの UI にテクスチャを挿入します。

この例では、 Make Image Brush from Texture を使用して Tracker ビューモデル から Image ウィジェット に Icon プロパティを代入し、 To Text チュートリアル から Tracker ウィジェットを展開します。

ウィジェットの設定

IntToText/Double チュートリアル の同じ ユーザー ウィジェット を使用して、このトラッキング ウィジェットを作成します。

このチュートリアルには、トラッカーの仕掛けからアイコンを渡す、追加の Image ウィジェットが含まれています。 既存の [Title] と [CurrentValue] のフィールドは Stack Box で水平方向にラップされているため、アイコンは、ウィジェットのテキストとともに左右に表示されます。

1. 以下のリストに記載されている順に、次のウィジェットを [Hierarchy] に追加します。

   1. オーバーレイ

   2. Image (Overlay で Image ウィジェットをネストし、名前を「Background」に変更します)。

   3. Stack Box (Overlay の下に Stack Box をネストします。)

   4. 2 X Image (Stack Box の下にネストし、ウィジェット名を「アイコン」と「スペーサー」に変更します。)

   5. Stack Box (最初の Stack Box の下に 2 つ目の Stack Box をネストします。)

   

2. Icon 画像 ウィジェットの 水平 および 垂直アライメント を 中央 に設定します。 これにより、アイコンが常に中央に配置されます。

   

追加の Spacer 画像ウィジェットを使用して、以下のアイコンとテキストの間にスペースを作成します。

変換関数の設定

[View Bindings] ウィンドウを開いて、トラッカーの仕掛けのアイコンを、UI 内の Icon 画像ウィジェットにバインドします。

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

   

2. 左側のフィールド で、[Icon] > [Brush] > [Select] を選択します。 アイコン画像の [Brush] フィールドに値が代入されます。

   

   この [Brush] フィールドは、Icon 画像ウィジェットの [Details (詳細)] パネルでも確認できます。 [Details] パネルのフィールドの大半は、View Bindings からアクセスできます。

   

3. 左側のフィールド で、[Conversion Functions] > [Make Image Brush from Texture] > [Select] を選択します。

   

バインディングの下に多数のフィールドが表示されます。 各フィールドの機能の詳細については、Make Image Brush from Texture/Material プロパティを参照してください。

1. 画像 の隣にある チェーン アイコン をクリックして、[MVVM_UEFN_Tracker] > [Icon] > [Select] を選択します。

   

2. Tracker ウィジェットで希望のサイズで表示されるよう、画像サイズ を設定します。

   ビューバインディングでは、ユーザーの元の Image ウィジェットの X と Y のサイズは継承されません。 この例では、アイコンの読みやすさを確保するため、画像サイズが 72x72px に設定されています。

   

最終結果

トラッカーの仕掛けをプロジェクトにドラッグして、次のオプションを設定します。

1. [Details] パネルで、小 および 大 アイコン向けに [Quest Icon] フィールド のアイコンを設定します。 この例では、小および大アイコンに T_UI_IconLibrary_Ham アイコンが使用されています。

   

Icon 画像ウィジェットは、トラッカーの仕掛けで設定された Ham アイコンが入っています。

Make Image Brush from Texture/Material プロパティ

特に指定がない限り、これら 2 つの変換関数は同じフィールドを共有しています。

• Image (Make Image from Textureでのみ使用可能)

  • 画像ウィジェットのブラシに代入されるテクスチャ変数。

• マテリアル ( でのみ使用可能)

  • 画像ウィジェットのブラシに代入されるマテリアル変数。

• サイズ

  • 描画される画像またはマテリアルのサイズ。

• 色合い

  • 画像またはマテリアルに付ける色。

• タイルの種類 (Make Image from Texture でのみ使用可能)

  • 画像ウィジェットのブラシに代入されるときに、画像を上下、左右、または上下左右に並べて表示するか決定します。 元のアイコン サイズが変換関数で指定されたサイズより小さい場合、画像はタイル化されます。

  • この例では、サイズが 72x72px に設定されているのに対してアイコンが 64x64px であるため、タイル化されています。

  

カスタム HUD を作成する