Introduction

When crafting UI in Unreal Engine, there often arises a need to share and transfer a set of data across different UI widgets or between various hierarchical levels of UI. Although it is possible to pass data to child UI widgets through manually data setters, this method becomes exceedingly cumbersome when the UI hierarchy is deeply nested. Moreover, data communication between UI elements at different levels requires pre-obtaining references between them and binding events accordingly.

The UI Context System within UE5's Generic Game System, however, offers a superior solution to address this challenge. This system enables the sharing and passing of specific data sets across UI for each player in the game, circumventing the need for cross-references between UI elements and the repetitive layering and packaging of data.

What is UI Context?

In essence, a context is a UObject that serves as an intermediary between different UI widgets.

To illustrate with my inventory system: the inventory menu is designed for reusability. Whether a player is inspecting their items, purchasing or selling through a shop, selecting equipment to equip from an equipment menu, or scavenging items from a chest in a level, they interact with the same "Inventory Menu" widget. However, upon activation, the inventory menu adapts its internal behavior based on the specific(different) context.

When a player engages in trade with a merchant, the context encapsulates information such as "the player and their inventory, the merchant NPC and their inventory, whether the action is buying or selling, and which item the player has selected for the transaction." During a purchase, the inventory menu displays items from the merchant’s stock with the title bar showing "Buy"; during a sale, it showcases items from the player’s inventory with the title bar indicating "Sell."

Creating UI Context Type

Within the GGS framework, new context types are created using GUIS_GameUIContext.

Registering and Unregistering UI Context

The blueprint below demonstrates how I construct a UIContext within the interaction Ability for "trading with a merchant."

注意

You may noticed that I have not passed the parameters required by the UI through Casting Widget to desired class. Instead, I have put the necessary data into the ui context, allowing the UI to access this data subsequently through the context.

Accessing UI Context

Typically, a context is registered before the UI is opened, allowing subsequent UI elements to directly access it, store new data, trigger events, and more.

In the diagram above, upon activation, the inventory menu adjusts its behavior (enabling or disabling certain features) based on the UI context type.

提示

At first glance, this screenshot might appear somewhat chaotic, but on the contrary, it makes the UI itself far more self-contained.

You could entirely replace the Widget to implement the UI portion of shop transactions, yet the data communication and the Context would remain unaffected and require no modifications.

Note

All contexts between each LocalPlayer are isolated from one another.
A context of the same type can only be registered once.
It is advisable for the object registering the context to also handle its unregistration.