Custom Conversation UI

The Widget Editor allows you to design the look of the buttons and backgrounds for your conversations. You don't need to add text to any of the widgets in the Widget Editor to create custom modals. All the buttons and text block widgets pull the text and dialogue from your Conversation Bank.

Using the Widget Editor means you can import:

• Images

• Pre-designed dialog boxes

• Font files

A cool example of building a custom UI using the Widget Editor can be found on the TMNT Arcade Template tutorial page.

To open the Widget Editor:

1. Right-click inside the Content Browser and select User Interface > Widget Blueprint.

2. Select Modal Dialogue Variant from the Widget Blueprint Selection window.

3. Name your Widget Blueprint and double-click the widget thumbnail to open the Widget Editor.

4. Creating custom conversation boxes uses the workflows outlined on the Widget Editor page.

The widgets you’ll most likely use with the Conversation device include:

• Canvas Panel - A panel to place all the widgets with alignment control, and more.

• UEFN TextBlock for ConversationModalDialogViewModel - For the conversation title text.

• UEFN TextBlock for ConversationModalDialogViewModel - For the conversation body text.

• UEFN Button for ConversationModalDialogViewModel - For all buttons/text choices.

Binding Values

Binding values refers to the text entered in the Conversation Graph. All the text entered in the conversation nodes is added to the widgets during gameplay when the widgets are properly bound to widgets in the Viewmodel.

Binding the text values for the custom conversation box begins with the Hierarchy panel in the Widget Editor.

1. Select a widget from the Hierarchy panel. You can start at the top of the hierarchy and work down to the bottom of the list.  

2. Click View Bindings from the bottom toolbar. The Viewmodel panel opens.  

   

3. Select the element you need, then click + Add Widget from the Viewmodel panel. This automatically adds the widget to the viewmodel list.

   

   Widgets can also be added to the viewmodel by clicking in the Widget field and selecting the widget from the dropdown menu.

   

4. Select the property to bind the on the widget by clicking the Edit icon on the UEFN Text property and selecting Text > Select.

   

5. Select either a text value or a button value from the CreativeModalDialogueViewmodel dropdown menu. This adds the selected value to the widget. The selection should be made based on the type of widget in the hierarchy.

   

6. Click Select to finish binding the values to the widgets.

   1. Text values include Title, Body or Button# Main Text:

   2. Title is the value set in the Speaker Name field in the Conversation device or the value set in Title in the Popup Dialog device.

   3. Body is the text that follows and usually presents the player with options in the conversation. These would be the Speech nodes that link to the Default Entry Point node.

   4. Button# Main Text is the text that shows up in the response nodes, as they are ordered in the Conversation Graph.

   

Button values should be numbered according to the number of button widgets used. The values are set in the same numerical order that the button widgets were added. The buttons are the Response nodes in a Conversation Graph. This binds the button text to each of the buttons accordingly.

Binding Buttons

Binding buttons refers to initiating events after a button selection. This can be a single event where an NPC provides an item, or a complex exchange where the NPC has goods to sell, which sets off a series of events.

To program the events firing in the custom button widgets you need to add the event logic to the button from the viewmodel.

1. Click View Bindings from the bottom toolbar.

   

2. Select one button at a time from the Hierarchy panel in the Widget Editor. Selecting the widget from the Hierarchy panel automatically places the selected button widget in the Widget field.

3. Click + Add Widget. The widget is added to the list again.

   

4. Select the arrow field and choose One Way to View Model.

   

5. Select the button and choose the On Clicked value. Make sure to click Event in the selection window, not Select.

6. Select the Response value in the viewmodel.

7. Choose the Response value you want for the button in the line below. The resulting binding should look like this:

   

You can also set up your buttons to hide/unhide depending on whether values are assigned to them:

1. Select the button from the Hierarchy and add a widget to the button.

2. Choose the Visibility value.

3. Find the corresponding Button # Visibility on the right hand side of the binding, and select it. The resulting binding should look like this:

   

4. Now the button will only be visible if there is a response to select.

Click gif to enlarge.

Without the Visibility binding, the text would clear from the response field and leave an empty choice box for the players:

Click gif to enlarge.Text > Select

Binding Materials

Materials can be used in UMG to populate the Image widget. Materials used with UMG must be in the UI material format for the widget to recognize the Material file and use it with the Image widget. To learn more about UI materials, see the UI Materials documentation.

Materials can be used to populate the Materials Conversation array. You can create custom materials with imported files which can be converted to textures in the Material Graph. The following file types aren't an exhaustive list of accepted file types, but are standard for importing raster image assets:

• .png

• .webp

• .jpg

In the Conversation device, add your materials to the Conversation Material array. Then, in the Conversation Graph, the Set Material node must be present in the Conversation Graph. The materials are referenced from the graph in the bindings.

To bind a material to a Conversation device, do the following:

1. In the UI Widget Editor, click the Image widget in the Hierarchy panel.

   

2. Click View Bindings to open the bindings panel. The panel opens with a binding line for the Image widget.

   

3. Click +AddWidget button to add the Image widget to the View Bindings panel.

   

4. Click the Edit icon on the Image widget in the left field to open the widget options.

   

5. Select Image Widget > Brush > Select. This adds selectable Brush bindings to the right field.

   

6. Click the Edit icon in the right field to open the binding options.

   

7. Select Conversion Function > Make Image Brush From Material > Select. This opens further options to pinpoint the material you want to use for this widget.

   

8. From the Material slot select the Link icon then from the menu choose Creative Modal Dialog Viewmodel > Art 01 Material > Select.

   

9. From the Image Size slot, input the same size that you used in the Image widget's Image Size option in the Details panel.

   

The end result is a material that identifies the character speaker.

Creating Conversation UI Animations

You can also use Conversation Material in a UI animation. The Conversation Type must be set to Box or Custom in the Conversation device. From the Material Graph, the Conversation material can be referenced from the Conversation device when you use the Play Conversation Animation node.

To bind this Conversation node to your UI widget, you must use the Progress value in the Viewmodel to link to the UI animation you create in Sequencer.  To learn how to animate your material see the Animating UI document.