Working with UI Widgets in Unreal Engine

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.