UI Design And Settings

User Interface Layout and Design. Everything about the menu layout and how to create it.

Vertical Panel Position

This is where the first panel is placed. The distance is measured from the left or right top corner.

Vertical Margin

The distance is multiplied by the button ID and then added to the vertical panel position. The panels will move incrementall down. The panels won't move if the value is 0.0.

Hide Main Menu Names

All menu names can be hidden in the UI Panel Design section

Example

Light Colors on Semi Beige used in the demo level for gamepad (controller) input.

The image should be self explaining for most colors

• Text is for all text in the UI not in Focus.
• Focus is for headers and marker elements highlighting the element in focus.
• Background is for all panels. The main menu button background can be different. Alpha values less than 1.0 make the background transparent.
• Frames have an outer Frame and a Frame Gap between frame and image.

Menu Icons

All menu icons live in the Icons Data table assigned in the Acvanced section. They are categorized into 4 groups: Menu, Buttons, Settings, and Data. Hit Icons show in the Edit Mode Widget, Specs and BR icons are for the Unit Info.

Controller Hint Icons

These icons are specific to the input controls and live in the Controller Icons Data table.

Controller Icons Row Name

The row name is set initially from the Intended Use Preset in the General Settings It can be manually changed here for the different VR controllers.

Icons can be replaced in the data table. The UI selects the icon by its ID and row name. Icons can't be deleted and icons can't be added as the UI wouldn't find them anymore.

Text Font Family

The font set here will affect all text in the UI. There are a few text fonts available in the folder UI / ETC / FONT.

Custom Fonts

Unreal can use other custom fonts. They need to have the following style members

• Default
• Bold
• Italic (currently not used anywhere)

Google Fonts offers many free fonts for many languages. I personally haven't found a way to import fonts that have dynamic sizing and weight. Old school fonts are easy to import.