UI Extension System Overview 🖥️

1️⃣ Overview

Creating a user interface can often be quite cumbersome, particularly in the case of a Heads-Up Display (HUD), which typically requires the presentation of numerous elements.

As game systems become progressively intricate, HUDs tend to grow unwieldy, containing a plethora of interrelated content.

Many UI elements dynamically hide or display different widget content based on the gaming context. The UI Extension System is designed to assist you in:

• Arranging a series of placeholders (extension points) marked with GameplayTags within the HUD
• Injecting various UI widgets dynamically into different placeholders through game code (adding UI to extension points) and removing them from specific extension points, thus facilitating modular management and performance optimization.

2️⃣ Usage

1. Placing extension Points

Identify the widget you wish to extend during gameplay (generally larger UI elements such as HUDs or inventory panels) and add the GUIS_GameUIExtensionPointWidget in an appropriate location, configuring its dimensions and position.

You will also need to associate it with a GameplayTag.

2. Dynamically Registering Widgets to extension Points

At suitable moments within the game, invoke the aforementioned API to inject UI into the extension points. For instance, only when there is an interactive object nearby will the “Interaction Box” widget be dynamically injected.

3. Unregistering from extension Points

Upon registering a widget, store the returned value (ExtensionHandle) in a secure location.

When the UI is no longer required, you can unregister it by calling the above API and passing the ExtensionHandle, thereby removing the widget.

3️⃣ Case Study

The image below depicts my HUD, which appears stark and empty, occupied solely by a few placeholders.

Different systems can share this identical HUD layout, yet inject distinct content:

Movement System

Combat System

4️⃣ Advanced Usage

🔜 TODO.