# Unreal Engine: User Interface

*2025-07-30*

> Notes taken from the ninth week of Game Programming Foundations


[Last week was collision]({{< relref "/posts/2025/unreal-engine-07-collision-detection" >}}); this week, User Interfaces – covering both the legacy [**Slate** framework](https://dev.epicgames.com/documentation/unreal-engine/slate-user-interface-programming-framework-for-unreal-engine) and the newer [**UMG** (Unreal Motion Graphics) system](https://dev.epicgames.com/documentation/unreal-engine/building-your-ui-in-unreal-engine).

Given my prior experience with [Windows Forms](https://learn.microsoft.com/en-us/dotnet/desktop/winforms/overview/) and [WPF](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/overview/) 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.