Pages in Documentation
Customize
Overview
Swap Actor
Settings
Swap Actor
UI3 Connect
UI3 VR projects
Customize
Overview
UI3 Scene Settings
Spl. T. Versions
Placement
Mesh Def.
Segments
Books V2
UI3 Vers History
UI3 Preview Ft.
UI3 Overview
UI3 Bugs
UI3 Data Entry
UI3 Design
3 Spline Tools
Doors FAQ
[old] Doors UE5
Step by Step
Tips & FAQ
Reference
UI3 Input Controls
UI3 FAQ + TIPS
Books V1
Doors UE4 (V1)
Change list
3.1 Bugs Fixes
2A Generic BP
2B Gen Examples
1 Railings
UI 1 - Part 1
UI 1
Ui 1 - Part 2
1 Overview
2 UI Features
3 Get Started
4 Info Map
5 BP Actors
6 Manage Clients
7 FAQ
8 Tutorials
UI3 Overview
UI3 Get Started
3.1 Info Map
UI3 Edit & Info
UI3 Other BPs
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
The 3rd part of the Video Tutorials is about the UI Design.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.
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. |
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. |
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.
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. |
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.
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. |
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.