Creating 3D Widget Interaction

An example of how to create in-game 3D widget interactions.

Windows
MacOS
Linux

Traditional UI consists of 2D space on top of a 2D or 3D world, such as menus, health bars, or score displays. However, there may be times when you want players to interact with a piece of UI in your 3D environment like a keypad, a virtual menu, or an inventory (this is esspeically prevalent in VR projects). With the Widget Interaction component, you can create any type of interactive widget such as sliders, combo boxes, check boxes, and more, then interact with them in your 3D envronment.

For more information, see the Widget Interaction Component page.

In this how-to, we will create an interactive widget with a button that the player can hover over and click on to increase the numerical value.

1 - Scripting the Widget Interaction

First, you need to set up the script directing the mouse interaction with the widget in the FirstPersonCharacter Blueprint.

For this how-to, we are using the Blueprint First Person Template with Starter Content enabled.

  1. Inside the Content > FirstPersonBP > Blueprints folder, open the FirstPersonCharacter Blueprint.

    WidgetInteraction_01.png

  2. Under First Person Camera > Mesh2P > FP_Gun > Sphere add a Widget Interaction component.

    widgetinteractionNEW_02.png

    This enables us to direct the interaction focus wherever we aim the gun.

  3. In the Details panel for the Widget Interaction component, zero out the Location and check Show Debug.

    WidgetInteraction_04.png

  4. Inside the Event Graph, add a Right Mouse Button Mouse Event. Then, drag in the Widget Interaction component and add a Press Pointer Key node.

    WidgetInteraction_05.png

  5. Connect the Right Mouse Button node Pressed pin to the Press Pointer Key node, and set the Key to Left Mouse Button.

    WidgetInteraction_06.png

    By default, UMG registers click events as a result of a Left Mouse Button key press. Using the Right Mouse Button node enables us to simulate the interaction when the Right Mouse Button is pressed. You can use any Key Input event to call this function (such as a trigger press or button press to simulate a Left Mouse Button click).

  6. Add a Release Pointer Key node and set the Key to Left Mouse Button. Connect the Right Mouse Button node Released pin to Release Pointer Key.

    WidgetInteraction_07.png

    The Pressed Pointer Key and Released Pointer Key nodes look similar, so double check to make sure you have the correct nodes. Without these nodes, the integer counter will not work properly.

  7. Compile and Save the Blueprint. Minimize or close the Blueprint tab.

2 - Creating the Interactive Widget

With the scripting set up, now you need to create the widget. For this example, we are adding a button that you can click on with the Right Mouse Button. The text on the button will indicate the number of times you clicked the button.

  1. Navigate to Content Browser > Add New > User Interface, create a Widget Blueprint called InteractiveWidget.

    WidgetInteraction_08.png

  2. In the Visual Designer, remove the Canvas Panel (the highlighted box in the center) and add a Button with a Text widget on top of the button.

    Click for full view.

  3. Select the Button element and in the Details panel, under Appearence > Style, change the Hovered Tint to a different color.

    WidgetInteraction_10.png

  4. Select the Text element and in the Details panel, change the Text to 0 and increase the Font Size to 48.

    WidgetInteraction_11.png

  5. In the Event Graph, create a Text Variable called Value. Compile the Blueprint and set Value to 0.

    WidgetInteraction_12.png

    This is the variable that updates when you click the button.

  6. In the Visual Designer, select the Text element and in the Details panel, Bind the Text with the Value property you just created.

    WidgetInteraction_13.png

  7. In the Button element Details, go to Events. Find the On Clicked element and click the plus sign +.

    WidgetInteraction_14.png

    This will fire whenever the button is clicked on, which is called from inside the FirstPersonCharacter Blueprint.

  8. In the Event Graph, hold Ctrl and drag the Value variable to the graph. Then, drag off the pin to add a To String node, followed by a String To Int node.

    widgetinteractionNEW_14.1.png widgetinteractionNEW_14.2.png

    This converts the Text to a String, and then from a String to an Integer (Int) so we can increase the numerical value when you click the button.

  9. Drag off the String To Int pin to add an Integer + Integer node, and set the node to + 1.

    widgetinteractionNEW_16.2.png

  10. Hold Alt and drag the Value variable into the graph and connect the Integer + Integer node to the On Clicked Event.

    widgetinteractionNEW_16.png

    When connecting the Value node, Blueprint automatically creates the ToText(int) conversion node.

  11. Compile and Save the Blueprint. Minimize or close the Blueprint tab.

3 - Creating the Widget Blueprint

  1. In the Content Browser, create a new Blueprint based on Actor called ExampleWidget, and add a Widget component to the Blueprint.

    widgetinteractionNEW_17.png

    This will represent the 3D version of our InteractiveWidget Widget Blueprint.

  2. In the Widget Details panel, under User Interface, change the Widget Class to InteractiveWidget.

    widgetinteractionNEW_18.png

  3. In the Content Browser, drag and drop the ExampleWidget Blueprint into the level. Scale, rotate, and position as desired.

    WidgetInteraction_20.png

  4. Compile and Save your project. Click Play to interact with your widget!

End Result

When you play in the editor, you will have something similar to below. You can use the Left Mouse Button to fire your weapon and when pointing at the button, you enter the Hovered state (causing it to change its style). When you Right Mouse Button click on the button, the text value will increase each time it is pressed.

As noted during the steps, we are using the Right Mouse Button to register click events however you can use gamepad button clicks to register Pointer Key Presses/Releases or (as shown below) Motion Controller Trigger presses. Here we point our Right Motion Controller (with an attached Widget Interaction component) at the button and press the Right Trigger to register a button click.

WidgetInteraction_21.png

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback