Pages in Documentation

../images/architecture/2024/door-settings/thumbs/03.jpg
Settings
../images/architecture/2023/ui32/thumbs/01.jpg
UI3 Overview
../images/architecture/2022/doorsv2/thumbs/01.jpg
[old] Doors UE5
../images/architecture/0040/quick/thumbs/01.jpg
Quick Start
../images/architecture/0040/swap/thumbs/01.jpg
Swap Actor
../images/architecture/0040/custom/thumbs/04.jpg
Custom Assets
../images/architecture/0040/system/thumbs/01.jpg
System Drawings
../images/architecture/0040/steps/thumbs/12.jpg
Step by Step
../images/architecture/0040/faq/thumbs/01.jpg
Tips & FAQ
../images/architecture/0040/settings/thumbs/03.jpg
Settings
../images/architecture/0033/designer/thumbs/02.jpg
UI3 Designer
../images/architecture/0033/cost/thumbs/02.jpg
UI3 Cost
../images/architecture/0033/features/thumbs/08.jpg
UI3 Features
../images/architecture/0033/quick/thumbs/01.jpg
UI3 Quick Guide
../images/architecture/0033/settings/thumbs/16d.jpg
UI3 Scene Settings
../images/architecture/0033/connect/thumbs/02.jpg
UI3 Connect
../images/architecture/0033/vr/thumbs/03.jpg
UI3 VR projects
../images/architecture/0033/history/thumbs/01.jpg
UI3 Vers History
../images/architecture/0033/preview/thumbs/01.jpg
UI3 Preview Ft.
../images/architecture/0033/bugs/thumbs/01m.jpg
UI3 Fix Bugs
../images/architecture/0033/design/thumbs/01t.jpg
UI3 Design
../images/architecture/0033/layout/thumbs/02.jpg
UI3 Layout Design
../images/architecture/0033/game/thumbs/07.jpg
UI3 Input&Mode
../images/architecture/0033/faq/thumbs/08.jpg
UI3 FAQ + TIPS
../images/architecture/0023/v4-functions2/thumbs/05.jpg
V4 Functions 2
../images/architecture/0023/v4-functions/thumbs/01.jpg
V4 Functions P1
../images/architecture/0023/v4-quick/thumbs/01.jpg
V4 Quick Guide
../images/architecture/0023/history/thumbs/02.jpg
Ver History
../images/architecture/0023/v3-placements/thumbs/02.jpg
V3 Placements
../images/architecture/0023/v3-mesh/thumbs/02.jpg
V3 Mesh Def.
../images/architecture/0023/v3-segments/thumbs/03.jpg
V3 Segments
../images/architecture/0023/v3-quick/thumbs/01.jpg
V3 Quick Start
../images/architecture/0021/v2/thumbs/01.jpg
Books V2
../images/architecture/0021/v1/thumbs/01.jpg
Books V1
../images/architecture/0019/custom/thumbs/01h.jpg
Customize
../images/architecture/0019/overview/thumbs/00b.jpg
Quick Guide
../images/architecture/0019/swap/thumbs/01.jpg
Swap Actor
../images/architecture/0019/faq/thumbs/01.jpg
Doors FAQ
../images/architecture/0019/v2/thumbs/01.jpg
Doors UE4 (V1)
../images/architecture/2021/ui3-bugs/thumbs/02.jpg
3.1 Bugs Fixes
../images/architecture/0040/history/thumbs/02.jpg
Ver History
../images/architecture/0023/v2-generic/thumbs/01.jpg
V2 Generic BP
../images/architecture/0023/v2-examples/thumbs/01.jpg
V2 Examples
../images/architecture/0023/v1/thumbs/01.jpg
V1 Railings Fences
../images/architecture/2019/guide1/thumbs/01.jpg
UI 1 - Part 1
../images/architecture/2018/03/thumbs/06.jpg
UI 1
../images/architecture/2019/guide2/thumbs/01.jpg
Ui 1 - Part 2
../images/architecture/2019/ui2/thumbs/01.jpg
1 Overview
../images/architecture/0013/features/thumbs/04.jpg
UI2 Features
../images/architecture/0013/start/thumbs/01.jpg
UI2 Get Started
../images/architecture/0013/infomap/thumbs/06.jpg
UI2 Info Map
../images/architecture/0013/actors/thumbs/01.jpg
UI2 BP Actors
../images/architecture/0013/users/thumbs/01.jpg
UI2 User Manager
../images/architecture/0013/faq/thumbs/03.jpg
UI2 FAQ
../images/architecture/0013/tutorials/thumbs/06.jpg
UI2 Tutorials
../images/architecture/2021/ui3/thumbs/01.jpg
UI3 Overview
../images/architecture/0033/start/thumbs/02.jpg
UI3 Get Started
../images/architecture/2021/ui3-infomap/thumbs/02.jpg
3.1 Info Map
../images/architecture/0033/variation/thumbs/01.jpg
UI3 Variations
../images/architecture/0033/other/thumbs/02.jpg
UI3 Other BPs

UI3 Interface Layout Design

UI3 has a modular interface design. All menus can be created from Features and arranged with the Main Menu Layout array.

  • Layout Design - how the UI is arranged
  • Design Settings - text format, icon appearance, and colors.

Content:

Video Tutorial

How it works

Main Menu Buttons

Feature (Sub) Panels

Design Schemes, Scenarios, etc.

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
Top of page