2. Setting up the Actor Blueprint

Now that we have created a Widget Blueprint that we want to display, we can create a Widget Component inside any Blueprint and place that Blueprint in our level to display in in the game world. There are also settings on the Widget Component to determine if we want to display the Widget in World or Screen space (with World being the default option).

Steps

  1. In the Content Browser, click the Add New Button and select Blueprint Class.

    Actor_1.png

  2. Select Actor from the pop-up menu that appears, then name it 3D_Menu or a similar name.

    Actor_2.png

  3. Double-click on the new Blueprint to open it up in the Blueprint Editor.

    Actor_3.png

  4. Click the Add Component button, then search for and add the Widget type component.

    Actor_4.png

  5. Name the component MainMenu, then click the Compile and Save buttons.

  6. In the Details panel for the Widget component, under Widget Class, set it to use the MainMenu Widget Blueprint.

    Actor_5.png

  7. You can adjust the Draw Size settings to increase the scale of the widget.

    Actor_6.png

    Here we have set the X to 1200 and left the Y value at 500.

  8. There is also a Max Interaction option which will determine how far away the player can be to interact with the widget.

    Actor_7.png

    We have increased the Max Interaction to 2000.

  9. Also in the Details panel for the Widget, under Rendering, check the Two Sided option.

    Actor_8.png

    This will make the Widget visible from behind instead of invisible.

  10. Click the Event Graph tab.

    Actor_9.png

  11. Right-click in the graph and search for then add the Get Player Controller node.

    Actor_10.png

  12. Right-click in the graph and search for then add the Set Input Mode Game and UI node.

    Actor_11.png

  13. Connect each of the nodes to the existing Event Begin Play node as shown below.

    Actor_12.png

  14. Hold Ctrl and drag in the MainMenu component into the graph window.

    Actor_13.png

  15. Drag off the MainMenu component and Get User Widget Object and connect as shown below.

    Actor_14.png

  16. Drag off the GetPlayerController and Set Show Mouse Cursor to True and connect as shown below.

    Actor_15.png

    This will cause us to focus on the Widget we have specified and enable the mouse cursor so we can see where we are pointing.

  17. Click Compile and Save then close the Blueprint.

  18. In the Content Browser, drag the Blueprint into your level.

    Actor_16..png

    You can use the Move (W), Rotate (E), and Scale (R) keys to position the UI where you want in the world.

End Result

When you play in the editor, you should now see the UI widget you created in UMG appear in 3D world space. You should also be able to move the mouse over the menu items to change which one is currently highlighted. This is an example of how you can set up an interactive 3D menu but you could take the same process for creating other forms of 3D widgets such as health meters, keypads, or other interactive UI elements you want to appear in the game world.