Unreal Engine 5 User Interface Development Guide

Unreal Engine 5 User Interface Development

This section details how to implement and manage user interfaces (UI) within Unreal Engine 5 using the Unreal Motion Graphics (UMG) UI Designer. Effective UI development is crucial for creating interactive and engaging player experiences.

Create Widget

To create a new user widget in Unreal Engine, you need to ensure the UMG module is included in your project's build configuration. This allows you to define and instantiate UI elements.

Ensure "UMG" is included as a dependency in the Build.cs file.

.h File Declaration

private:
    // The specific user widget class to be instantiated.
    // This should be set in the Blueprint editor for flexibility.
    UPROPERTY(EditAnywhere, meta = (AllowPrivateAccess = "true"))
    TSubclassOf<UUserWidget> ExampleWidgetClass;

.cpp File Instantiation

In your C++ code, you can create an instance of the user widget class. This involves specifying the world context and the widget class itself.

#include "Blueprint/UserWidget.h"

// ... inside a function or method ...
UUserWidget* ExampleWidget = nullptr;
if (ExampleWidgetClass)
{
    // Create widget instance using the specified class and world context.
    ExampleWidget = CreateWidget<UUserWidget>(GetWorld(), ExampleWidgetClass);
}

Add Widget to Viewport

Once a widget is created, it needs to be added to the player's viewport to become visible on screen. This is a common step after creating interactive menus or HUD elements.

Ensure "UMG" is included as a dependency in the Build.cs file.

#include "Blueprint/UserWidget.h"

// Assuming ExampleWidget is a valid UUserWidget pointer created previously
if (ExampleWidget)
{
    // Add the widget to the player's viewport, making it visible.
    ExampleWidget->AddToViewport();
}

Manage Input Mode: Game Only

Setting the input mode to "Game Only" ensures that all player input is directed towards game actions, disabling UI interaction. This is typically used when the UI should not be active.

#include "Kismet/GameplayStatics.h"

// ... inside a function or method ...
APlayerController* PlayerController = UGameplayStatics::GetPlayerController(this, 0);

if (PlayerController)
{
    // Define the input mode as Game Only.
    FInputModeGameOnly InputMode;
    // Apply the input mode to the player controller.
    PlayerController->SetInputMode(InputMode);
}

Manage Input Mode: UI Only

The "UI Only" input mode directs all player input exclusively to the UI elements. This is essential for menus, inventory screens, or any interface where direct interaction is required.

#include "Kismet/GameplayStatics.h"

// ... inside a function or method ...
APlayerController* PlayerController = UGameplayStatics::GetPlayerController(this, 0);

if (PlayerController)
{
    // Define the input mode as UI Only.
    FInputModeUIOnly InputMode;
    // Apply the input mode to the player controller.
    PlayerController->SetInputMode(InputMode);
}

Manage Input Mode: Game and UI

The "Game and UI" input mode allows for simultaneous interaction with both game elements and UI. This is useful for in-game menus or HUDs that require player input for both gameplay and interface navigation.

#include "Kismet/GameplayStatics.h"

// ... inside a function or method ...
APlayerController* PlayerController = UGameplayStatics::GetPlayerController(this, 0);

if (PlayerController)
{
    // Define the input mode as Game and UI.
    FInputModeGameAndUI InputMode;
    // Apply the input mode to the player controller.
    PlayerController->SetInputMode(InputMode);
}

Unreal Engine 5 User Interface Development