How to create Menus and UI in Unreal Engine (Widget Blueprint)

What is a Widget Blueprint in Unreal Engine?

The Widget Blueprint is a special tool in Unreal Engine that helps you design and create user interface (UI) elements, such as signs, buttons, and menus, that players see and interact with in the game.

This widget provides a visual interface for designing UI elements organized by layers, similar to Photoshop or other design software, as well as Blueprints. Developers can create anything from simple to complex UI systems by arranging and connecting Blueprint nodes, creating bindings, interactions, animations, and other functionalities.

So, in simple terms, Widget Blueprints help you create the user interface (UI), game menus, HUDs (heads-up displays), interactive elements, and other UI components that players interact with during gameplay.

How to create a Widget Blueprint?

To create a Widget Blueprint, simply right-click or use the “+ Add” button in the Content Browser, then select ‘User Interface → Widget Blueprint‘.

Then click on the “User Widget” button and give the asset a name.

Create Widget Blueprint UE

Palette, Canvas and Text

Canvas Panel

Once inside the Widget Blueprint, the first item that you usually want to add is a Canvas Panel.

To do so, simply search for the Canvas Panel in the Palette and drag and drop it into the Designer or the Hierarchy panel.

  • Canvas Panel: allows many children, anchors, and has an absolute layout. It is a designer friendly panel that allows widgets to be laid out at arbitrary locations, anchored, and z-ordered with other children of the canvas. The canvas is a great widget for manual layout, but bad when you want to procedurally generate widgets and place them in a container (unless you want absolute layout).

Text

One of the most basic widgets in the Widget Blueprint is the Text Widget.

You’ll find all the text parameters in the Details panel. Here, you’ll be able to change the text font, size, color, set up what you want to write in the text box, and much more.

You will find this last option under “Content -> Text“.

Widget Blueprint Designer Unreal Engine

How to show the User Interface on Screen?

After you have created the Widget Blueprint and added some widgets to it, such as simple text, you can test if it is working by displaying the user interface on the screen.

To do this, you just need to add the following Blueprint code to the Level Blueprint or any other Blueprint that is in the level.

Create Widget and Add To Viewport

To display the Widget Blueprint, you’ll need two Blueprint Nodes:

  • Create Widget: Use this node to select the Widget Blueprint that you want to show on the screen. Once you have selected it in the Class dropdown, connect the Return Value to the “Add to Viewport” node.
  • Add to Viewport: This node will display the selected Widget Blueprint on the game screen.
Create Widget and Add to Viewport Blueprints UE5

I will be expanding this article in the future as there is a lot more to Widget Blueprints. So stay tuned!

Hope this helps! Keep on creating!

Unreal Engine Learning Path