Logical Progression Games
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.
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
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.
