More Pages:

../images/architecture/2023/ui32/thumbs/01.jpg
UI3 Overview
../images/architecture/2021/ui3-start/thumbs/02.jpg
UI3 Get Started
../images/architecture/2023/ui3_data/thumbs/02.jpg
3.2 UI Settings
../images/architecture/2023/ui3_design/thumbs/01.jpg
3.2 UI Design
../images/architecture/2023/ui3-custom/thumbs/01.jpg
Features /Preview
../images/architecture/2021/ui3-var/thumbs/01.jpg
UI3 Edit Mode
../images/architecture/2021/ui3-actors/thumbs/02.jpg
UI3 Blueprints
../images/architecture/2021/ui3-game/thumbs/07.jpg
UI3 Game Modes
../images/architecture/2021/ui3-faq/thumbs/01.jpg
UI3.0 FAQ
../images/architecture/2023/ui3_faq/thumbs/01.jpg
3.2 FAQ
../images/architecture/2023/ui3_history/thumbs/01.jpg
UI3 Versions

UI3.2 User Interface Design

This section explains how to change the layout of the interface for your project. Changes are made in the BP_UI3InfoMap blueprint which needs to be placed into your scene.

Version UI3.2+ (2023)

Content:

Video Tutorial

How it works

Main Menu Buttons

Feature (Sub) Panels

Design Schemes, Scenarios, etc.

Text size, Icons, Colors

Advanced UI Settings

Translate UI3 to a different language

Video Tutorial

The 3rd part of the Video Tutorials is about the UI Design.

Video Tutorial Playlist

How it works

The interface design is modular from UI3.2 on (March 2023) and can be arranged in any way. The demo project's main level has a similar layout than in earlier versions.

The UI is created by two main arrays:

  • Main Menu Layout array holds the menu that appears on the top as a line of buttons.
  • Feature Panels array is within the main menu array element and holds the sub menu panels that appear when a main menu button is clicked.

image

Main Menu Buttons

Every index of the Main Menu Layout will show up as a menu item.

  • click (+) to add an array element
  • click and hold the dots :: to drag the element to a new position
  • use the little arrows for more options.
> Panels Design
> Main Menu Layout This array contains all the main menu items.
> 0 Each array element represents one main menu button from left to right - [0] [1] [2] ...
Menu Icon Use an icon that is square and black on white background. Icons are available in the UI/Tex folder,
Menu Name Give the menu a name or leave it blank if you only want the icon to appear.
> Menu Item Weather this is a Panel or just a button. By default every main menu is a panel. Buttons have no panels
> Feature Panels This array holds the Sub Features of this Menu Button
isEnabled This gives you a quick way to disable this panel. You could also delete the menu array element.
> Content [OLD] This array contained the Sub Features in version 3.2.1 - this is just a backup reference.

image

Feature (Sub) Panels

Sub Panels are created by adding elements to the Feature Panels array inside the array element for the Main Menu Layout.
> Feature Panels This array holds all the Features for the main menu item.
> index [0] add an array element for each feature
Feature Type Select the type of the feature. use 'Features With Previews' for
- Design Schemes, Variation Groups, Scenarios
- Sequence Player
- Scene Travel
Feature ID Some Features (Features with Preview, Custom Buttons) need an ID to tell them apart. Enter the ID here.
> index [1] 2nd array element for another feature panel
> Content [OLD] This array held all the Features in versions before 3.2.4.
Update From Old Data
Force Update From Old Data
Tries to port the Content [OLD] array to the new Feature Panel array. As well as creating the Features With Preview array from the old entries for Design Schemes, Scenarios, etc.
Force Update will overwrite! any new data already entered.

image

Design Schemes, Scenarios, etc.

Design Schemes, Scenarios, Sequence Players, and Scene Travels are now all combined in Features With Previews. Now multiple features of the same type are possible. The demo level has two Scenario feature panels and two Scene Travel feature panels as an example.

There is also a new type of feature called Variation Group that allows to trigger a group of Variation actors together.

Feature ID points to the array index of the Features With Preview array that will be used for this panel.

There is a separate section about Features With Preview Images . Link below.

Features With Preview Images

image

Text size, Icons, Colors

> UI Panels Design
> Main Menu Layout as above
UI Color Set Used select one of the color sets defined in advanced section
Main Menu Text Size The size of the text in the top menu row
Main Menu Icon Size The size of the icons in the top menu row
Text Size The size of all other text
Text Size Header The size of all feature headers
Text Size Buttons The size of the text in buttons.
Icon Size The size of all other icons in buttons or just placed inside the menu
Letter Spacing The spacing between letters of text
> advanced display
UI Colors see below
Show Main Menu Icons Show or hide the icons in the top menu row
Font Family Assign a font family here. Use one from the UI3 folder or import your own.
Min Panel Width
Max Panel Width
The minimum and maximum panel size. Note that some elements like the floorplan image can extend the panel size.
Incremental Margin The margin from the left side that each panel will have multiplied by the ID of the main menu item.
Menu Delay This delays the construction of the main menu. Otherwise you may get 'Access None' errors because the info map isn't loaded yet.

image
UI Colours are stored in the UI Colours array The UI will use the array element with the index of UI Colour Set Used.

There are 4 array elements to choose from. The colour names are written in blue on the image above.

  • [0] - Translucent dark with white text (default)
  • [1] - Inverted default, background is white text is dark
  • [2] - like [0] but the item in focus is marked yellow (for gamepad)
  • [3] - like [0] with extremely dim colours to support the 3D virtual tablet in VR mode.

You can change one of the existing schemes or you can add your own scheme as a new array element. Best to copy one of the existing schemes to a new array index.

Set the new array as the one used in UI Colour Set Used.

image

Advanced UI Settings

> UI Advanced Design
> Button Icon Array
0 | 1 | 2 ... This array holds all icons used in the UI. You can replace an icon here but do not reorder, add, or delete icons.
> Description Text
0 | 1 | 2 ... This array holds all description text used in the UI. You can replace or translate text here, but do not reorder, add, or delete text.
> Message Text This array holds all messages displayed at the bottom of the screen. You can translate them here if needed.
> Months This array holds the names of each month in english. You can translate them here if needed.
Preview Size The size of the preview image thumbs. Default is 250x140 (based on screen res. 1920x1080).
Preview images need to have the same ratio. Or the ratio needs to change here. Square preview images would be 140x140 for example.
This is only the size displayed in the UI. The actual image should be at least twice as large. Set the texture compression to UI for the image.
VR Preview Brightness Default 1.0. In VR the screen may be too bright on the virtual tablet. You can dim the images here. You would also need to lower the text color brightness or use colour scheme [3].
> advanced display
Button Shape A special material giving the buttons its shape
Background Shape A texture used to give some background borders rounded edges
Border Shape Size Default 256x256. Influences the roundness of the borders.
Border Margin Influences the shape of the borders. Change with care!
Slot Saved
Save Slot
Colors for the save slot buttons
Icon A Gamepad or Controller icon used to select items
Icon B Gamepad or Controller icon to toggle the interface visibility
Icon C Gamepad or Contrroler icon to cancel or use certain buttons.

image

Translate UI3 to a different language

You are able to input foreign language into all text variables, like headers, menu names, setting sliders, or the project info. All variables are 'text' variables and allow foreign language input.

All other text used in the UI3 can be translated in a few text arrays. You need to translate text phrase by phrase. Do not remove, add or re-order the array elements or the UI3 will use the wrong text.

  • Button Icon Array - this let you change the button icon images if necessary. They need to be square, and black on white *.tga or *.png textures.
  • Description Text - This holds any descriptive text in the menus
  • Message Text - These are the messages that pop up on the bottom of the screen.
  • Months - As it says. these are the calendar month names.

image
Top of page