Using Unreal Motion Graphics (UMG) with C++

In this post we’re going to see how we can utilize the UMG menu of UE4 using C++. For this project we will create a simple UI menu that will update every time we collect a new item.

Here is the end result:

Getting Started

In order to get started, create a C++ project template (in my case I created a Third Person Template but you can choose otherwise). When Visual Studio loads, locate the following files which have the same name as your project (my project’s name is TPBlogProject so your files names might differ) :

Inside the .Build.cs file edit the following line from:

to:

Save and close that file.

When you’re done with that, open up the header file which has the same name as your project and add the following includes:

Save and close that file.

Make sure you followed the above steps, otherwise your code will not compile.

Now we are ready to create our UI Widgets which are based on C++.

Before we do that, let’s take a step back and have an overview of what we’re going to create and what we need. As mentioned above, we’re going to create a character that collects items. Each time we collect an Item our UI will display a list with the names of the items we’ve collected so far. To do that, we need the following classes:

1. A Collectible class, the instances of this class will be the items that we’re going to collect.
2. A UWidget class – essentially our UI.
3. A Character that will collect items.
4. A Player Controller which will be responsible for the communication between our UI and our Character
5. A Game Mode class which will be used only to tell the editor that in the default map we need our own mode in order to tie the player controller that we’re going to create with the default character.

So, let’s get started!

Creating our UWidget class

The UWidget class will be the base class for our UI which later will be a Widget Blueprint. The following screenshot shows which class to choose as parent in order to add a UWidget class (I named my class CollectiblesUI):

When visual studio is done with compiling, open up the header file of your newly added class and add the following property and functions:

When you’re done with that, switch to your source file, and add the following implementation of the AddItemToUI function:

That’s it, we’re done with the C++ code of our UI. Save and compile your code. Then, switch to your Editor and create a new Blueprint class which will be based in the following class:

You may notice that I have already created a Collectible class. Don’t worry, right after we’re done with the UI I will explain what to do. In this case, I named my Blueprint as UW_Collectibles. When you open up your blueprint, you will notice that we have created a Widget which is based on our C++ class.

Inside your widget, I created a Vertical box, which I marked as a Variable – this is essential don’t forget this step, and inside I added a simple Text:

When you’re done with that, switch to your graph, and override the protected AddItemsToUI function like so:

In order for the Construct Text to appear, right click somewhere in the empty space of your Blueprint and select the “Construct Object from Class”. Then, inside the Class field, select the TextBlock class.

That’s it- we’re done with our UI. Let’s create our Controller!

Creating our Controller

Create a new C++ class based on the Player Controller class and name it MyPlayerController.

Inside it’s header file, type in the following code:

Then, switch to your source file, and type in the following code:

You may need to modify the UpdateCollectedItems function to fit your needs because I have a reference in my own Character class which might differ from yours. Moreover, don’t forget to include the header file of your character!

Compile and save your code. Switch to your Editor and create a Blueprint based on our Controller Class. Then, make sure to assign the UW_Collectibles to our Collectibles Widget BP as the following image suggests:

We’re done with our controller! Let’s move on, to our character!

Setting up our Character

Open up your Character’s header file, and include the following function:

Then, switch to your Character’s source file, include the “MyPlayerController.h” header file and type in the following implementation of the AddItemToUI function:

Now that we have all that set up, let’s create our Collectibles!

Creating our Collectibles

Add a new C++ class based on the Actor class and name it ACollectible. Then, inside the header file type in the following properties:

Switch to your source file and inside the Constructor instantiate our components:

Inside your BeginPlay (and after the Super::BeginPlay()) make sure to register your overlap function:

Then, create the following implementation of the overlap function:

 

Compile and save your code. Then, create a Blueprint based on our collectible class, and assign a static mesh of your liking.

Don’t forget to adjust it’s collision presets like the following image suggests:

We’re almost ready! The last thing we need is to create a GameMode and tell it to “tie” our custom controller with our character!

Setting up a GameMode

Create a Blueprint class based on the default Game Mode that your project already includes:

Just your Blueprint and don’t edit anything! I named my blueprint BP_GameMode.

Then, go to your default map and inside the World Settings, set up the following options:

That’s it! The last thing you need is to place some Collectibles in your Map and test your UI!