Game UI Layout System

Overview

The UI layout system is used to organize and manage the content between different UI layers in each player's viewport, and manage complex multi-level UI interfaces in a clear and modular manner.

Preparing Your Game Layout

Navigate to ProjectSettings -> Game -> Generic UI System Settings, and here, select your UI policy.

The game UI policy is merely a straightforward blueprint designed to reference specific game layout widgets.

You can create a new blueprint by inheriting from GUIS_GameUIPolicy to establish a fresh policy.

Layout Content

Taking WB_GUI_GameUILayout as an example, it serves as an empty widget blueprint derived from GUIS_GameUILayout.

This layout has been configured to feature four CommonActivatableWidgetStacks, each representing distinct UI layers, with deeper layers endowed with higher display priority.

In the EventGraph, you can associate each UI layer with different gameplay tags using the following code.

Each UI layer essentially acts as an ActivatableWidgetStack, allowing you to add (push) or remove (pop/deactivate) any widget to various UI layers. For instance, incorporating a new widget into the GameMenu layer will cause any existing widget in that layer to cease display, revealing the new user interface until it is removed.

If a new widget is placed in a markedly different layer, such as the Menu layer, it will overlay the Game and GameMenu layers, given that each UI layer functions as an independent WidgetStack.

This game UI layout effectively addresses the needs of most games. Should your game have unique requirements, you are entirely free to use this layout as a reference to construct your own distinctive game layout with customized layer tags.

Initializing UI Layouts for Players

In Unreal Engine, whether in multiplayer or local split-screen modes, each PlayerController/LocalPlayer possesses a dedicated AHUD object for UI display. Thus, the HUD serves as the optimal entry point for initializing player UIs.

Each player has their own UI and layout, as we need to request the UI subsystem within each player’s HUD to create their specific UI layout.

Consequently, upon entering the game, each player will automatically have the appropriately configured layout added to the viewport.

Manipulating UI Layers

Once the UI layout is added to a player's viewport, you can utilize the following API to introduce different content to various UI layers.

For example, if you have a widget that showcases HUD elements, you can embed it within the Layer.Game corresponding UI layer.

To remove a widget from a UI layer, this is typically conducted internally within the widget itself.

With these straightforward APIs, you can deftly manipulate intricate UI hierarchies, such as:

• HUD
• Pause Menu
• Settings Menu
• Game Settings
• Control Settings

⚠️ Note: Widgets that can be pushed to UI layers must inherit from CommonActivatableWidget.

Purpose of UI Policies

UI policies primarily serve to define the game's layout and manage the relationships between multiple LocalPlayers and their corresponding UI layouts throughout a game session.

In single-player games, generally, there is only one LocalPlayer.

Activatable Widget

The real content inside each UI layer was represented by a CommonActivatableWidget.

In GGS, You can directly use the extened GUIS_ActivatableWidget where you can specific the widget's default input config and how mouse will be captured.

Also, You can implement Get Desired Input Config to custom the input config at per widget bias.