Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


9. June 2015

 

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

image

 

I renamed it MyUI, somewhat unimaginatively.

image

Double click the Widget Blueprint to bring up the Designer:

image

 

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:

gif

 

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.

image

This will create a new event in the UI widget event graph. 

image

 

We will do a simple Print String on button click, like so:

image

 

Now that we have a UI we need to display it.  To do so, in the Level Blueprint, add the following:

image

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:

image

 

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.

image

 

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

Programming , ,

blog comments powered by Disqus

Month List

Popular Comments