Main Menu

10 min read

This is our quick walkthrough of the system:

Play

By using this system, all our other modules will be gamepad compatible like this:

Play

And if you are intrested in our devlog during the dev process:

Play

We also have a tutorial on our Udemy course within our survival framework on how to setup a basic menu simular like this system from scratch.

Getting Started and Common UI setup #

We use the CommonUI plugin of Epic to make the UI mutli platform.
Quickstart:
- https://docs.unrealengine.com/5.0/en-US/common-ui-quickstart-guide-for-unreal-engine/
Plugin needs to be enabled:

Game Viewport Client class #

Game Viewport Client class needs to be set to CommonGameViewportClient

Common UI Input Data #

This is a class which stores the input data for the UI. So this is critical.
You need to set this class in the project settings:

In that class, you need to set the linked Forward and Back action:
- The datatable link is a Common UI Input Action Datatable.

Common UI Input Action Datatables #

Defines actions and maps it to platform specific inputs.
Is used in the Common UI input data class
Has nothing to do with other inputs in the game. They are exclusively used for managing UI input.
You can copy the GenericInputActionDataTable and adapt your own. OR you can make a composit datatable with the engine version + your own.

To make your own datatable, it needs to be a based of the following structure:

To add the engine datatable to your own list make a composit:

In the input datatable, you define the possible actions and link the input to it: e.g. Navigate Forward is linked to ENTER and Face button down in the image below.

Common Input Base Controller #

This blueprint class defines which brush is mapped to which key. As an example:
- As an example, this C key is mapped to the C icon.

In the project settings, you need to map which controller data is linked to which platform:
- As an example, the windows platform has assigned the keyboard input brushed AND the Gamepad brushes. This so it can switch the brushes if someone uses a gamepad on PC.
  - Important note: Please make sure that the Default Gamepad Name is set to Generic, and have also the gamepad name set to generic in the Common Input Base Controller

CommonActivateableWidget #

https://docs.unrealengine.com/5.0/en-US/API/Plugins/CommonUI/UCommonActivatableWidget/
The key concept of this class: Activateable widgets are considered active if they are ready to receive any input. So if you want it to receive input, keep it active. If not, deactivate it. This is perfect for if you have a topbar widget that needs to keep receiving input (e.g. RB LB to switch tabs) while focus is on another widget e.g. in the center.)
Another key usage is to play an animation on activate/deactivate. It is an event in this class.
Usefull command for debugging multiple active widgets: CommonUI.DumpActtivateableTree
- It will show the active tree in the log
Every widget that needs “activation” or “deactivation” needs to be a child of this class. Perfect for pop-ups and switching focus between widgets. I think that nearly every higher level widget needs to be derived from this class.
You are able to call this function to activate a widget:

Every child of this class has the following settings:

Common Button Base #

https://docs.unrealengine.com/4.27/en-US/BlueprintAPI/CommonButton/
Common Button Base is the master of all buttons in Common UI
A Common Button Base requires a “Common Action Widget” to be in the hierachy. This Common action widget needs to be called: “InputActionWidget”. This will make sure the input action is bound to the button.

- You can check the Bind Widgets tab to see if the Input Action Widget (Common Action Widget) is bound correctly by checking the binds:

- If you bind an input action widget, the following class defaults can be used:

This widget is used for visualizing inputs. As an example, check the A button on the left:

The tooltip of the Input Action Widget says the following. So it only shows if specified.

Own Common UI Button: #

You will most likely need/want to use a Common UI Button and bind it to an input action widget. To set it up:
- Make a child of the Common Button Base
- Add a common Action Widget AND Common Textblock
  - Please note it needs to be called: InputActionWidget

- Set the text on preconstruct:

- Now you can use this button in your widgets:

This button will display the input action.

Assign Events on Button Base #

When you select a child of the button base class (e.g. our own made child of Button Base), we will see the following event options:

On Button Base Clicked will be the most used event.

The most common way to activate/deactivate widgets will be to do it on the level of the widget that contain the button bases itself.
In the case of making a “main menu”, you will have buttons like: Play, Options, Quit. These buttons are defined in one widget called: “Main Menu List” or something like that.
There we Assing the event: On Button Base Clicked
In the case of quitting we can execute the action directly on the bind

Action bar #

You can place the Common Bound Action Bar in your UI.
This advanced element, will display the available actions at that moment.
It will read out values from the Common Button Base.
On each button you can assign: Which input does it accept, and should that input be displayed in the actionbar.

The commonbound action bar requires a Common Bound Action Button to be assigned

- This button is a format template for the action bar button.

Get Desired Focus Target #

Is a function that can be overridden in an Activateable Widget Class

Takes a widget as input:

Is used for setting the focus on a specific widget

This is a class used for making a topbar and switch between tabs with trigger buttons.
A Common Tab List Widget uses a linked switcher. We need to manually set the switcher variable on a higer hierarcy on which this tab list widget is used

Register tabs:
- 1. For each tab that we set in the Tab Entries variable, we need to register.
- 2. On register, we give the tab a name.
- 3. The tab also requires a widget to be created. We use the button master.
- 4. The tab entries are a mapping to which name should be linked to which tab. We use that same name as the tab ID

In the tab list widget, you can set the next and previos tab input action in the class defaults:

It is important to set the widget that includes the tab switcher to activated or auto-activate:

Back Handling #

A crucial part of UI handling is being able to go back. It is using the default back button set in the project settings in the Common UI Input data.
To make sure a focused and activated widget listens to the back handler, please enable it in the Activateable Widget Class Defaults

Bind Visibilities #

If you are activating or deactivating another activatable widget, you might want to change the visibility of another activatable widget. E.g. when pressing a button to open another widget, you probably want to hide the one that had the button that opened the other widget.
To do so, you can “Set Bind Visibilities”. This sets the behavior of a target widget on activate/deactivation of any bound widget.
- So to make sure it does execute the wanted behavior, you need to bind visibility on activation of an activatable widget.

CommonHardWareVisiblityBorder #

Is an element to show/hide widgets based on your platform.
In this example, IF windows > Show. If PS5 > Hide. Because we do not have a quit button in console.

Based on the visibility query. If set, it shows, if not, it hides. This query is set in the platform ini file.

Rich Text #

Common UI can be used with Rich text. Rich Text is used for formatting inline a text block.
https://docs.unrealengine.com/4.27/en-US/InteractiveExperiences/UMG/UserGuide/UMGRichTextBlock/
To also allow inline icons, you need to select your own Default Rich Text Data Class in the project settings.

In that class, you need to set your inline icon datatable

After that, you can use the name of your inline icon in the text block:

Keybinds #

To create keybinds, unreal engine made the: InputKeySelector
- You can use such an input key selector to receive the input that the player sets in such a widget.

Game Settings #

Our game settings can exist in multiple states:
- Default Settings (Defaults defined upfront)
- User Settings (Applied settings by an user)
- Changed Settings (Changed the setting, but did not apply yet)
  - A changed setting could also have two different states:
    - Directly executed uppon change: e.g. Brightness slider as a preview
    - Needs apply before seeing a change: E.g. resolution settings
    - Both should reset to initial user settings state upon cancel, and reset to defaults upon reset to defaults
To toggle between these states we give the user the following options:
- Reset to Defaults
  - Reset all game user settings to default state
- Cancel Changes
  - If a player has changed settings, but did not apply them yet > Cancelling would reload the user settings
- Apply
  - Apply would save the changed settings into the user settings
Prompt for apply changes
- If a user leaves the current screen but did make changes, it would be asked if settings should be applied
- Upon apply, it will be excecuted and saved
- Upon cancel, it will be reset to the previous applied game user settings or to the defaults

States of the settings are stored on multiple locations:
- Game user settings (Unreal’s setting method)
- Save game for settings that are not being able to
- Uppon apply

Confirm Dialigue: #

To setup a confrim dialogue, use the code like this:

Quality presets #

When changing the quality preset value, it will also automatically change the values of the affected values

Localization #

- You can access the Localization dashboard in the tools tab:

- Only variable types of text has localization options

- Ghater text
  - Is where the engine searches for text to localize

- Cultures
  - The most important part of localization are the cultures.
  - The cultures are basically a language which you support

- Stringtable
  - You do not want to translate double words. If a word has the same meaning and should be translated the same, you can add it to a string table.