User Interface is a part of the game where a player can interact with the game, and another way to give notification to the player. It can be anything, HUD that shows a player his health, his energy boost or Screen that manage player’s inventory. Easier that player can interact with UI or understand the UI is better.
I won’t talk about the good or bad UI here. I will talk about managing your UI during development and runtime.
The UI system that provided in any (free) game engine is not quite “manageable”. For instance, In UMG, all widgets can be initialized anywhere and add to the main viewport from anywhere.
This will create chaos is a lot of UI to show to the player and handled by the programmers. It will help if you can make the UI system centralized to handle open or close or do some stuff (let’s say UI manager). This is the way I think is better to do it, so it will help the programmers to manage an overwhelm UI flow.
Grouping UI by type
Specifying types of UI that wanted to be used in the game is important. It means that you need to also specify the behavior of each type of UI shown to the player. Here are some types that I usually use in when developing UI for a game.
- Widget. A widget can be interact-able or non-interactable. This type is a little piece of UI that I usually put on screen or HUD or another widget. Let’s say that this is a base type of UI that can create another type of UI. Buttons and Textfields are of this type of UI. Btw, I borrow the name widget because Unreal uses the name to define a base class for creating UI.
- Screen. A screen is a widget that occupied all screen and only open one for the player. It means that when one screen is opened, the other is either closed or hidden. I often make Screen interactable (except for loading screen) and paused the game (it depends on the game design).
- Modal. This type is not a very popular word in game programmers, but it’s kind of popular in web or mobile development. Modal is a widget that prevents another widget to interact with. Popup is an example of a Modal widget. You can read more about Modal in Wikipedia.
These types are not standard, I made these up. So, if you have another idea for extra types, go ahead add yours.
You knew what types of UI you want to handle in your game. Now, let’s talk about layering — what on top of what.
- HUD layer. Heads up display (HUD) that shows your health status, collected coins and more. This is the very back layer in UI. All widget is allowed to be added to this layer.
- Screen layer. The second layer of the UI is only for a screen type. It’s handling open only one screen at a time. The behavior of the layer is depended on the game design, it can be either paused the game, slow motion the game or not affecting the game run at all.
- (Optional) Notification Layer. This layer is a layer that shows player any notification, it can be interact-able but not necessary. This layer is made so it always shows the notification on top of HUD and any opened screen.
- Modal layer. The top layer of the UI handles modal widget only. This also handles block the interaction with below layers when any modal is opened in this layer. When nothing is opened in the Modal layer, the block is disappeared. Using background blur when modal opened is also a good idea.
This short blog post might give you a glimpse of the idea how to implement UI system for the next or current game. If that’s the case, I’m grateful.