Conversion Functions: Showing Textures from a Viewmodel

The Make Image Brush From Texture and Make Image Brush From Material conversion functions provide a way for you to insert a Texture or Material from a viewmodel into an Image widget directly inside your User Widget.

Unlike the Set Material Parameter conversion functions, these two conversion functions remove the need to have a material with a Texture parameter. These conversion functions insert textures into your UI.

This example expands on the Tracker widget from the To Text tutorials by passing the Icon property from the Tracker viewmodel into an Image widget using the Make Image Brush from Texture.

Widget Setup

The same User Widget from the IntToText/Double tutorials is used to create this Tracking widget.

This tutorial has an additional Image widget that passes the Icon from the Tracker device. The existing Title and CurrentValue fields are wrapped in a Stack Box with the Horizontal orientation so the icon displays from left to right alongside the text of the widget.

1. Add the following widgets to the Hierarchy in the same order as laid out in the list below:

   1. Overlay

   2. Image (Nest the Image widget in the Overlay and rename to Bakcground.)

   3. Stack Box (Nest the Stack Box under the Overlay.)

   4. 2 X Image (Nest under the Stack Box and rename the widgets to Icon and Spacer.)

   5. Stack Box (Nest the second Stack box under the first Stack Box.)

   

2. Set the Icon image widget’s Horizontal and Vertical Alignment to Center. This ensures the icon is always centered.

   

An additional Spacer image widget is used to create space between the Icon and the text below.

Conversion Function Setup

Open the View Bindings window to bind the icon from the Tracker device to the Icon image widget in your UI.

1. Select the Icon image widget in the Hierarchy, then click +Add Widget in the View Bindings window.

   

2. In the left field, select Icon > Brush > Select. This passes a value into the Brush field of the Icon image.

   

   This Brush field can also be seen in the Details panel for the Icon image widget. Most of the fields in the Details panel are accessible through view bindings.

   

3. In the left field, select Conversion Functions > Make Image Brush from Texture > Select.

   

A number of fields appear below the binding. Refer to Make Image Brush from Texture/Material Properties to learn more about what each field does.

1. Click the chain icon next to Image, select MVVM_UEFN_Tracker > Icon > Select.

   

2. Set the Image Size to however large you want the image to be in your Tracker widget.

   The view binding will not inherit the X and Y sizes from your original Image widget. In this example, Image Size is set to 72x72px to ensure the icon is legible.

   

Final Result

Drag a Tracker device into your project and set the following options:

1. In the Details panel, set icons in the Quest Icon fields for the Small and Large icons. In this example, the T_UI_IconLibrary_Ham icons were used for the Small and Large icons.

   

The Icon Image widget is filled with the Ham icon set in the Tracker device.

Make Image Brush from Texture/Material Properties

Both conversion functions share the same fields unless specified otherwise:

• Image (only for Make Image from Texture)

  • The Texture variable to pass into the image widget’s Brush.

• Material (only for Make Image from Material)

  • The Material variable to pass into the image widget’s Brush.

• Size

  • The size of the Image or Material that is drawn.

• Tint Color

  • The color to tint the Image or Material with.

• Tile Type (only for Make Image from Texture)

  • Determines whether the Image tiles horizontally, vertically, or both when it’s passed into the image widget’s Brush. If the original Icon size is lesser than the Size specified in the conversion function, the Image will tile.

  • In this example, my icon is 64x64px, while the Size is set at 72x72px, causing it to tile.

  

Making a Custom HUD