Note : Godot 3.2 beta 4.
I finally sat down and read the GUI section in the Godot documentation.
Pretty boring. But also interesting ...
And as it turns out, the Control nodes work nothing like I expected them to work !
Not their fault.
My fault for not reading this section sooner.
As I understand it now (might still be flawed), there are basically 2 systems.
The first one is called 'basic' and uses only anchors and margins. The second system
is called 'advanced' and uses Containers for layout.
YOU SHOULD NOT SET ANCHORS OR MARGINS ON CHILDREN IN CONTAINERS !!!
When you start a new Scene of type 'User Interface', Godot automaticall adds a Control node as the root node. The anchors are set as follows : left = top = 0, right = bottom = 1.
This means that the Control node is anchored both at the top-left (0,0 screen coordinates) as well as the
bottom-right (1,1 screen coordinates). If you were to test the scene and resize the game window,
the Control node would always be exactly the same size as the window.
If you wanted the Control node to be 20px smaller (in every direction) than the window, you would adjust the margins :
The 'basic' layout system makes it very easy to center text, for instance.
Centering text horizontally -and- vertically is easily accomplished by setting the anchors right and bottom to 1, with all margins set to 0 (or whatever, really). Don't forget to also set the Align and Valign properties of the Label to 'center' !
The docs mention a different way of centering things (more general method than the one I used for the Label node).
First, you need to set all anchors to 0.5 to center the top-left corner of the control.
Next, you need to adjust all margins (relative to anchors) by adding or subtracting half control width/height :
With this combination, it is possible to do some 'fancier' things. The important thing to remember though, is : do -not- touch anchors and margins for the children of a container. They will be reset anyway !
This is an example of an HBoxContainer with 3 ColorRectangle children.
The Container has its right anchor set to 1, and all margins set to 0. I also gave it a
min vertical size of 200px.
All ColRects have their min size set to 100x100 px. The default settings automatically check the 'fill'
size flags (both hor & vert).
Setting the vertical size flag to 'fill' results in the child controls taking up all available vertical space in their parent. Hence, their real vertical size is 200px, even though the min size was set to 100px.
This is the result if the middle child has its vertical size flag -not- set; the ColRect reverts to its min size :
Here are some other combinations ...
'Expand' makes a control take all available space. In combination with 'fill', this results in a
stretched ColRect, whereas with 'shrink center' the ColRect keeps its min size and moves to the center
of the available space.
Below is another interesting layout ; it was obtained by -not- setting the vertical size flag on the 3 ColRects, and setting the horizontal flags to 'expand'. Child2 also has its hor flag set to 'shrink center', and child3 also has 'shrink end' set.
Of course, resizing the game window preserves this layout.
I also tried using the GridContainer, but I think the size flags are a bit broken there ... (Godot 3.2 beta 4). Or maybe I don't understand how they work for this container ...
In the docs, the TabContainer is used with Buttons as its children. The text on the tabs comes from
the names of the Btn nodes (so, limited to text only). The tab panel can have an icon and text, but they
also seem limited to me.
Unless you add child nodes to the Btn nodes (which seems weird, but does seem to work ???) ...
Maybe instead of Btns, you could use Panels. That seems more logical to me ... But then I don't understand why the docs use Btns ...
Anyway. That concludes my summary of the Godot docs.
Time now to rethink my game GUI ... =)