Unreal Engine: User Interface

Last week was collision; this week, User Interfaces – covering both the legacy Slate framework and the newer UMG (Unreal Motion Graphics) system.

Given my prior experience with Windows Forms and WPF in the .NET world, there wasn’t a huge amount of genuinely new learning here. Most of it was mapping familiar concepts onto Unreal’s equivalents – so this post is shorter and sparser than usual, and mostly serves as a reference to myself of where things live.

If you’ve built UI in any mainstream framework, you’ll likely have the same experience.

The Landscape: Canvas, Slate, UMG

• Canvas – the original system, from before UMG existed. Lets you place 2D elements on screen; largely legacy
• Slate – the underlying C++ UI framework, still used for creating detailed UIs and custom editor tools. All written in C++, supports themes
• UMG – the visual designer layer that sits on top of Slate. Far more user-friendly, Blueprint-integrated, and the preferred option for in-game UI these days

Build UI in UMG and drop into Slate only when you need fine-grained control or custom editor tooling.

Slate Components

The core widget types (the S-prefix classes):

• Interactive: SButton, SEditableText, SCheckbox, SComboBox
• Display: STextBlock, SImage
• Collection/container: SListView, SScrollBox
• Layout primitives: padding, alignment, and the box model; DockPanel, StackPanel, WrapBox, GridPanel, CanvasPanel

If you’ve done WPF or WinForms, the panel types map almost one-to-one onto the layout containers you already know – StackPanel in particular is exactly what you’d hope.

UMG Features

• Blueprint integration – the big selling point over raw Slate
• Designer and Graph mode – split view between visual layout and logic
• Widget Library, Custom Styling, Animation
• Responsive Design, Data Binding, Extensibility

UMG Components

Grouped roughly by role:

• Interactive: Button, CheckBox, Radio Button, ComboBox, Slider
• Text: Text, Editable Text, Text Box
• Display: Image, Progress Bar, Circular Throbber
• Layout containers: Vertical/Horizontal Box, Canvas Panel, Border, Scroll Box, Wrap Box, Grid-relevant panels
• Sizing and spacing: Spacer, Size Box, Expandable Area, Viewport

Notes on things that stood out

The genuine surprise was how much transferred: Slate/UMG’s layout-panel approach is the same family of ideas as WinForms containers and WPF panels, just with different names and a Blueprint layer on top.

The part that did feel new territory - and which I’ll inevitably have to revisit - is how UI widgets talk to gameplay code, which builds directly on last month’s event dispatcher work.