1. Setting up the Widget Blueprint

Here we create the Widget Blueprint that we want to display in the 3D game world.

On this page

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.


  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.


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


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


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


    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.


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


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


  9. In the Hierarchy window, 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 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.


  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 on to 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.


    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.

Select Skin

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback