Popular Search landscape
View Categories

Core Principles of the Menu and Gamepad

2 min read

Getting Started and Common UI Setup #

We use the CommonUI plugin by Epic to make the UI multi-platform. Enable the plugin in your project settings.

Game Viewport Client Class #

Set the Game Viewport Client class to CommonGameViewportClient in the project settings.

Common UI Input Data #

This class stores the input data for the UI. Set this class in the project settings and link the forward and back actions using a Common UI Input Action Datatable.

Common UI Input Action Datatables #

Defines actions and maps them to platform-specific inputs. Used exclusively for managing UI input. You can copy the GenericInputActionDataTable and adapt it, or make a composite datatable.

Common Input Base Controller #

This blueprint class defines which brush is mapped to which key. Map the controller data to the platform in the project settings.

CommonActivateableWidget #

Activateable widgets are ready to receive input when active. Perfect for pop-ups and switching focus between widgets. Use the function to activate a widget and manage multiple active widgets with CommonUI.DumpActivateableTree.

Common Button Base #

Common Button Base is the master of all buttons in Common UI. It requires a Common Action Widget named InputActionWidget.

Check the Bind Widgets tab to see if the Input Action Widget is bound correctly.

Common Action Widget (Input Action Widget) #

This widget visualizes inputs, such as the A button on a gamepad.

Own Common UI Button #

To create your own Common UI Button:

  1. Make a child of the Common Button Base.
  2. Add a Common Action Widget and Common Textblock, naming the widget InputActionWidget.

  1. Set the text on preconstruct and use the button in your widgets.

Assign Events on Button Base #

Use the On Button Base Clicked event to trigger actions, such as activating a widget when a button is clicked.

Action Bar #

The Common Bound Action Bar displays available actions and reads values from the Common Button Base. Each button can assign which input to accept and display in the action bar.

Get Desired Focus Target #

This function is overridden in an Activateable Widget Class to set focus on a specific widget.

Common Tab List Widget Base #

Used for making a topbar and switching between tabs with trigger buttons. Manually set the switcher variable on the hierarchy where this widget is used.

Back Handling #

Enable back handling in the Activateable Widget Class Defaults to allow a focused and activated widget to listen to the back handler.

Bind Visibilities #

Set Bind Visibilities to change the visibility of a target widget when another activatable widget is activated or deactivated.

CommonHardWareVisibilityBorder #

Show or hide widgets based on the platform. For example, show on Windows and hide on PS5. Set visibility queries in the platform ini file.

Rich Text #

Common UI can be used with Rich Text for formatting text inline.

Set your inline icon datatable in the project settings and use the name of the inline icon in the text block.

Keybinds #

Use the InputKeySelector to receive player-defined inputs in a widget.

Game Settings #

Game settings can exist in multiple states: Default, User, and Changed. Provide options to reset to defaults, cancel changes, or apply changes. Prompt the user to apply changes when leaving the settings screen.

Confirm Dialogue #

Set up a confirm dialogue to confirm actions like applying or canceling changes.

Quality Presets #

Changing the quality preset value will automatically change the values of the affected settings.

Localization #

Access the Localization dashboard in the tools tab to manage localization.

Gather text, add cultures, use string tables, and compile translations.

Audio #

Audio uses sound classes to categorize sounds. Change values in the sound mix and the specific sound class for different settings.

Use Cases #

Setting Up Common UI #

  1. Enable the CommonUI plugin in your project settings.
  2. Set the Game Viewport Client class to CommonGameViewportClient.
  3. Configure Common UI Input Data and Action Datatables.

Creating a Custom Common UI Button #

  1. Make a child of the Common Button Base.
  2. Add a Common Action Widget and Common Textblock named InputActionWidget.
  3. Set the text and use the button in your widgets.

Implementing Back Handling #

  1. Enable back handling in the Activateable Widget Class Defaults.
  2. Ensure the focused and activated widget listens to the back handler.
What are your Feelings