|
@@ -204,8 +204,7 @@ need two containers as children of our ``HBoxContainer``: a
|
|
|
|
|
|
In the node tree, select all the ``TextureRect`` nodes that should go on
|
|
In the node tree, select all the ``TextureRect`` nodes that should go on
|
|
the left side: the logo, the menu options and the version note. Drag and
|
|
the left side: the logo, the menu options and the version note. Drag and
|
|
-drop them into the ``VBoxContainer``. Then, drag the illustration node
|
|
|
|
-into the ``CenterContainer``. The nodes should position automatically.
|
|
|
|
|
|
+drop them into the ``VBoxContainer``. The nodes should position automatically.
|
|
|
|
|
|
.. figure:: img/ui_main_menu_containers_step_2.png
|
|
.. figure:: img/ui_main_menu_containers_step_2.png
|
|
|
|
|
|
@@ -216,12 +215,14 @@ We're left with two problems to solve:
|
|
1. The characters on the right aren't centered
|
|
1. The characters on the right aren't centered
|
|
2. There's no space between the logo and the other UI elements
|
|
2. There's no space between the logo and the other UI elements
|
|
|
|
|
|
-To center the characters on the right, we'll use a ``CenterContainer``. Add a
|
|
|
|
-``CenterContainer`` node as a child of the ``HBoxContainer``. Then in the
|
|
|
|
-Inspector, scroll down to the ``Size Flags`` category and click on the field to
|
|
|
|
-the right of the ``Vertical`` property, and check ``Expand`` in addition to ``Fill``. Do the same for
|
|
|
|
-the ``Horizontal`` property. Finally drag and drop the Characters into the
|
|
|
|
-``CenterContainer``. The Characters element will center automatically.
|
|
|
|
|
|
+To center the characters on the right, first select the ``CenterContainer``.
|
|
|
|
+Then in the Inspector, scroll down to the ``Size Flags`` category and click
|
|
|
|
+on the field to the right of the ``Vertical`` property, and check ``Expand``
|
|
|
|
+in addition to ``Fill``. Do the same for the ``Horizontal`` property. This
|
|
|
|
+makes the ``CenterContainer`` expand into all available space while
|
|
|
|
+respecting its neighbour ``VBoxContainer``. Finally, drag and drop the
|
|
|
|
+Characters node into the ``CenterContainer``. The Characters element will center
|
|
|
|
+automatically.
|
|
|
|
|
|
.. figure:: img/ui_main_menu_containers_step_3.png
|
|
.. figure:: img/ui_main_menu_containers_step_3.png
|
|
|
|
|