Fifth chapter of the lecture Unreal Engine Basics taught at SAE Institute Hamburg. - Understanding the difference between Unreal’s UI frameworks Slate and UMG - Learning how to create basic and complex user interfaces in UMG - Learning how to build a simple main menu

1. Unreal Engine Basics
Chapter 5: User Interface
Nick Prühs

2. Objectives
• Understanding the difference between Unreal’s UI frameworks Slate
and UMG
• Learning how to create basic and complex user interfaces in UMG
• Learning how to build a simple main menu

3. Slate & UMG
• Cross-platform user interface framework for creating tool and in-game
UIs
 SWidget base class for all Slate widgets, prefixed with S
 Declarative Syntax
• Wrapped by Unreal Motion Graphics UI Designer (UMG)
 UWidget base class for all UMG widgets
 Higher level, and as UObjects, accounted for by the garbage collector

4. Slate Example
Example taken from SLoadingScreenTestWidget::Construct
SNew(SVerticalBox)
+SVerticalBox::Slot()
.VAlign(VAlign_Center)
.HAlign(HAlign_Center)
[
SNew(SThrobber)
.Visibility(this, &SLoadingScreenTestWidget::GetLoadIndicatorVisibility)
]
+SVerticalBox::Slot()
.VAlign(VAlign_Center)
.HAlign(HAlign_Center)
[
SNew(STextBlock)
.Text(NSLOCTEXT("MoviePlayerTestLoadingScreen", "LoadingComplete", "Loading complete!"))
.Visibility(this, &SLoadingScreenTestWidget::GetMessageIndicatorVisibility)
]

5. Widget Blueprints
• Derived from UUserWidget
• Familiar editor
 Designer
 Blueprint Graph
o Events, functions and variables just as with any other blueprint
o Widgets can be explicitly exposed as variable from the designer window
• Built-in support for UI animations
• Widget blueprints can reference other widget blueprints, allowing for
a very modular UI

6. Widget Blueprints
Can be created and added to the viewport in your PlayerController:

7. Built-In Widgets
Panels
• Canvas Panel: Allows widgets to be laid out at arbitrary locations, anchored
and z-ordered with other children of the canvas.
• Grid Panel: Evenly divides up available space between all of its children.
• Horizontal Box: Allows widgets to be laid out in a flow horizontally.
• Scroll Box: Scrollable collection of widgets.
• Vertical Box: Allows child widgets to be automatically laid out vertically.
• Widget Switcher: Like a tab control, but without tabs. At most one widget is
visible at time.
• Wrap Box: Arranges widgets left-to-right. When the widgets exceed the
width, it will place widgets on the next line.

8. Built-In Widgets
Common
• Border: Container widget that can contain one child widget, providing an opportunity to
surround it with a background image and adjustable padding.
• Button: Click-able primitive widget to enable basic interaction.
• CheckBox: Allows you to display a toggled state of 'unchecked', 'checked' and
'indeterminable. You can use the checkbox for a classic checkbox, or as a toggle button, or
as radio buttons.
• Image: Allows you to display a Slate Brush, or texture or material in the UI.
• ProgressBar: Simple bar that fills up.
• RichTextBlock: Text widget supporting inline styles.
• Slider: Shows a sliding bar with a handle that allows you to control the value between 0..1.
• Text: Simple static text widget.

9. Built-In Widgets
Input
• ComboBox: Displays a list of options to the user in a dropdown menu.
• SpinBox: Numerical entry box that allows for direct entry of the number.
• TextBox: Allows the user to type in custom text.
Other
• (Circular) Throbber: Shows several zooming circles in a row.
• Spacer: Provides padding between other widgets.
• Background Blur: Can contain one child widget, applying a post-process Gaussian
blur to all content beneath it.

10. Widget Properties
• Appearance
 Color & Opacity: Tints all child widgets.
 Padding: Padding area around the content.
• Interaction
 IsFocusable: Allows this widget to accept focus when clicked, or when
navigated to.
• Behavior
 TooltipWidget: Tooltip widget to show when the user hovers over the
widget with the mouse.
 Is Enabled: Whether this widget can be modified interactively by the
user.
 Visiblity: Visibility of the widget.

11. Visibility
• Visible: Visible and hit-testable (can interact with cursor). (Default)
• Collapsed: Not visible and takes up no space in the layout (obviously
not hit-testable).
• Hidden: Not visible but occupies layout space (obviously not hit-
testable).
• HitTestInvisible: Visible but not hit-testable (cannot interact with
cursor) and children in the hierarchy (if any) are also not hit-testable.
• SelfHitTestInvisible: Visible but not hit-testable (cannot interact with
cursor), but doesn't affect hit-testing on children (if any).

12. Canvas Panel Slots
• Anchors
• Position
• Size
• Alignment: Pivot point of the widget.
• Size To Content
• Z Order: Higher values appear on top.
UMG Anchors

13. Horizontal/Vertical Box Slots
• Padding
• Size
 Auto: Only requests as much
room as it needs based on
the widgets desired size.
 Fill: Greedily attempts to fill
all available room based on
the percentage value 0..1
• Horizontal Alignment
• Vertical Alignment
UMG Box Slot

14. Text
• Color & Opacity
• Font
• Min Desired Width
• Justification
• Wrapping
UMG Text Block

15. Fonts
• Font Family
• Typeface
• Size
• Outline Size & Color
UMG Text Block

16. Localization
• Texts are referenced by namespace & key
• String Tables with texts can be imported from/exported to CSV

17. Brushes
• Image
• Image Size
• Tint
• Draw As
 None: Don't do anything.
 Box: Draw a 3x3 box where the sides
and the middle stretch based on the
margin.
 Border: Draw a 3x3 border where the
sides tile and the middle is empty.
 Image: Draw an image, ignoring
margin.
• Tiling
• Color & Opacity
Slate Brush

18. Blueprint Event Binding
• In blueprints, you can bind events in two ways:
 By linking them directly to a (custom) event in your event graph
 By using a Create Event node referencing another event or function
o In functions, only the second option is available.

19. Button
• Brushes for every state
 Normal
 Hovered
 Pressed
 Disabled
• Hovered and Clicked events
• Single child
 e.g. text, image
UMG Button

20. Creating Re-Usable Widgets
• Expose public variables for specifying your parameters (e.g. button
text, style)
• Implement PreConstruct event in your widget to apply settings
• Allows for live updates in widget designer

21. Traveling
Traveling to another level can be achieved by calling Open Level:
• Can specify either a level name or an IP address to travel to
• May provide arbitrary options in form of a “travel URL”:
DM-AwesomeMap?name=FastFragg0r
• Options are automatically passed to be parsed by
AGameMode::InitGame, for instance

22. Traveling
Reserved built-in travel options include:
• listen: Loads the map as listen server.
• restart: Causes Unreal to just reload the current level.
• closed: Automatically appended by the engine to signal a failed
connection attempt.
• failed: Automatically appended by the engine to signal a failed
connection attempt.
• name: Player name to be set on the PlayerState.
• spectatorOnly: Join as spectator player.

23. Level Blueprints
• Each level has its own dedicated level blueprint that behaves just like
any other actor blueprint
• Allows to directly reference actors placed in that level
• There are various paradigms on how to deal with level blueprints…
 Don’t use them at all
 Use for inter-blueprint communication, only
 Use them for everything

24. Hint!
You can specify whether or not to show a mouse cursor with the
Show Mouse Cursor flag of your PlayerController.

25. Assignment #5 – User Interface
1. Create an ingame HUD with a crosshair.
2. Add a health display to your HUD.
3. Bind input for showing an ingame scoreboard.
4. Create a very basic main menu level and UI.

26. References
• Epic Games. Slate Overview. https://docs.unrealengine.com/en-
US/Programming/Slate/Overview/index.html, February 2020.
• Epic Games. UMG UI Designer User Guide.
https://docs.unrealengine.com/en-
US/Engine/UMG/UserGuide/index.html, February 2020.

27. See you next time!
https://www.slideshare.net/npruehs
https://github.com/npruehs/teaching-
unreal-engine/releases/tag/assignment05
npruehs@outlook.com

28. 5 Minute Review Session
• What is the difference between Slate and UMG?
• How can you create a very modular UI in UMG?
• What do you need to do to show your widgets ingame?
• Which kinds of panels do you know?
• What’s the difference between collapsed and hidden visibility?
• Which UI concept facilitates creating resolution-independent UIs?
• How do your globalize your game?
• How can you load another map while ingame?