User Interface Design with UMG

In this chapter, we enter the fascinating world of User Interface (UI) design in Unreal Engine using the Unreal Motion Graphics UI Designer, also referred to as UMG. Producing top-notch UI in video games is now an essential and non-negotiable aspect that significantly enhances the player's experience. Whether it's the health bar of the hero, inventory, maps, or dialog boxes, a well-design UI contributes profoundly to engagement and immersion.

UMG is a powerful tool in Unreal Engine that facilitates the smooth design of UI. It utilizes a drag-and-drop method, permitting game designers to create intuitive, interactive UIs that drastically improve the overall gaming experience. Be aware that while we focus on game design, skills learned here are transferable and beneficial for the design of any interactive software or application.

To kick-start, let's ensure you have Unreal Engine open and ready to use. If you haven't yet installed it or created a project, it's advisable to do so before trying out the steps highlighted.

Let's first create a new UMG widget blueprint. Go to the content browser, then click on Add New > User Interface > Widget Blueprint. Name the new widget blueprint MovieInventoryScreen.

Content Browser -> Add New -> User Interface -> Widget Blueprint -> MovieInventoryScreen.

After creating the widget blueprint, double click on MovieInventoryScreen to open the UMG UI Designer. In the unfamiliar territory, you'll notice the Palette panel storing all interactable UI elements such as buttons, checkboxes, images, and sliders. Adjacent to it, we have the hierarchy and details panel, which will display all UI elements present in your canvas.

To highlight its use, we will create a simple Health bar, a common yet essential UI element in most games. From the Palette panel, drag a 'Progress Bar' to the 'Canvas Panel'. In our scenario, the health bar will denote the stamina of our lead character LukeStuntman.

Palette Panel -> Progress Bar (Drag this onto Canvas Panel)

In the 'Details' panel, you can adjust the attributes associated with the Progress Bar such as Anchor, Position, Size, and so forth. Set the color of the progress bar to somewhat red with RGBA values as (255, 0, 0, 1), representing the intensity of stamina required for Luke Stuntman to perform his heroic acts.

Details Panel -> Progress Bar Attributes -> Fill Color and Opacity -> r=255, g=0, b=0, a=1

Next, we will tie this health bar to the 'health' property of LukeStuntman such that it updates in real-time. Right-click on the 'Percent' property > 'Bind' > 'Create Binding' and replace the generated function’s body:. This generates network and updates the health bar based on LukeStuntman's health.

float UMovieInventoryScreen::GetHealthPercent()
 {
     APlayerCharacter* LukeStuntman = Cast<AMovieCharacter>(GetOwningPlayerPawn());
 
     if (LukeStuntman && LukeStuntman->MaxHealth > 0.f)
     {
         return LukeStuntman->CurrentHealth / LukeStuntman->MaxHealth;
     }
 
     return 0.f;
 }

UMG also allows designers to make UI interactive. For instance, let's create a simple button that, when clicked, prints a line on the console. From the Palette panel, drag and drop the 'Button' onto the Canvas Panel. On clicking the button in the 'Hierarchy' panel, in the 'Details' panel, navigate to 'OnClicked' > '+' > 'Create Event' > 'New Custom Event' named OnInventoryButtonClicked.

Palette Panel -> Drag and drop 'Button' in Canvas Panel -> Details panel -> Events -> OnClicked -> '+' -> 'Create Event' -> 'New Custom Event' -> 'OnInventoryButtonClicked'

Then in the graph view of 'MovieInventoryScreen', add the following line of code for the 'OnInventoryButtonClicked' function:

void UMovieInventoryScreen::OnInventoryButtonClicked()
{
    GEngine->AddOnScreenDebugMessage(-1, 5.f, FColor::Red, TEXT("Inventory Button Clicked!"));
}

This will create a log on the screen when the Inventory button is clicked.

In conclusion, UMG is an exceptional tool integral in UI designing for video games. Its drag-and-drop method enhances UX creation by abstracting the tough coding bits and providing user-friendly interfaces in return. This chapter has introduced how you can create and manage UI elements using UMG in Unreal Engine and how to make your UI responsive to in-game characters like our LukeStuntman and interactable using a simple button.

Remember: creating intuitive, responsive, and interactive UIs can be the difference that sets your game apart from others, as they are essential in improving player engagement and overall player experience.