Godot:Container
lastmod 2022-04-16created 2020-10-2414 edits
How to use containers in Godot.
Introduct
Anchors are an efficient way to handle different aspect ratios for basic multiple resolution handling in GUIs.
For more complex user interfaces, they can become difficult to use.
This is often the case for games such as RPGs, online chats, tycoons, or simulations. Another common case where more advanced layout features may be required is in-game tools (or simply tools).
All these situations require a more capable OS-like user interface with advanced layout and formatting. For that, containers are more useful.
Caveats
When a container-derived node is used, all child Control nodes give up their own positioning ability. This means the container controls their positioning, and any attempt to manually alter these nodes will be either ignored or invalidated the next time their parent is resized.
Therefore, no child Control node should modify Margin or Rect.
Likewise, when a container-derived node is resized, all its children are repositioned according to the behavior of the container type used.
Containers have new properties suited to their own characteristics, usually in a property group starting with Custom .
Godot-control-property-custom_constants.png
CenterContainer
Note that Expand and Stretch Ratio of child controls do not work.
BoxContainer
ColorPicker
HBoxContainer
VBoxContainer
GraphNode
GridContainer
SplitContainer
HSplitContainer
VSplitContainer
MarginContainer
PanelContainer
ScrollContainer
TabContainer
ViewportContainer
Size Flags
- Fill
- Ensures the control fills the designated area within the container.
- Regardless of whether the control expands (see below), it fills the designated area only when this is turned on (the default).
- Expand
- Attempts to use as much space as possible in the parent container (on each axis).
- Controls that do not expand are pushed away by controls that do not expand.
- Between expanding controls, the amount of space each takes from the other is determined by the ratio (see below).
- Shrink Center
- When expanding (and not filling), stay at the center of the expanded area. (By default, it stays at the left or top).
- Shrink End
- ?
- Stretch Ratio
- A simple ratio of how much the expanded controls take up of the available space in relation to each other.
- For example, a control with "2" takes up twice as much of the available space as one with "1".
Example
Godot-ui-control-scene-eduprime-example.png
Settings configured during the EduPrime project.
Troubleshooting
When child controls of a BoxContainer do not grow in size
The Expand property in Size Flags must be Enabled.