Etheri Dev Log #4: Game UI Architecture. Setting up HUD and creating health bar .

So now that I've got attributes like health and mana for my character I need to get that information to the UI so I can visually display that information.

I'm using a model view controller system for my game UI architecture. The widget blueprints in the editor will serve as the view part of the system as they are what the player sees on screen.

The controller is responsible for sending data to the widget. For this I created a widget controller class specifically for the HUD overlay and its based just on a UObject.

High level view of the UI classes relationship

The classes I have created so far for UI.

The overlay widget controller contains delegates and callbacks based on the attributes health and mana to broadcast any changes to these variables.

This is how the widget controller responds to the data changes

The overlay widget controller inherits a struct from its parent class

Struct I created called FWidgetControllerParams

The purpose behind this struct is to pass the PlayerController, PlayerState, AbilitySystemComponent and AttributeSet variables found on the Character class onto the EtheriHUD class. This is because on the EtheriHUD class we are initialising the Overlay so that it can be added to the viewport.

The HUD and the players attributes are initialised here

The character class contains the actual data needed for the UI system

The rest of this work was done in blueprints as when your working with UI that is inevitable in unreal. The main overlay widget that is being added to the viewport is just to store the other widgets in one blueprint. WBP_GlobeProgressBar is the parent class for the health bar and mana bar blueprint class.

In this blueprint we are simply setting the size and images for the widget

However it also has this function in order for the health and mana bars to increase and decrease as appropriate

In WBP_HealthProgressBar and ManaProgressBar we're calling set progress bar percent

Something I learnt during this is that if you create a class based on UObject you must include blueprint type and blueprintable in the UClass macro in order to create a blueprint based on that class.