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.
-
Inside the Content > FirstPersonBP > Blueprints folder, open the FirstPersonCharacter Blueprint.
-
Under First Person Camera > Mesh2P > FP_Gun > Sphere add a Widget Interaction component.
This enables us to direct the interaction focus wherever we aim the gun.
-
In the Details panel for the Widget Interaction component, zero out the Location and check Show Debug.
-
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.
-
Connect the Right Mouse Button node Pressed pin to the Press Pointer Key node, and set the Key to Left Mouse Button.
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).
-
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.
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.
-
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.
-
Navigate to Content Browser > Add New > User Interface, create a Widget Blueprint called InteractiveWidget.
-
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.
-
Select the Button element and in the Details panel, under Appearence > Style, change the Hovered Tint to a different color.
-
Select the Text element and in the Details panel, change the Text to 0 and increase the Font Size to 48.
-
In the Event Graph, create a Text Variable called Value. Compile the Blueprint and set Value to 0.
This is the variable that updates when you click the button.
-
In the Visual Designer, select the Text element and in the Details panel, Bind the Text with the Value property you just created.
-
In the Button element Details, go to Events. Find the On Clicked element and click the plus sign +.
This will fire whenever the button is clicked on, which is called from inside the FirstPersonCharacter Blueprint.
-
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.
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.
-
Drag off the String To Int pin to add an Integer + Integer node, and set the node to + 1.
-
Hold Alt and drag the Value variable into the graph and connect the Integer + Integer node to the On Clicked Event.
When connecting the Value node, Blueprint automatically creates the ToText(int) conversion node.
-
Compile and Save the Blueprint. Minimize or close the Blueprint tab.
3 - Creating the Widget Blueprint
-
In the Content Browser, create a new Blueprint based on Actor called ExampleWidget, and add a Widget component to the Blueprint.
This will represent the 3D version of our InteractiveWidget Widget Blueprint.
-
In the Widget Details panel, under User Interface, change the Widget Class to InteractiveWidget.
-
In the Content Browser, drag and drop the ExampleWidget Blueprint into the level. Scale, rotate, and position as desired.
-
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.
