Creating Widgets

Once you have created and laid out your Widget Blueprint, in order for it to be displayed in-game, you will need call it by using the Create Widget and Add to Viewport nodes inside another Blueprint (Level Blueprint or a Character Blueprint for example).

CreateWidgetNode.png

In the example above, the Create Widget node is calling the Widget Blueprint specified under the Class section (Owning Player is the Player Controller it is applied to where blank results in the default Player Controller) and the Return Value is the resulting product.

Also in the example above, the Return Value is being assigned to a variable titled Main Menu which allows us to access the Widget Blueprint later instead of re-creating the Widget (and this can be used to remove the Widget). Finally, the Add to Viewport is what draws the Widget Blueprint onscreen and we are specifying that the Main Menu variable (which holds the created Widget) be the Target that is added.

To remove the Widget from being displayed by using the Remove from Parent node and specify the Target Widget Blueprint.

RemoveFromViewport.png

Set Input Mode and Show Cursor

There may be instances when you want the player to interact with your UI and there may be instances when you want them to completely ignore it. There are some nodes that can be used to determine how the player interacts with the UI, which are of the Set Input Mode type as seen below.

SetInputModes.png

  • The left node above, Set Input Mode Game and UI, does as the name implies and allows the player to manipulate the game via inputs as well as UI (for example controlling a character onscreen but also having access to clicking on any buttons or UI elements you may have).

  • The center node above, Set Input Mode Game Only enables input only for the game and ignores UI elements (this is perfect for non-interactive UI elements like Health, Points, or Time display).

  • The right node above, Set Input Mode UIOnly is an edge case node and is used when you only want to allow for UI navigation only and no game input. This completely disables all game controls and UI consumes all input, use this node sparingly.

To supplement the nodes above, you may want to Enable/Disable the Mouse Cursor from being displayed. You can do so by using the Set Show Mouse Cursor node. Drag off a Get Player Controller node, then use the Set Show Mouse Cursor node and check it to True or False to display or hide the Mouse Cursor.

ShowCursor.png

Above, I is used to toggle between showing/hiding the Mouse Cursor.

Adding Widgets to Widgets

Instead of using the Add to Viewport node for each Widget, it is possible to add them to other Widgets as well.

AddChild.png

The example above shows how a Scroll Box Widget called start_Button is appended to a new Widget called Main Menu using the Add Child function.

The Add Child node is for parenting one widget to another in a panel while the Add to Viewport adds the widget to the root viewport as if it is a new window. In order to remove a child widget, you need to get your Parent and call RemoveChild.