Introduction to C++ UIs in Unreal

A lot of other UMG tutorials focus entirely on making UIs with UMG and blueprints. This might have a broader appeal but in order to make professional-level UIs, you really need to use C++.

This tutorial is part of the larger series explaining how to create UIs in Unreal, but within that series is the first of three parts, that cover three different ways of using C++ to create UIs in Unreal.

Unreal UI Introduction Series

  1. An Introduction to Making UIs in Unreal
  2. Making UIs in Unreal with C++: Basics
    1. Creating C++-based UserWidgets
    2. Creating New UMG Widgets
    3. Creating New Slate Widgets (Coming soon)

Why Should We Use C++?

First of all, why do we want to deal with C++ when making a UI, “surely we can do everything with Blueprints?” The answer to that is yes and no. You can write an entire game’s UI using Blueprints but you’re going to hit some major problems along the way:

  • You are likely to hit performance problems in large Blueprint-based UIs. Small one-use blueprints are fine, but for large, complicated logic that is called every frame, a Blueprint-based UI can really affect performance.
  • In Blueprints complicated logic is a nightmare to maintain. Anyone who’s written large Blueprint scripts can attest to the constant fight against spaghetti.
  • Separation of data acquisition and data presentation. With a Blueprint-only system, it’s easy to mix getting data from disparate sources, and formatting it for display. This makes future changes to data or display a real pain to implement as your display graph nodes are so closely tied to data-acquisition nodes.
  • Harder for many people to work on the UI at once. Blueprints are binary assets, meaning they’re impossible to merge, so only one person can edit them at a time. If the UI artist wants to update the appearance of a widget, and the developer is updating some Blueprint logic, they artist will have to wait. If most of the logic is in C++, both people are less likely to step on each others’ toes.

Three Ways of Using C++ in UIs

Here’s where things get a little tricky. As with all UI design, there are a hundred ways to do the same thing. We will cover each of these three approaches individually in tutorials that follow, but here is an overview:

  • Subclassing UUserWidget
  • Subclassing or creating a new a UMG widget
  • Subclassing or creating a new a Slate widget

Each of these have their benefits and drawbacks. To know what these mean, we need to discuss the difference between Slate and UMG.

Slate and UMG

To create your first C++-based UserWidget, you’ll need to create a C++ class that is a subclass of UUserWidget.

Before starting this, you you should now be comfortable with creating UIs in the editor, and understand the purpose and features of most of the widgets in the palette. This is best achieved by creating a simple UI using the editor and blueprints. See the series introduction for how to do that.

The next step is to learn how to create widgets in C++.

As we mentioned in the introduction to this series, there are two UI systems in Unreal (as of 4.15), UMG and Slate.

Slate is the old Unreal UI system, and is what the UMG and the editor are built on. It uses some funky-looking C++ to simplify setting up widgets. It’s important to understand that just because it’s the “old” system doesn’t mean it’s obsolete. You will gradually need to learn Slate in order to add more complicated functionality to your UIs.

UMG is the newer UI system that was added as part of Unreal 4. It is designed to be more Blueprint-friendly and let designers visually lay out their UIs in the editor. Each UMG widget generally has an almost-identically named Slate class inside it. The **Slate class handles most of the logic, and its corresponding UMG class is a wrapper around it. e.g. UImage is the UMG class, and it contains a SImage instance inside it.

First off, a tiny bit of history. Don’t skip this, it’s important for your understanding!

Before version 4.0, UIs in Unreal were created using a system called Slate. It was designed to make UI creation in C++ as simple as possible. Later on in the tutorial series we will cover how you too can use it.

With version 4.0 of Unreal Engine, Epic released their new UI system, UMG. UMG is effectively a wrapper around Slate, to make it easier to use from Blueprints, and to let UI designers create custom UIs from within the Unreal editor.

It’s important to understand that Slate underlies all of the UMG systems we will discuss. Slots, different kinds of widgets, the options on widgets, these are all the same in Slate. UMG is simply a editor- and Blueprint-friendly wrapper for Slate.

Three Approaches

Now that’s out of the way, there are three major ways you can add C++-based widgets to your UI. Listed below they are progressively lower-level and ‘more work’, none of them are the sole “best way” to solve a problem, and each approach has its own benefits and drawbacks.

As with everything there are benefits and drawbacks to each approach. But generally the further “down” you go in the hierarchy, towards Slate, the more customisation you will be able to do, but the more work it might be to set up interfaces with Blueprints.

I’ve separated each approach into its own tutorial.

  1. Create a C++ subclass of UUserWidget
  2. Create a UMG subclass in C++
  3. Create a Slate subclass in C++

Unreal UI Introduction Series

  1. An Introduction to Making UIs in Unreal
  2. Making UIs in Unreal with C++: Basics
    1. Creating C++-based UserWidgets
    2. Creating New UMG Widgets
    3. Creating New Slate Widgets (Coming soon)