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
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
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
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?