UMG UI Designer Quick Start Guide

In this Quick Start Guide, you will learn how to implement some basic in-game HUD elements and a front end menu using Unreal Motion Graphics UI Designer (UMG). You will learn how to implement Health and Energy Bars as well as a way to track and display the Ammo of a player. You will also learn how to create a Main Menu which can launch into a game, set resolution options or quit the game. From there you will learn how to add an in-game pause menu which can be used to pause the game or return to the Main Menu.

Over the course of this guide, links to additional documentation will be provided which will go deeper into each section's subject should you have additional questions. While this guide will cover the actions needed to proceed through each step, if you have not worked with the Unreal Editor before, it is recommended that you first look over the Level Designer Quick Start guide to gain a better understanding of general editor usage, terms, and processes.

1 - Required Project Setup

For this tutorial we are using the Blueprint First Person template with Starter Content enabled. If you do not know how to create a new project and use a template, please see the Project Browser page for more information.

  1. Click the Add New button inside the Content Browser, then under User Interface select Widget Blueprint and name it HUD.

    All User Interface elements (HUD, Menus, etc.) will be created and housed inside a Widget Blueprint. The Widget Blueprint allows you to visually layout your UI elements as well as provides scripted functionality for those elements. We are creating this now so that we can tell it to be displayed when our player character spawns in the world, however we will set it up later.
    For more information on Widget Blueprints see the Widget Blueprint documentation.
  2. Create two more Widget Blueprints, one called MainMenu and another called PauseMenu.
  3. Right-click in the Content Browser and create a new Level called Main.

    We will use this later in the guide for our Main Menu setup.
  4. In the Content Browser, open the FirstPersonCharacter Blueprint located under the Content/FirstPersonBP/Blueprints folder.

    This is the playable character's Blueprint in which we will create some information to pass to our HUD Widget Blueprint for display.
  5. In the My Blueprint window, click the Add Variable Button.
  6. In the Details panel for the new variable, name it Health, change it to a Float variable type and set the Default Value to 1.0.

    This variable will represent the player character's Health that we will display on the HUD.
  7. Create another Float variable called Energy with a Default Value of 1.0.

    This will represent the player character's Energy that we will display on the HUD.
    Unable to enter a Default Value? Click the Compile button from the Tool Bar to compile the Blueprint then try again.
  8. Create another variable of the Integer type called Ammo with a Default Value of 25.
  9. Create one more Integer variable called MaxAmmo also with a Default Value of 25.
  10. Inside the Graph window, Right-click and add an Event Begin Play node.
  11. Drag off the Event Begin play then add a Create Widget node with Class set to your HUD Widget Blueprint.
  12. Off the Return Value of the Create HUD_C Widget, select Promote to Variable and name HUD Reference.

    This will create our HUD Widget Blueprint when the game is started and store it as a variable that we can access later. This is useful for calling functions or setting properties of the HUD later on, for example if you wanted to hide the HUD while the game is paused you can access the HUD through this variable.
  13. Drag off the out pin of the Set node and add the Add to Viewport node.
    Click image for full size.
    As the name suggests, this will add the Widget Blueprint specified as the target to the player's viewport, drawing it onscreen.

Adjusting Character Variables

The last thing we will do before we start generating our actual HUD is provide a way for our character variables to change.

  1. Inside the FirstPersonCharacter Blueprint, while holding Alt drag in the Energy variable and place it next to the Jump script.
    Step2_1.png
  2. Hold Ctrl and drag in a copy of the Energy variable and connect it to a Float - Float node set to 0.25 and connect as shown.

    Each time the character jumps, 0.25 will be subtracted from the character's current Energy value.
  3. Set up the same script for the Health variable but use an F Key Event (or any other key press event) for testing.

    This will allow us to test that our Health variable is properly displayed through our HUD whenever a key is pressed.
  4. Find the Spawn Projectile script and following the InputAction Fire event, Right-click and add a Branch node.
  5. For the Branch condition, Ctrl drag in the Ammo variable connected to a Integer > Integer variable set to 0 and connect as shown.
    Step2_4.png
    This will only allow the player to fire a projectile if their ammo is greater than zero.
  6. At the end of the Spawn Projectile script following the Play Sound at Location node, set Ammo to equal Ammo - 1.

    This will subtract 1 ammo each time the player fires a projectile, giving us something to display on our HUD.
  7. Compile and Save then close the Blueprint.

In the next step we will set up the displaying of our Health, Energy and Ammo variables on our HUD and get them working in-game.

2 - Displaying Health, Energy & Ammo

Visual: Health, Energy and Ammo

Here we will begin setting up the visual aspects of our HUD.

  1. Open your HUD Widget Blueprint to access the Widget Blueprint Editor.
    Step2_6.png
    Inside the Widget Blueprint Editor we can provide the visual layout and scripted functionality of our HUD.
    For more information on each of the different facets of the Widget Blueprint Editor, see Widget Blueprints.
  2. Inside the Palette window under Panel, drag a Horizontal Box onto the CanvasPanel in the Hierarchy window.

    Panel Widgets are sort of like containers for other widgets and provide additional functionality for the widgets that are inside them.
  3. Also under Panel, drag two Vertical Boxes onto the Horizontal Box.
  4. Under Common, drag two Text widgets onto the first Vertical Box and two Progress Bars onto the second Vertical Box.
  5. Select the Horizontal Box, then in the graph resize the box and position it in the upper left corner of the window.

    The progress bars will appear very small but don't worry, we will fix that next.
  6. Select both Progress Bars, then in the Details panel set both to Fill for the Size.
  7. Select the Vertical Box containing the Progress Bars and set it to Fill as well.
  8. Select the Horizontal Box again and resize it so the bars line up with the text.
  9. Select the top-most Text widget in the Hierarchy window then in the Details panel under Content enter Health :.

    Do the same for the other Text widget but label it as Energy so your graph looks like below.
  10. Select the Progress Bar next to health and in the Details panel set the Fill Color and Opacity to a green color.
    UMGColorPicker1.jpg
    You may notice that Progress Bar does not change color when assigning a color. This is because the Percent value to fill the bar is set to 0.0 (you can change this to test out different colors, later we will link this to the health value of our character).
  11. Also set a Fill Color for the Energy bar (we selected an Orange color).
  12. For the display of Ammo, using the methods from above, add widgets to the Hierarchy so your setup is laid out like below.
  13. With the Horizontal Box containing the ammo information selected, resize it and position it in upper right corner.
  14. With the Horizontal Box still selected, in the Details panel click Anchors and select the upper-right Anchor.

    This will move the Anchor Medallion to the upper-right corner of your screen.

    By Anchoring a Widget, you are indicating to the Widget that it is to appear in its placed position relative to the position of the Anchor Medallion regardless of screen size. In other words, when the screen size changes, move the widget the same distance away from the Anchor Medallion's position (in this example the same distance away from the upper-right corner of the screen).
    You can test different screen sizes by clicking and changing the Preview Size option inside the graph.

Script: Health, Energy and Ammo

Now that we have our visual layout, we can add the hooks to provide the functionality behind our HUD elements.

  1. Click the Graph button in the upper-right corner of the Widget Blueprint Editor window.

  2. In the Graph under the Event Construct node, Right-click and add a Get Player Character node.
  3. Drag off the Return Value pin and select Cast to FirstPersonCharacter

    Here we are checking if the Character Blueprint being used by the Player Character is indeed the First Person Character Blueprint.
  4. Drag off the As First Person Character pin and select Promote to Variable (name it My Character) then connect as shown.

    This will allow us to access the variables contained inside our FirstPersonCharacter Blueprint.
  5. Click Compile in the toolbar to compile the script.
  6. Return to the Designer tab and select the Progress Bar next to Health.
  7. In the Details panel under Progress, click the Bind option next to Percent and set it to use Health from MyCharacter.
    This binds the value of the Progress Bar to our Health variable inside our First Person Character Blueprint. Now whenever our Health value changes in our Character Blueprint it will automatically be updated in our HUD as well. You may also notice that the Progress Bar does not change after binding it. That is because we've stated this to occur upon Event Construct (or when the HUD is constructed, which occurs when the game is started).
  8. Select the Progress Bar next to Energy and repeat the process above, binding Percent to Energy from MyCharacter.
  9. Select the 25 following the Ammo text, then in the Details panel for Text, click Bind and Create Binding.

    Now, like the way we previously used Sub-Object Properties to bind properties of the same type, we can also create our own custom bindings. Here we are going to bind our Text property to an Integer property from our First Person Character Blueprint giving us a display of our current Ammo.
  10. Inside the function that is created and automatically opened, hold Ctrl and drag the MyCharacter variable into the graph.
    Step2_27.png
  11. Drag off the pin MyCharacter and select get Ammo.
  12. Connect the Ammo pin to the Return Value of the Return Node.

    A conversion node To Text will automatically be created for you when connecting.
  13. Repeat the process above for the other 25 text and creating a binding for the "Max Ammo" text.

    You probably don't need to do this if your Max Ammo is going to remain the same, however this will allow you to change it.
  14. Click Compile and Save then click the Play button to play in the editor.
    Our Health, Energy and Ammo values are now displayed on our HUD and reflect our current values from our Character Blueprint. Pressing Space will have the character jump and deplete Energy, pressing the Left Mouse Button will fire the weapon reducing our Ammo, and pressing F will cause us to lose Health (which you could hook up to a damage system at a later date)
In the next section we will create a Main Menu which we can use to load into our game that we've setup.

3 - Creating a Main Menu

First bit of business is to create the layout of our Main Menu which we will do below.

  1. Open your MainMenu Widget Blueprint.
  2. On the Designer tab, drag and drop widgets from the Palette onto the Hierarchy to achieve the setup below. For reference we have an Image, a Vertical Box with Text and 3 Buttons that have Text on our Canvas Panel.
  3. Select the Vertical Box in the Hierarchy then Right-click and Copy it.
  4. Right-click on the Canvas Panel and select Paste to paste a second copy of the Vertical Box.
  5. In the new Vertical Box, Right-click copy a Button and paste it to create a fourth Button/Text widget.
  6. Select the first Vertical Box and in the Details panel, rename it to MainMenu, check the isVariable option and set ZOrder to 1. We are naming the widget for clarity and setting it to a variable so that we can access it as well as setting the ZOrder so that it appears on top of our image which we will set in a moment.
  7. Select the other Vertical Box and in the Details panel, rename it to Options, check the isVariable option and set ZOrder to 1.
  8. Rename each of the Buttons as shown in the image below. By updating the names of our buttons so that we know what each one does, this will make it easier to script functionality for them.
  9. Update each of the Text widgets as shown below via the Text section under Content in the Details panel. Here we are updating the text that is displayed on each of the buttons as well as the menu headers.
  10. Holding Ctrl select each of the Buttons then in the Details panel set a Tint color for Hovered and set each to Fill for Size. Here we are adjusting the size of all of our buttons as well as defining a color for the button to take when mousing over it.
  11. Select the Image in the Hierarchy then in the Details under Appearance and Brush, select a Texture, Sprite, or Material to use.
    If you want to use the same one as this guide, you can download it from here: Example Background Drag-and-drop the Example Background into Unreal Engine to import it (click Yes at any confirmation messages).
  12. In the Designer window, resize the image so that it takes up the entire layout.
  13. In the Details panel for the Image, click the Anchor button and choose the fill screen option. You can also use a Scalebox to hold the image, which will ensure that the image scales and resizes appropriately to match the aspect ratio.
  14. Select both Vertical Boxes and Anchor them to the left-center position.
  15. Select the Options Vertical Box and set its Visibility setting to Hidden. We do not want options to be shown by default, we will tell it to be visible through script.
  16. Select the MainMenu Vertical Box and resize and position it as desired in the Designer window.
  17. You can adjust the Font, Size and Alignment from the Details panel of each Text widget. You can experiment with these settings to get your desired effect.
  18. Setup your Options Vertical Box as desired then move it directly behind your Main Menu Vertical Box. Since only one of these will be visible at a time, it is okay that they overlap one another.

With the visual layout of our menu complete, in the next step we will script the menu's functionality.

4 - Scripting the Main Menu

Time to get our hands dirty and script the functionality of our Main Menu. At the end of this step we will be able to launch our game to the Main Menu, start our game as well as change the resolution inside the Options Menu.

  1. Open the MainMenu Widget Blueprint and click the Graph tab.
  2. In the MyBlueprint window, select the PlayButton then in the Details panel click the plus sign next to On Clicked.

    This will add a node to the graph that will execute whenever the button is clicked on.
  3. Add On Clicked Events for each of your buttons.

    We have arranged our Buttons in the graph to mimic the layout of our menu for clarity.
  4. Off the OnClicked(PlayButton), add a OpenLevel (set to FirstPersonExampleMap) node and a Remove from Parent node.

    The Level Name is where you indicate the name of the level you want to load (in our case the First Person Example map). The Remove from Parent node will remove the target Widget Blueprint from the viewport. It is set to target itself (which is the Main Menu Widget Blueprint that we want to remove from view after the level has loaded).
  5. Hold Ctrl and drag in the MainMenu and OptionsMenu variables.
  6. Drag off MainMenu and add a Set Visibility node. Set In Visibility to Hidden.
  7. Drag off and add a Set Visibility node. Set Invisibility to Visible
  8. Attach target to the OptionsMenu variable.
    OptionsButton.png
    Here we are turning off the Main Menu when the Options Button is clicked and turning on the Options Menu.
  9. Off each of the Settings Buttons add an Execute Console Command node.
  10. For the Command for each, use r.setRes XxY where X and Y are the dimensions to use.

    Above we are using the following settings: 640x480, 1280x720 and 1920x1080.
  11. For the Return Button, repeat step 6 but reverse the settings so Main Menu is visible and Options Menu is hidden.
    ReturnButton.png
  12. Off the OnClicked (QuitButton) add an Execute Console Command set to the command Quit.
  13. Compile and Save then close the Widget Blueprint.
  14. In the Content Browser, open the Main Level then open the Level Blueprint.
  15. Right-click in the graph and add an Event Begin Play node and connect a Create Widget (set Class to Main Menu).
  16. Connect an Add to Viewport node and add a Get Player Controller node.
  17. Off Get Player Controller, add the Set Show Mouse Cursor node set to True, then Compile and close the Blueprint.
    FinishedLevel.png
  18. Open the First Person Character Blueprint inside the Content/FirstPersonBP/Blueprints folder.
  19. Following the Event Begin Play script, add a Get Player Controller then add a Set Input Mode Game Only node.
    PlayerCharacterBlueprint.png
    This will turn off the cursor and set the input for the player to Game Only.
  20. Compile and close the Blueprint, then open the World Settings.
  21. Under Game Mode, set the GameMode Override to FirstPersonGameMode and change the Default Pawn Class to Character.

    Here we are assigning a Game Mode for this Map and changing the player's character to use the Engine Default Character inside of the playable FirstPersonCharacter Blueprint as we do not want the player to be able to run around and shoot behind the Main Menu.
  22. Click the Play Button from the Main Toolbar to play in the editor. To test the resolution options, select New Editor Window from the Play-in-Editor dropdown menu.
    We have now created a Main Menu that is functional and allows the player to quit the game, change resolution options or play the game (which loads up the specified level and transitions the player into gameplay).
In the next step we will add an in-game pause menu so that the player can pause gameplay or quit the game and return to this Main Menu.

5 - Creating / Scripting an In-Game Pause Menu

The last thing we will do is create a simple Pause Menu which will allow the player to pause or exit the game.

Visual: Pause Menu Layout

In this section we will create the visual layout of our basic Pause Menu.

  1. Open your Pause Menu Widget Blueprint.
  2. On the Designer tab, drag and drop widgets from the Palette onto the Hierarchy to achieve the setup below.

    Here we have a Border that contains a Vertical Box with Text and two Buttons each with Text on our Canvas Panel.
  3. In the Designer window, resize the Border so that it fills the entire dotted window (filling the screen).
    You can also change the color from the Brush Color option inside the Details panel.

    You may also want to set the set the Alpha for your color to 0.5 to give it some translucency. When the Pause Menu is opened during gameplay, the Border will fill the screen but adding some translucency will allow the game to still be visible in the background.
  4. Also for the Border in the Details panel, be sure to use the fill screen Anchor.

    This will ensure that the Border fills the screen regardless of screen size.
  5. Select the Vertical Box in the Hierarchy then in the Details panel, center it both horizontally and vertically.
  6. Select the Text under the Vertical Box then in the Details panel for Content, enter Pause Menu.
  7. Enter Resume and Quit for the other two Text blocks.
  8. Hold Ctrl and select both Buttons in the Hierarchy, then in the Details panel under Style, assign a color for Hovered.
  9. Rename the Buttons to Resume and Quit respectively inside the Details panel.

Script: Pause Menu Functionality

With the visuals set, next we will provide the scripted functionality for our Pause Menu.

  1. Click the Graph button in the upper-right corner of the Widget Blueprint Editor window.
  2. On the Graph tab in the My Blueprint window, click the QuitButton then in the Details panel add an OnClicked Event.
     
  3. Also add an OnClicked Event for the ResumeButton.
  4. In the Graph window, Right-click and add a Get Player Controller node.
  5. Off the Get Player Controller, use Set Input Mode Game Only then Remove from Parent and Set Game Paused as shown below.
    Here when the Resume Button is clicked, the input mode is set to game only and the cursor that is displayed when the Pause Menu is activated is removed. The Remove from Parent node is used to remove the actual Pause Menu widget from display before leaving the paused state by using the Set Game Paused node and leaving Paused unchecked.
  6. Create a new Function called Remove HUD.

    We will use this to remove the game HUD from the player's view when the Pause Menu is activated.
  7. In the Function, add a Get Player Character node and off the Return Value, add the Cast ToFirstPersonCharacter node.

    This will allow us to access the Character Blueprint being used by the player and the game HUD that is being used by that player.
  8. Off the As First Person Character, use Get HUD Reference then Remove from Parent as shown below.
    PauseScript6.png
    This will access the HUD being used by the player character and remove it from the viewport when quitting the game.
  9. On the Event Graph, off Get Player Controller use the Set Show Mouse Cursor node set to True.
    PauseScript7.png
    When Quit is clicked, this will turn on the mouse cursor for menu navigation when returning to the Main Menu.
  10. Next add the Remove HUD function created above followed by Open Level (set to Main or the name of the Level that you have your MainMenu on) and connect as shown. Click for full view. Both Buttons are now setup, the last thing that we need to do is allow the player to call the Pause Menu and pause the game.
  11. In the Content Browser under Content/FirstPersonBP/Blueprints, open the FirstPersonCharacter Blueprint.
  12. In the Graph, add a M Key Event and a Create Widget node (set to Pause Menu) and promote the Return Value to a variable.

    While we used the M Key as our input for bringing up the Pause Menu, you can use any key you wish. For the promoted variable, we called our variable Pause Menu Reference as this will store a reference to created Pause Menu.
  13. Hold Ctrl and drag in the variable from the MyBlueprint window and connect it to an IsValid node.

    We are checking to see if the Pause Menu widget has been created and stored in this variable yet.
  14. Connect the Is Not Valid pin to the Create PauseMenu_C Widget.
  15. Right-click and add the Get Player Controller node then Set Input Mode UI Only and connect the nodes as shown below.
    When M is pressed, if the Pause Menu has been accessed before it will not need to create it again and will instead access the variable. If this is the first time the Pause Menu has been accessed it will create it then store it as a variable so it can be access later. In either case, the input mode is set to UI only before we display the Pause Menu (which we will do next).
  16. Off the Pause Menu Reference variable, use the Add to Viewport node then Set Game Paused (set Paused to True). Click for full view. Our Pause Menu is setup, now it is time to test.
  17. Click the Compile and Save Buttons, then the Play button to play in the editor.
    Once in-game, if you press the M Key (or whichever key you assigned), you will see that the game is paused and the Pause Menu appears. From here, you can resume gameplay with the Resume button or quit back to the Main Menu with the Quit Button.
The next section will provide you with additional information on working with Unreal Motion Graphics and Blueprints.

6 - Further Reading

For more information on the topics covered in this Quick Start Guide, and across the entire editor, see the Engine Features page.

As for coverage related to the topics in this guide: