Creating and Displaying UI

Typically in most games you will want to communicate some information to your players through your game's User Interface. This can range from things like Main Menus, in-game Pause Menus, Health or Experience, Inventory Items, or help text to instruct players what to do in a given situation.

With Unreal Motion Graphics (UMG), you can create a Widget Blueprint to handle the display of UI elements in your project. The Widget Blueprint uses Blueprints Visual Scripting to design the layout as well as script functionality for the UI element such as what happens when a button is clicked or if a value changes, etc.

In this how-to we will create a Widget Blueprint, add some Text to it, then through the Level Blueprint display it when a key is pressed.

Steps

For this how-to, we are using the Blueprint Third Person Template. However, you can use any project you wish.

  1. In the Content Browser click the Add New button, then under User Interface select Widget Blueprint. Regardless of the type of UI element you wish to create in UMG, you will need to do so inside a Widget Blueprint.

    CreatingWidgets01.png

  2. Enter the name SampleUI for the name of the Widget Blueprint, then double-click and open it.

    CreatingWidgets02.png

    Upon opening a Widget Blueprint you will be presented with the UMG Editor Interface. The Widget Blueprint opens by default to the Designer tab, which is where you perform your visual layout of your UI elements. To script functionality for the Widget Blueprint, you can click the Graph button in the top right corner of the editor.

    Click for full view.

  3. Inside the Palette window, left-click and drag a Text widget into the Visual Designer graph. The Palette window contains several different types of widgets that you can use to construct your UI elements.

    CreatingWidgets04.png

  4. In the Details panel for the Text Widget, click the Anchors dropdown and select to Anchor to the Center. This will ensure that as the viewport size changes, the Text widget will stay anchored relative to the center of the screen.

    CreatingWidgets05.png

  5. In the Details panel click the Size to Content option, change the Text, Color and Opacity and Font Size options. The Size to Content option as the name suggests will adjust the size of the widget to fit its content. We also changed the text to "Hello World!", changed the color of the text to green, and set the Font Size to 56.

    CreatingWidgets06.png

  6. Click the Compile button, then Save and close the Widget Blueprint.

    CreatingWidgets09.png

  7. From the Main Toolbar, click the Blueprints button then select Open Level Blueprint.

    CreatingWidgets10.png

    We are now going to determine when to display the SampleUI Widget Blueprint we created.

  8. Right-click in the graph and search for and add the Create Widget node.

    CreatingWidgets11.png

  9. On the node, click the Class drop-down menu and search for and add our Widget Blueprint SampleUI.

    CreatingWidgets12.png

  10. Right-click on the Return Value pin and select Promote to Variable and call it SampleUI.

    Whenever you create the Widget Blueprint (your UI), it's a good idea to promote that to a variable so you can access it later through Blueprint script.

    CreatingWidgets13.png

  11. Drag off the out pin on the Set node and search for and add the Add to Viewport node. This is how we tell the Widget Blueprint to be displayed in-game.

    CreatingWidgets14.png

  12. Right-click in the graph and search for and add the Enter Keyboard Event.

    CreatingWidgets15.png

  13. Connect the Pressed pin to the executable pin of the Create Sample UI Widget node. At this point we have stated that when we press Enter, create the widget and store it as a variable before displaying it.

    CreatingWidgets16.png

  14. Hold Ctrl and drag in the SampleUI variable into the graph from the My Blueprint panel.

    CreatingWidgets17.png

  15. Drag off the pin of the new node and search for and add the Remove from Parent node. The Remove from Parent node is how we tell Widget Blueprints to be removed from the viewport.

    CreatingWidgets18.png

  16. Connect the Release pin of the Enter node to the Remove from Parent executable in pin. Now when we press Enter the text will be displayed and when we release Enter, the text will be removed.

    CreatingWidgets19.png

  17. Close the Level Blueprint, then click the Play button from the Main Toolbar.

    CreatingWidgets20.png

End Result

When you play in the editor, you should have something similar to below whenever you press/release the Enter key.