This isn’t actually a topic I intended to cover, I was actually working on demos for a Sound tutorial and needed a simple UI. I started using UMG to knock up a simple HUD, then realized the UI layer itself probably required a tutorial of it’s own! So here we are, we are going to quickly explore the widgets of UMG to create a simple UI. As always there is an HD video version of this tutorial.
First we should touch upon some of the technologies available in Unreal Engine, as it can get a bit confusing. There are two different technologies for UI in Unreal, Slate and Unreal Motion Graphics(UMG).
Slate
Slate is a UI framework built on top of Unreal Engine. Much of the Unreal Engine editor itself was built using Slate. Slate fills the same role as UI solutions such as Scaleform would often perform, although Slate is a bit lower level than that. Slate uses a declaration language that is a subset of C++.
Unreal Motion Graphics
UMG is a more recent development and is in-fact built over top of Slate. It is a collection of UI Widgets ( buttons, labels, panels, etc ) exposed using Blueprints. On top it includes visual designer for composing UIs. UMG is the preferred technology for creating in game UIs. In simple terms, it’s a UI layer that enabled you to work visually and using blueprints.
Creating a Widget Blueprint
To start creating your own UI, create a Widget Blueprint via Add New->User Interface->Widget Blueprint
I renamed it MyUI, somewhat unimaginatively.
Double click the Widget Blueprint to bring up the Designer:
The Palette has a collection of UI Widgets you can assemble in your own widget. You may notice in the Hierarchy panel, we start with a Canvas Panel as our root element.
Creating a UI is as simple as drag and drop, like so:
As you can see, the properties for each widget can be set on the right hand side. You can then wire events up to the UI component by clicking the + icon to the right of the Event you want to respond to.
This will create a new event in the UI widget event graph.
We will do a simple Print String on button click, like so:
Now that we have a UI we need to display it. To do so, in the Level Blueprint, add the following:
When the level loads, we create a new MyUI widget, and add it to the viewport. The other bit of this blueprint gets the character controller and sets the mouse cursor visible.
Now when you run it, you should see:
The following function I wired up to a On key handler for toggling the visibility of the UI. UI layer is a variable I set from the return type of Create MyUI Widget from the blueprint above.
Of course, this only brushes the very surface of what you can do with UMG, you can do very flash like timeline based animations and create much more involved UIs, but that goes beyond the scope of what I intend to cover today.
The Video