Rapid UI prototyping.


The topic of this tutorial is a basic workflow I am using to create complex UI scenes. It is probably nowhere near optimal, but it makes sense to me as what is most important to me is that I retain full control over where and how I want UI components displayed horizontally or vertically. Example setup is a setup from the UI of my current project.


Basic setup is as follows:

- Control Node

- TextureRect with a background.

- Then comes a series of Hbox Containers which get displayed or hidden (Tabs, Panel Overview, Route Planner, Market, Diplomacy, etc). Basically menu and and menu items.


Next, when I expand the example tab (Research) I first control vertical layout of the elements with the following structure:


Vbox container with the following nodes as child nodes

- A series of Hbox containers with custom minimum size for Y axis.

- Margin Containers when I want to add in a blank space.


Tutorial screenshot


Similar logic applies when I want to control horizontal elements.

- Margin container with the custom minimum size on X axis

- A series of control cones containing research tree elements.

- Each control node contains a series of VBOX containers


Tutorial screenshot


If I were to expand the above highlighted VBOX container, it again contains the usual suspects; Hbox container, Margin containers and TextureRect.


Point to remember here is that you can create complex UI with only the following built-in nodes:


- Control Node

- TextureRect

- Hbox Container

- Vbox Container

- Margin Containers

- Label for adding text.