1. Setting up the Widget Blueprint

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.)

For this guide, we have created a new project using the Blueprint Third Person template with Starter Content enabled.

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 New then under User Interface, select Widget Blueprint.

    3DWidgets_1.png

  3. Name the Widget Blueprint MainMenu then click the Save All Button.

    3DWidgets_2.png

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

    3DWidgets_3.png

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

  5. In the Hierarchy window, delete the CanvasPanel then add a Vertical Box from the Palette window (found under the Panel section).

    3DWidgets_4.png

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

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

    3DWidgets_5.png

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

    3DWidgets_6.png

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

    3DWidgets_7.png

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

    3DWidgets_8.png

  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.

    3DWidgets_9.png

    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 window, 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.

    3DWidgets_10.png

  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.

    3DWidgets_11.png

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

    3DWidgets_12.png

    Your layout should look similar to below in the graph.

    3DWidgets_13.png

  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.

    3DWidgets_14.png

    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).

    3DWidgets_15.png

    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.