Working with UI Widgets in Unreal Engine

Author: Vlad Nepor

How to work with UI Widgets in the Unreal Engine? User Widgets are built on the UUserWidget class.

Widgets are based UMG UI technology. They are blueprint assets inherited from User Widget class.

Widgets can be used for displaying just a simple static text as well as complex spaces full of interactive elements (like we know e.g. from a web space). They are most used type of displaying Ui in the Unreal Engine.

Creating a Blueprint Widget

  • Widget Blueprint can be added by right mouse button click in Content Drawer and selecting User Interface → Widget Blueprint.
  • Editor Utility Widget can be created by right mouse button click in Content Drawer and selecting Editor Utilities → Editor Utility Widget.

Blueprint Widget viewer & editor

Any Widget is being opened in a BP Widget editor containing Designer and Graph tabs.

  • Designer tab is for designing UI of the Widget
  • Graph tab is for adding Blueprint functionality allowing to make the widgets interactive

Designer tab is composed of many windows, the most important are:

  • Pallet - is a library of components that can be used for creating the UI (Text, Image, Slider, Sound...)
  • Hiearchy - displayes components hiearchy from which the widget is composed. It's created by adding components from Pallet into the Widget UI.

Widget's components architecture

Widgets are Blueprint assets containing many pre-created components, such as Button, Slider etc. Each Widget is a componet itself and such as it can be placed into another Widget.

In practice, we can make a widget with custom graphics for each default component (button, slider...) and then use these Widgets in parent's widget instead of default component - by that way, each component in any widget will have same design and anytime we adjust the design in the component widget, it will be automatically reflected in all widgets withich which the component has been used. Such "default" widgets (used as simple components) can be placed in Widgets/Utilities folder, while complex widgets (composed of the utilities) can be placed in the Widgets folder.

Interaction with Menu Widget

Interactions of any kind in Unreal Engine require properly set Collision Presets. For Menu Widgets, follow the guide below:

  1. Definition of 3DWidget trace channel in collisions

    In Edit → Project Settings → Collision, check whether there is defined 3DWidget or similar Trace channel supposed for widgets interaction. If not, press New trace Channel button and add a new tracce channel with Default Response: Ignoew

  2. Setting Collision Presets on the Menu Widget

    Set collission preset 3DWidget to Block for the widget.

  3. Widget Interaction component on Controllers

    In your character pawn (e.g. VRPawn), set trace Channel 3DWidget on Widget Interaction components.