The Unreal Motion Graphics (UMG) UI Designer is used to create user interface elements such as screens and HUDs in Unreal Engine 4. To show the basic use of UMG we will create a title screen of a game. In this article we will set the visual of the screen and in the next article we'll create the Blueprints Actions needed to make it work.
Access the "File->New Project" menu to create a new project using the template "Vehicle". If you prefer you can use one of your projects or any other template. The image below shows the creation of the new project.
 |
| Click to enlarge |
Let's create a new level that will be responsible for the Title Screen. To create the Level access the "File-> New Level" menu and choose "Empty Level". Save this level with the name "TitleScreen" and then move it to the "VehicleBP/Maps" folder of the project.
This new level should become the default level of the project so that it is the first level loaded when the game starts. To make this change, access the menu "Edit-> Project Settings" and select the "Maps & Modes" option. In the "Defaults Maps" category, select the new level "TitleScreen" for the Editor and the Game.
 |
| Click to enlarge |
In the image above, in the "Default Modes" category, note that the "Default GameMode" is set to "VehicleGameMode" and that the HUD Class is "VehicleHUD". This means that new levels will use these settings if we do not change these properties in the Level. If we do not change it in our example, the Title Screen will display the speed and the gear of the car because of the "VehicleHUD" blueprint, and this is not what we want.
In the main editor, click the "Settings" button, located on the top toolbar, and choose the "World Settings" option to access the settings of the "TitleScreen" Level.
In the main editor, click the "Settings" button, located on the top toolbar, and choose the "World Settings" option to access the settings of the "TitleScreen" Level.
In the "Game Mode" category, item "GameMode Override", select the "GameMode" option, so we will not use in the title screen the changes that were made to the "Vehicle" template.
Finally let start using the UMG. The first step is to create a "Widget Blueprint" where we will draw our screen. To do this click the "Add New" button from the "Content Browser", choose the submenu "User Interface" and then the "Widget Blueprint" option, as shown in the image below. Put the name "UMG_TitleScreen" for this widget.
The screen that I will create in this example is this:
This screen consists of an Image with the title "Blueprints Race" and three buttons that use images for their visual representation. Feel free to use any image for the title and for the buttons.
Now we will import the images to the editor. In the "Content Browser" select the "VehicleBP->Textures" folder, so the images will be saved in this folder. Then press the "Import" button and select the images you want to use. These images will be imported as "Textures".
To open the UMG UI Designer, double-click the widget "UMG_TitleScreen" that we create. The image below shows the UMG UI Designer in "Designer" mode, already with the images and buttons that we will create in this example.
 |
| Click to enlarge |
The area where we put the elements that will be drawn is known as "Canvas". Let's add the Title that is only an image. To add an image to the Canvas, click and drag the item "Image" which is on the "Palette" tab on the left side of the editor and drop at the desired location within the Canvas.
We now need to choose the texture or material that will be used for this image in the Canvas. On the right side, there is a tab "Details" with information of the element that is selected in the Canvas.
In the "Appearance" category, there is an item "Brush" with an Image property. Click in the Combobox of the Image property and select the Texture that was imported to represent the Game Title. Check the "Size To Content" option if you want to keep the original image size.
To organize the buttons on the screen, we will use a "Vertical Box", which is in the "Panel" category of the "Palette" tab.
After placing the "Vertical Box", add a button (Common->Button) within the "Vertical Box" and then drag an image (Common->Image) and release over the button. Do this two more times to make it a total of 3 buttons.
For each of the added images, select the texture that will be used in the same way we did with the title image. I recommend to check the "Size To Content" option for all these elements so they keep the sizes of the images.
We will now rename the main elements. This can be done in the "Details" tab. The title image will be called "imageTitle" and the three buttons will have the names: "btnStart", "btnAbout" and "btnExit". The image below shows the hierarchy of the elements of this "Canvas":
Let's create a new "About" screen containing information about the game. To do that create a new "Widget Blueprint" named "UMG_About". Open the "UMG_About" and add text and images with your project information. My example of Canvas has this content:
The article "The Blueprints Actions of the Title Screen" will show the Blueprints Actions required to load these screens, start the game from the menu, exit the game, load the "About" screen and then return to the menu.
