Overview of the Game Layout System 🎮

1️⃣ Overview

A game may facilitate multiple players simultaneously, with each player possessing a dedicated interface (UI layout) to present all relevant UI content.

Each layout comprises multiple hierarchical layers of content that may be displayed, concealed, or overlapped under varying circumstances. The layout system serves to efficiently manage these elements.

2️⃣ 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.

3️⃣ 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.

4️⃣ 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.

5️⃣ 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.

6️⃣ 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.