Setting up the Widget Blueprint for 3D Widgets

Before we can display a Widget in 3D world space, we must first create the Widget Blueprint we want to display. In this tutorial we are creating a 3D menu that players can navigate however you can take this approach to create any type of 3D widget you want to display (health bars, interactive in-world UI elements, etc.)

Steps

1. In the Content Browser of your project under the root Content folder, Right-click and create a new folder called UMG.

2. Inside the UMG folder, click Add+ then under User Interface, select Widget Blueprint.

3. Name the created widget MainMenu then click the Save All Button.

4. Double-click on the MainMenu to open it up in the Blueprint Editor.

   Click image for full view.

   You should default to the Designer tab of the Widget Blueprint.

5. Navigate to the Hierarchy panel, add a Vertical Box from the Palette panel (found under the Panel section).

   You can drag-and-drop the Vertical Box onto the Root as shown in the image above.

6. In the Palette panel under Common, drag a Text widget onto the Vertical Box.

7. In the Hierarchy panel, click the Text widget, then in the Details panel, set it to Fill and Center horizontally and vertically.

8. In the Palette panel under Common, drag a Button widget onto the Vertical Box.

9. In the Hierarchy panel, click the Button widget, then in the Details panel, set Size to Fill.

10. While in the Details panel for the Button, under Style and Normal, set the Tint to any color you wish (we selected Black).

11. Also expand Hovered and set the Tint color to something other than the color used for Normal above.

    This will set the button to appear one color when Normal and another color when the button is Hovered over with the mouse.

12. In the Hierarchy panel, click the Text Block and copy it, then click the Vertical Box and paste it.

13. Repeat the previous step 2 more times so that there are 4 Text Blocks.

14. In the Hierarchy window, click the Button and copy it, then click the Vertical Box and paste it.

15. Repeat the previous step so that there are 3 Buttons.

16. Drag a Text Block onto each of the Buttons in the Hierarchy.

    Your layout should look similar to below in the graph.

17. In the Hierarchy window, click the top Text Block then in the Details panel under Content, set the Text to MY GAME TITLE.

18. Also for the Text Block in the Details panel under Appearance, you can change the size of the Font under the Font option.

    Click image for full view.

    Here we have given a header to the menu called MY GAME TITLE and set the size to 102.

19. For each of the texts that appear on the buttons, change the text to the menu options you wish (also set their sizes).

    Here is our finished menu with LOAD GAME, NEW GAME, and QUIT GAME with font sizes set to 56.

20. Click Compile, then click Save and close the Blueprint.

End Result

Our Widget Blueprint setup is complete and we can now use this as a Widget Component inside an Actor Blueprint which we will set up next. While we will not be hooking up functionality for the buttons when clicked, this will at least give us a menu that we can navigate in 3D world space which will respond to mouse interaction and will give you an idea on how to get started.