Merge pull request #511 from GDquest/ui-step-tutorials

Write intro to UI system and 2 step by step UI tutorials

learning/step_by_step/index.rst

@@ -11,7 +11,9 @@ Step by step
    scripting
    scripting_continued
    your_first_game
-   gui_tutorial
+   ui_introduction_to_the_ui_system
+   ui_main_menu
+   ui_game_user_interface
    ui_code_a_life_bar
    splash_screen
    animations

learning/step_by_step/ui_game_user_interface.rst

@@ -0,0 +1,623 @@
+Design the GUI
+==============
+
+Now that you've nailed the basics, we're going to see how to build a
+Game User Interface (GUI) with reusable UI components: a life bar, an
+energy bar, and bomb and rupee counters. By the end of this tutorial,
+you'll have a game GUI, ready to control with GDscript or VisualScript:
+
+.. figure:: ./img/ui_gui_design_final_result.png
+
+   The final result
+
+You'll also learn to:
+
+1. Create flexible UI components
+2. Use scene inheritance
+3. Build a complex UI
+
+Download the project files: :download:`ui_gui_design.zip <files/ui_gui_design.zip>` and extract the archive. Import the `start/` project in Godot to follow this tutorial. The `end/` folder contains the final result.
+
+
+Breaking down the UI
+--------------------
+
+Let's break down the final UI and plan the containers we'll use. As in
+the `main menu tutorial <#>`__, it starts with a ``MarginContainer``.
+Then, we can see up to three columns:
+
+1. The life and energy counters on the left
+2. The life and energy bars
+3. The bomb and rupee counters on the right
+
+But the bar's label and the gauge are two parts of the same UI element.
+If we think of them this way, we're left with two columns:
+
+1. The life and energy bars on the left
+2. The bomb and rupee counters on the right
+
+This makes it easier to nest containers: we have some margins around the
+border of the screen using a ``MarginContainer``, followed by an
+``HBoxContainer`` to manage our two columns. The two bars stack on top
+of one another inside a ``VBoxContainer``. And we'll need a last
+``HBoxContainer`` in the right column to place the bomb and rupee
+counters side-by-side.
+
+.. figure:: ./img/ui_gui_step_tutorial_containers_structure.png
+
+   We get a clean UI layout with only 4 containers
+
+We will need extra containers inside the individual UI components, but
+this gives us the main GUI scene's structure. With this plan in place,
+we can jump into Godot and create our GUI.
+
+Create the base GUI
+-------------------
+
+There 2 possible approaches to the GUI: we can design elements in
+separate scenes and put them together, or prototype everything in a
+single scene and break it down later. I recommend working with a single
+scene as you can play with your UI's placement and proportions faster
+this way. Once it looks good, you can save entire sections of the node
+tree as reusable sub-scenes. We'll do just that in a moment.
+
+For now, let's start with a few containers.
+
+Create a new scene and add a ``MarginContainer``. Select the node and
+name it ``GUI``. Then save the scene and name it ``GUI.tscn``. It will
+contain the entire GUI.
+
+With the ``MarginContainer`` selected, head to the inspector and scroll
+down to the custom constants section. Unfold it and click the field next
+to each of the ``Margin`` properties. Set them all to ``20`` pixels.
+Next, add an ``HBoxContainer`` node. This one will contain our two bars
+on the left and separate them from the two counters on the right.
+
+We want to stack the bars vertically inside the ``HBoxContainer``. To do
+this, let's add a ``VBoxContainer``. Name it ``Bars``. Select the parent
+``HBoxContainer`` again and this time, add another ``HBoxContainer``.
+This one will hold the counters, so call it ``Counters``. With these
+four containers, we have the base for our GUI scene.
+
+.. figure:: ./img/ui_gui_containers_structure_in_godot.png
+
+   You should have 4 containers that look like this
+
+.. note:: 
+
+    We can work this way because we first broke down our UI design
+    and took a few moments to think about the containers we'd use. When you
+    follow a tutorial like this, it may seem weird. But once you're working
+    on real games, you'll see it's an efficient workflow.
+
+Create the bars' base
+~~~~~~~~~~~~~~~~~~~~~
+
+Each bar is split into two sub-elements that align horizontally: the
+label with the health count on the left, and the gauge on the right.
+Once again, the ``HBoxContainer`` is the perfect tool for the job.
+Select the ``Bars`` node and add a new ``HBoxContainer`` inside of it.
+Name it ``Bar``.
+
+The label itself is requires at least three nodes: a ``NinePatchRect``
+for the background, on top of which we'll add a texture on the left,
+either ``HP`` or ``EP``, and a ``Label`` on the right for the value. We
+can nest ``Control`` nodes however we want. We could use the
+``NinePatchRect`` as a parent for the two other elements, as it
+encompasses them. In general, you want to use containers instead, as
+their role is to help organize UI components. We'll need a
+``MarginContainer`` later anyway to add some space between the life
+count and the gauge. Select the ``Bar`` and add a ``MarginContainer``.
+Name it ``Count``. Inside of it, add three nodes:
+
+1. A ``NinePatchRect`` named ``Background``
+2. A ``TextureRect`` named ``Title``
+3. And a ``Label`` named ``Number``
+
+To add the nodes as siblings, always select the ``Count`` node first.
+
+.. figure:: ./img/ui_gui_step_tutorial_bar_template_1.png
+
+   Your scene tree should look like this. We're ready to throw in some
+   textures
+
+Our scene is still empty. It's time to throw in some textures. To load
+the textures, head to the FileSystem dock to the left of the viewport.
+Browse down to the res://assets/GUI folder.
+
+.. figure:: ./img/ui_gui_step_tutorial_textures_in_FileSystem_tab.png
+
+   You should see a list of textures that we'll use to skin our
+   interface.
+
+Select the ``Background`` in the Scene dock. In the Inspector, you
+should see a ``Texture`` property. In the FileSystem tab, click and drag
+``label_HP_bg.png`` onto the ``Texture`` slot. It stays squashed. The
+parent MarginContainer will force its size down to 0 until we force
+elements inside the container to have a minimum size. Select the
+``Background`` node. In the Inspector, scroll down to the Rect section.
+Set ``Min Size`` to (100, 40). You should see the ``Background`` resize
+along with its parent containers.
+
+Next, select the ``Title`` and drag and drop ``label_HP.png`` into its
+``Texture`` slot. Select the ``Number`` node, click the field next to
+the ``Text`` property and type ``10``. This way, we can see both nodes
+in the viewport. They should stack up in the top-left corner of their
+parent ``MarginContainer``.
+
+.. figure:: ./img/ui_gui_step_tutorial_bar_label_stacked.png
+
+   If you select both nodes, you should see something like this
+
+As they have a container as their direct parent, we cannot move them
+freely: the ``Count`` node will always reset their anchors, their size
+and position. Try to move and resize the nodes in the viewport. Then,
+select any of the three textures and press Ctrl Up or Ctrl Down to
+reorder them in the Scene dock. They'll snap back to their previous size
+and position.
+
+Parent containers control the size, the scale, the margins, and the
+anchors of their direct children. To modify the nodes, you must nest
+them inside a regular Control or another UI element. We'll use the
+``Background`` as a parent for the ``Title`` and ``Number``. Select both
+the ``Title`` and ``Number``, and drag and drop them onto
+``Background``.
+
+.. figure:: ./img/ui_gui_step_tutorial_bar_nesting_inside_background.png
+
+   By using the Background node as the two textures' parent, we take
+   control away from the Count MarginContainer
+
+Select the ``Title`` and in the Inspector, change its ``Stretch Mode``
+property to ``Keep Centered``. Resize it in the viewport with the
+``Select Mode`` tool so it only takes the left half of the background.
+Next, select the ``Number`` node. In the viewport, click the ``Anchor``
+menu and click ``Full Rect and Fit Parent``. The node will resize to fit
+the ``Background``. Head to the Inspector and change its ``Align``
+property to ``Right``, and the ``VAlign`` property to ``Center``. The
+text should snap to the center of the ``Background``'s right edge.
+Resize the node horizontally so it takes the right half of the
+``Background`` and there's a bit of padding with the right edge.
+
+.. figure:: ./img/ui_gui_step_tutorial_bar_placed_title_and_label.png
+
+   Here's how the nodes' bounding boxes should look in the viewport.
+   Keep it rough, you don't need to place them too precisely for now.
+
+Replace the Label's font
+~~~~~~~~~~~~~~~~~~~~~~~~
+
+The label's font is too small. We need to replace it. Select the
+``Number`` node and in the Inspector, scroll down to the ``Control``
+class, and find the ``Custom Font`` category. Click the field next to
+the ``Font`` property and click on ``New Dynamic Font``. Click on the
+field again and select Edit.
+
+You will enter the ``Dynamic Font`` resource. Unfold the ``Font``
+category and click the field next to ``Font Data``. Click the ``Load``
+button. In the file browser, navigate down to the assets/font folder and
+double click ``Comfortaa-Bold.ttf`` to open it. You should see the font
+update in the viewport. Unfold the settings category to change the font
+size. Set the ``Size`` property to a higher value, like ``24`` or
+``28``.
+
+We now need the text's baseline, the number's lower edge, to align with
+the HP texture on the left. To do so, still in the ``DynamicFont``
+resource, you can tweak the ``Bottom`` property under the
+``Extra Spacing`` category. It adds some bottom padding to the text.
+Click the ``Number`` node in the Scene tab to go back to the node's
+properties and change the ``VAlign`` to ``Bottom``. To adjust the text's
+baseline, click on the font field under the ``Custom Font`` category
+again and tweak the ``Bottom`` property until the text aligns with the
+``Title`` node. I used a value of ``2`` pixels.
+
+.. figure:: ./img/ui_gui_step_tutorial_number_baseline.png
+
+   With a Bottom value of 2 pixels, the Number aligns with the Title
+
+With this, we just finished the hardest part of the GUI.
+Congratulations! Let's move on to the simpler nodes.
+
+Add the progress bar
+~~~~~~~~~~~~~~~~~~~~
+
+We need one last element to complete our life bar: the gauge itself.
+Godot ships with a ``TextureProgress`` node that has everything we need.
+
+Select the Bar node and add a ``TextureProgress`` inside of it. Name it
+``Gauge``. In the inspector unfold the ``Textures`` section. Head to the
+FileSystem dock and drag and drop the ``lifebar_bg.png`` texture onto
+the ``Under`` slot. Do the same with the ``lifebar_fill.png`` image and
+drop it onto the ``Progress`` slot. Under the ``Range`` class in the
+inspector, change the ``Value`` property to ``50`` to see the gauge fill
+up.
+
+With only five ``Control`` nodes, our first bar is ready to use.
+
+.. figure:: ./img/ui_gui_step_tutorial_bar_final.png
+
+   That's it, our life bar is ready. This last part was quick, wasn't
+   it? That's thanks to our robust container setup.
+
+Design the bomb and rupee counters
+----------------------------------
+
+The bomb and rupee counters are like the bar's ``Count`` node. So we'll
+duplicate it and use it as a template.
+
+Under the ``Bar`` node, select ``Count`` and press Ctrl D to duplicate
+it. Drag and drop the new node under the ``Counters`` ``HBoxContainer``
+at the bottom of the scene tree. You should see it resize automatically.
+Don't worry about this for now, we'll fix the size soon.
+
+Rename the ``Count2`` node to ``Counter``. Unlike the bars, we want the
+number to be on the left, and an icon to sit on the right. The setup is
+the same: we need background, a ``NinePatchFrame``, the title, and the
+number nodes. The ``Title`` node is a ``TextureRect``, so it's what we
+need to display the icon. In the scene tree, select the ``Title`` node,
+and rename it to ``Icon``.
+
+.. figure:: ./img/ui_gui_step_tutorial_counter_design_1.png
+
+   Here's how your node tree should look so far
+
+With the ``Icon`` node selected, in the inspector, scroll to the top to
+see the ``Texture`` slot. Head to the FileSystem dock on the left and
+select the ``bombs_icon.png``. Drag and drop it onto the ``Texture``
+slot. In the Scene Tab select both the ``Icon`` and the ``Number``
+nodes. Click the anchor menu in the toolbar at the top of the viewport
+and select ``Full Rect and Fit Parent``. Both nodes will update to fit
+the size of the ``Background``.
+
+.. figure:: ./img/ui_gui_step_tutorial_counter_design_2.png
+
+   The nodes anchor to the entire Background, but their position is off
+
+Let's change the ``Number``'s align properties to move it to the left
+and center of the ``Background``. Select the ``Number`` node, change its
+``Align`` property to left and the ``VAlign`` property to centre. Then
+resize its left edge a little bit to add some padding between the left
+edge of the ``Background`` and the text.
+
+.. figure:: ./img/ui_gui_step_tutorial_counter_design_3.png
+
+   The Number node aligned to the left and centre
+
+To overlap the Icon and the background, we need a few tweaks. First, our
+background is a bit too tall. It's because it's inside a margin
+container that is controlled by the top-most GUI node. Select the GUI
+node at the top of the scene tree and downsize it vertically so that
+it's as thin as possible. You'll see the gauge prevents you from making
+it too small. A container cannot be smaller than the minimal size of its
+children. The container's margins also weigh in.
+
+Select the Icon, click the Anchor menu, and select
+``Full Rect and Fit Parent`` to re-center it. We need it to anchor to
+the ``Background``'s right edge. Open the Anchor menu again and select
+``Right Wide``. Move the icon up so it is centered vertically with the
+``Background``.
+
+.. figure:: ./img/ui_gui_step_tutorial_counter_design_4.png
+
+   The bomb icon anchors to the Background's right edge. Resize the
+   Counter container to see the Icon node stick to its right side
+
+Because we duplicated the ``Counter`` from the bar's ``Count``, the
+``Number`` node's font is off. Select the ``Number`` node again, head to
+the ``Font`` property, and click it to access the ``DynamicFont``
+resource. In the ``Extra Spacing`` section, change the ``Bottom`` value
+to ``0`` to reset the font's baseline. Our counter now works as
+expected.
+
+While we are at it, let's make it so the ``Counters`` snap to the right
+edge of the viewport. To achieve this we will set the ``Bars`` container
+to expand and take all the horizontal space. Select the ``Bars`` node
+and scroll down to the ``Size Flags`` category. In the ``Horizontal``
+category, check the ``Expand`` value. The ``Bars`` node should resize
+and push the counter to the rightmost of the screen.
+
+.. figure:: ./img/ui_gui_step_tutorial_counter_design_5.png
+
+   An expanding container eats all the space it can from its parent,
+   pushing everything else along the way
+
+Turn the bar and counter into reusable UI components
+----------------------------------------------------
+
+We have one bar and one counter widget. But we need two of each. We may
+need to change the bars' design or their functionality later on. It'd be
+great if we could have a single scene to store a UI element's template,
+and child scenes to work on variations. Godot lets us do this with
+Inherited Scenes.
+
+Let's save both the ``Counter`` and the ``Bar`` branches as separate
+scenes that we'll reduce to create the ``LifeBar``, the ``EnergyBar``,
+the ``BombCounter``, and the ``RupeeCounter``. Select the ``Bar``
+HBoxContainer. Right click on it and click on ``Save Branch as Scene``.
+Save the scene as ``Bar.tscn``. You should see the node branch turn it
+to a single ``Bar`` node.
+
+.. tip:: 
+
+    A scene is a tree of nodes. The topmost node is the tree's
+    **root**, and the children at the bottom of the hierarchy are
+    **leaves**. Any node other than the root along with one more children is
+    a **branch**. We can encapsulate node branches into separate scenes, or
+    load and merge them from other scenes into the active one. Right click
+    on any node in the Scene dock and select ``Save Branch as Scene`` or
+    ``Merge from Scene``.
+
+Then, select the ``Counter`` node and do the same. Right click,
+``Save Branch as Scene``, and save it as ``Counter.tscn``. A new edit
+scene icon appears to the right of the nodes in the scene tree. Click on
+the one next to ``Bar`` to open the corresponding scene. Resize the
+``Bar`` node so that its bounding box fits its content. The way we named
+and place the Control nodes, we're ready to inherit this template and
+create the life bar. It's the same for the ``Counter``.
+
+.. figure:: ./img/ui_gui_step_tutorial_bar_template_scene.png
+
+   With no extra changes, our Bar is ready to use
+
+Use Scene Inheritance to create the remaining elements
+------------------------------------------------------
+
+We need two bars that work the same way: they should feature a label on
+the left, with some value, and a horizontal gauge on the right. The only
+difference is that one has the HP label and is green, while the other is
+called EP and is yellow. Godot gives us a powerful tool to create a
+common base to reuse for all bars in the game: **inherited scenes**.
+
+.. figure:: img/gui_step_tutorial_gui_scene_hierarchy.png
+
+   Inherited scenes help us keep the GUI scene clean. In the end, we
+   will only have containers and one node for each UI component.
+
+On an inherited scene, you can change any property of every node in the
+inspector, aside from its name. If you modify and save the parent scene,
+all the inherited scenes update to reflect the changes. If you change a
+value in the inherited scene, it will always overrides the parent's
+property. It's useful UIs as they often require variations of the same
+elements. In general, in UI design, buttons, panels etc. share a common
+base style and interactions. We don't want to copy it over to all
+variations manually.
+
+A reload icon will appear next to the properties you override. Click it
+to reset the value to the parent scene's default.
+
+.. note:: 
+
+    Think of scene inheritance like the node tree, or the
+    ``extends`` keyword in GDScript. An inherited scene does everything like
+    its parent, but you can override properties, resources and add extra
+    nodes and scripts to extend its functionality.
+
+Inherit the Bar Scene to build the LifeBar
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Go to ``Scene -> New Inherited Scene`` to create a new type of ``Bar``.
+Select the Bar scene and open it. You should see a new [unsaved] tab,
+that's like your ``Bar``, but with all nodes except the root in grey.
+Press :kbd:``Ctrl S`` to save the new inherited scene and name it
+``LifeBar``.
+
+.. figure:: img/ui_gui_step_tutorial_inherited_scene_parent.png
+
+   You can't rename grey nodes. This tells you they have a parent scene
+
+First, rename the root or top level node to ``LifeBar``. We always want
+the root to describe exactly what this UI component is. The name
+differentiates this bar from the ``EnergyBar`` we'll create next. The
+other nodes inside the scene should describe the component's structure
+with broad terms, so it works with all inherited scenes. Like our
+``TextureProgress`` and ``Number`` nodes.
+
+.. note:: 
+
+    If you've ever done web design, it's the same spirit as
+    working with CSS: you create a base class, and add variations with
+    modifier classes. From a base button class, you'll have button-green and
+    button-red variations for the user to accept and refuse prompts. The new
+    class contains the name of the parent element and an extra keyword to
+    explain how it modifies it. When we create an inherited scene and change
+    the name of the top level node, we're doing the same thing
+
+Design the EnergyBar
+~~~~~~~~~~~~~~~~~~~~
+
+We already setup the ``LifeBar``'s design with the main ``Bar`` scene.
+Now we need the ``EnergyBar``.
+
+Let's create a new inherited scene, and once again select the
+``Bar.tscn`` scene and open it. Save the new scene as
+``EnergyBar.tscn``. Double-click on the ``Bar`` root node and rename it
+to ``EnergyBar``. We need to replace the HP texture with EP one, and to
+change the textures on the gauge.
+
+Head to the FileSystem dock on the left, select the ``Title`` node in
+the Scene tree and drag and drop the ``label_EP.PNG`` file onto the
+texture slot. Select the ``Number`` node and change the ``Text``
+property to a different value like ``14``.
+
+You'll notice the EP texture is smaller than the HP one. We should
+update the ``Number``'s font size to better fit it. A font is a
+resource. All the nodes in the entire project that use this resource
+will be affected by any property we change. You can try to change the
+size to a huge value like ``40`` and switch back to the ``LifeBar`` or
+the ``Bar`` scenes. You will see the text increased in size.
+
+.. figure:: ./img/ui_gui_step_tutorial_design_EnergyBar_1.png
+
+   If we change the font resource, all the nodes that use it are
+   affected
+
+To change the font size on this node only, we must create a copy of the
+font resource. Select the ``Number`` node again and click on the wrench
+and screwdriver icon on the top right of the inspector. In the drop-down
+menu, select the ``Make Sub-Resources Unique`` option. Godot will find
+all the resources this node uses and create unique copies for us.
+
+.. figure:: ./img/ui_gui_step_tutorial_design_EnergyBar_2.png
+
+   Use this option to create unique copies of the resources for one node
+
+.. tip:: 
+
+    When you duplicate a node from the Scene tree, with
+    :kbd:``Ctrl D``, it shares its resources with the original node. You
+    need to use ``Make Sub-Resources Unique`` before you can tweak the
+    resources without affecting the source node.
+
+Scroll down to the ``Custom Font`` section and open ``Font``. Lower the
+``Size`` to a smaller value like ``20`` or ``22``. You may also need to
+adjust the ``Bottom`` spacing value to align the text's baseline with
+the EP label on the left.
+
+.. figure:: ./img/ui_gui_step_tutorial_design_EnergyBar_3.png
+
+   The EP Count widget, with a smaller font than its HP counterpart
+
+Now, select the ``TextureProgress`` node. Drag the ``energy_bar_bg.png``
+file onto the ``Under`` slot and do the same for ``energy_bar_fill.png``
+and drop it onto the ``Progress`` texture slot.
+
+you can resize the node vertically so that its bounding rectangle fits
+the gauge. Do the same with the ``Count`` node until its size aligns
+with that of the bar. Because the minimal size of ``TextureProgress`` is
+set based on its textures, you won't be able to downsize the ``Count``
+node below that. That is also the size the ``Bar`` container will have.
+You may downscale this one as well.
+
+last but not least, the ``Count`` container has a minimum size that
+makes it a bit large. Select it and in the ``Rect`` section, change the
+``Min Size`` property down to ``80`` pixels. It should resize
+automatically and the ``Title`` and ``Number`` nodes should reposition
+as well.
+
+.. figure:: ./img/ui_gui_step_tutorial_design_EnergyBar_4.png
+
+   The Count looks better now it's a bit smaller
+
+.. tip:: 
+
+    The Count node's size affects the position of the
+    TextureProgress. As we'll align our bars vertically in a moment, we're
+    better off using the Counter's left margin to resize our EP label. This
+    way both the EnergyBar's Count and the LifeBar's Count nodes are one
+    hundred pixels wide, so both gauges will align perfectly.
+
+Prepare the bomb and rupee counters
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Let us now take care of the counters. Go to
+``Scene -> New Inherited Scene`` and select the ``Counter.tscn`` as a
+base. Save the new scene as ``BombCounter.tscn``. Rename the root node
+as ``BombCounter`` too. That's all for this scene.
+
+.. figure:: ./img/ui_gui_step_tutorial_design_counters_1.png
+
+   The bomb counter is the same as the original Counter scene
+
+Go to ``Scene -> New Inherited Scene`` again and select ``Counter.tscn``
+once more. Save the scene as ``RupeeCounter.tscn``. Rename the root node
+``RupeeCounter``. For this one, we mainly need to replace the bomb icon
+with the rupee icon. In the FileSystem tab, drag the ``rupees_icon.PNG``
+onto the ``Icon`` node's ``Texture`` slot. ``Icon`` already anchors to
+the right edge of the ``Background`` node so we can change its position
+and it will scale and reposition with the ``RupeeCounter`` container.
+Shift the rupee icon a little bit to the right and down. Use the Arrow
+Keys on the keyboard to nudge its position. Save, and we're done with
+all the UI elements.
+
+.. figure:: ./img/ui_gui_step_tutorial_design_counters_2.png
+
+   The rupee counter should look about like this
+
+Add the UI components to the final GUI
+--------------------------------------
+
+Time to add all the UI elements to the main GUI scene. Open the
+``GUI.tscn`` scene again, and delete the ``Bar`` and ``Counter`` nodes.
+In the FileSystem dock, find the ``LifeBar.tscn`` and drag and drop it
+onto the ``Bars`` container in the scene tree. Do the same for the
+``EnergyBar``. You should see them align vertically.
+
+.. figure:: ./img/ui_gui_step_tutorial_assemble_final_gui_1.png
+
+   The LifeBar and the EnergyBar align automatically
+
+Now, drag and drop the BombCounter and RupeeCounter scenes onto the
+Counters node. They'll resize size automatically.
+
+.. figure:: ./img/ui_gui_step_tutorial_assemble_final_gui_2.png
+
+   The nodes resize to take all the available vertical space
+
+To let the ``RupeeCounter`` and ``BombCounter`` use the size we defined
+in ``Counter.tscn``, we need to change the ``Size Flags`` on the
+``Counters`` container. Select the ``Counters`` node and unfold the
+``Size Flags`` section in the Inspector. Uncheck the ``Fill`` tag for
+the ``Vertical`` property, and check ``Shrink Center`` so the container
+centers inside the ``HBoxContainer``.
+
+.. figure:: ./img/ui_gui_step_tutorial_assemble_final_gui_3.png
+
+   Now both counters have a decent size
+
+.. tip:: 
+
+    Change the ``Min Size`` property of the ``Counters`` container
+    to control the height of the counters' background.
+
+We have one small issue left with the EP label on the EnergyBar: the 2
+bars should align vertically. Click the icon next to the ``EnergyBar``
+node to open its scene. Select the ``Count`` node and scroll down to the
+``Custom Constant`` section. As a add a ``Margin Left`` of ``20``. In
+the ``Rect`` section set the node's ``Min Size`` back to 100, the same
+value as on the LifeBar. The ``Count`` should now have some margin on
+the left. If you save and go back to the GUI scene, it will be aligned
+vertically with the Life\` \`Bar.
+
+.. figure:: ./img/ui_gui_step_tutorial_assemble_final_gui_4.png
+
+   The 2 bars align perfectly
+
+.. note:: 
+
+    We could have setup the ``EnergyBar`` this way a few moments
+    ago. But this shows you that you can go back to any scene anytime, tweak
+    it, and see the changes propagate through the project!
+
+Place the GUI onto the game's mockup
+------------------------------------
+
+To wrap up the tutorial we're going to insert the GUI onto the game's
+mockup scene.
+
+Head to the FileSystem dock and open ``LevelMockup.tscn``.
+
+Drag-and-drop the ``GUI.tscn`` scene right below the ``bg`` node and
+above the ``Characters``. The GUI will scale to fit the entire viewport.
+Head to the anchor menu and select the ``Top Wide`` option so it anchors
+to the top edge of the game window. Then resize the GUI to make it as
+small as possible vertically. Now you can see how the interface looks in
+the context of the game.
+
+Congratulations for getting to the end of this long tutorial. You can
+find final project `here <#>`__.
+
+.. figure:: ./img/ui_gui_design_final_result.png
+
+   The final result
+
+.. note:: 
+
+    **A final note about Responsive Design**. If you resize the
+    GUI, you'll see the nodes move, but the textures and text won't scale.
+    The GUI also has a minimum size, based on the textures inside of it. In
+    games, we don’t need the interface to be as flexible as that of a
+    website. You almost never want to support both landscape and portrait
+    screen orientations. It’s one of the other. In landscape orientation,
+    the most common ratios range from 4:3 to 16:10. They are close to one
+    another. That's why it’s enough for the GUI elements to only move
+    horizontally when we change the window size.

learning/step_by_step/ui_introduction_to_the_ui_system.rst

@@ -0,0 +1,374 @@
+Design interfaces with the Control nodes
+========================================
+
+Computer displays, mobile phones, and TV screen come in all shapes and
+sizes. To ship a game, you'll need to support different screen ratios
+and resolutions. It can be hard to build responsive interfaces that
+adapt to all platforms. Thankfully, Godot comes with robust tools to
+design and manage responsive User Interface. To design your UI, you'll
+use the Control nodes. These are the nodes with green icons in the
+editor. There are dozens of them, to create anything from life bars to
+complex applications. Godot's entire editor and plugins use these nodes.
+
+.. figure:: img/godot_editor_ui.png
+   :alt: Godot's editor is made with the engine's UI framework
+
+   Godot's editor is made with the engine's UI framework
+
+This guide will get you started with UI design. You will learn:
+
+-  The five most useful control nodes to build your games’ interface
+-  How to work with the anchor of UI elements
+-  How to efficiently place and arrange your user interface using
+   containers
+-  The five most common containers
+
+To learn how to control the interface and connect it to other scripts,
+read `Build your first game UI in Godot <#>`__.
+
+Only use Control nodes when you design your interfaces. They have unique
+properties that allow them to work with one another. Other nodes like
+Node2D, Sprite, etc. will not work. You can still use some nodes that
+work with others like the AnimationPlayer, Tween or the StreamPlayer.
+Control nodes are CanvasItems like Node2D, so you can apply shaders to
+them.
+
+All control nodes share the same main properties: the anchor, the
+bounding rectangle, focus and focus neighbour, two properties related to
+mouse and keyboard input, the size flags, the margin, and the optional
+UI theme. Once you understand these, any Control nodes you use will add
+just a handful of additional properties. Once you understand the basics
+of the UI control nodes, it will take you far less time to learn all the
+special nodes.
+
+    CB: *That list of properties is very long. Maybe better as bullets?*
+
+    CB: *I would remove this last sentence. It sounds too close to "it's
+    easy".*
+
+The 5 most common UI elements
+-----------------------------
+
+Godot ships with dozens of Control nodes. A lot of them are here to help
+you build editor plugins and applications. To learn more about them,
+check the guide about `Advanced UI nodes and Themes <img/#>`__.
+
+For most games, you'll only need five types of UI elements, and a few
+Containers. These five Control nodes are:
+
+1. Label: for displaying text
+2. TextureRect: used mostly for backgrounds, or everything that should
+   be a static image
+3. TextureProgress: for lifebars, loading bars, horizontal, vertical or
+   radial
+4. NinePatchRect: for scalable panels
+5. TextureButton: to create buttons
+
+    CB: *reordered to match image*
+
+.. figure:: img/5_most_common_nodes.png
+   :alt: The 5 most common Control nodes for UI design
+
+   The 5 most common Control nodes for UI design
+
+TextureRect
+~~~~~~~~~~~
+
+    CB: *Should this be a subheading? The transitions between the five
+    are hard to see.*
+
+    **TextureRect** displays a texture or image. The main difference
+    from a Sprite node is that it can position itself and scale in
+    different ways. Set the Stretch Mode property to change its
+    behaviour:
+
+    CB: *Saying it displays a "sprite" may confuse. Didn't say
+    difference from what? It being a Control and positions/scales
+    differently is the same thing.*
+
+-  ``Tile`` makes the texture repeat, but it won't scale
+-  The default, ``Scale and Expand (compat)``, lets you scale the
+   texture up, but it forces a minimal size
+-  ``Keep`` and ``Keep Centered`` force the texture to remain at its
+   original size, in the top left corner or the center of the frame
+   respectively
+
+    CB: *center vs centre spelling needs to be consistent. I'm using
+    "center" because Godot does.*
+
+As with Sprite nodes, you can modulate the TextureRect's colour. Click
+the ``Modulate`` property and use the color picker.
+
+.. figure:: img/5_common_nodes_TextureFrame.png
+   :alt: TextureRect modulated with a red color
+
+   TextureRect modulated with a red color
+
+TextureButton
+~~~~~~~~~~~~~
+
+**TextureButton** is like TextureRect, except it has 5 texture slots:
+one for each of the button's states. Most of the time, you'll use the
+Normal, Pressed, and Hover textures. Focused is useful if your interface
+listens to the keyboard's input. The sixth image slot, the Click Mask,
+lets you define the clickable area using a 2-bit, pure black and white
+image.
+
+In the Base Button section, you'll find a few checkboxes that change how
+the button behaves. When Toggle Mode is on, the button will toggle
+between active and normal states when you press it. Disabled makes it
+disabled by default, in which case it will use the Disabled texture.
+TextureButton shares a few properties with the texture frame: it has a
+modulate property, to change its color, and Resize and Stretch modes, to
+change its scale behavior.
+
+    CB: *Should the property names be ``code`` tagged?*
+
+.. figure:: img/5_common_nodes_TextureButton.png
+   :alt: TextureButton and its 5 texture slots
+
+   TextureButton and its 5 texture slots
+
+TextureProgress
+~~~~~~~~~~~~~~~
+
+**TextureProgress** layers up to 3 sprites to create a progress bar. The
+Under and Over textures sandwich the Progress one, which displays the
+bar's value.
+
+The ``Mode`` property controls the direction in which the bar grows:
+horizontally, vertically, or radially. If you set it to radial, the
+Initial Angle and Fill Degrees properties let you limit the range of the
+gauge.
+
+To animate the bar, you'll want to look at the Range section. Set the
+Min and Max properties to define the range of the gauge. For instance,
+to represent a character's life, you'll want to set Min to 0, and Max to
+the character's maximum life. Change the Value property to update the
+bar. If you leave the Min and Max values to the default of 1 and 100,
+and set the Value property to 40, 40% of the Progress texture will show
+up, and 60% of it will stay hidden.
+
+.. figure:: img/5_common_nodes_TextureProgress.png
+   :alt: TextureProgress bar, two thirds filled
+
+   TextureProgress bar, two thirds filled
+
+Label
+~~~~~
+
+**Label** prints text to the screen. You'll find all its properties in
+the Label section, in the Inspector. Write the text in the ``Text``
+property, and check Autowrap if you want it to respect the textbox's
+size. If Autowrap is off, you won't be able to scale the node. You can
+align the text horizontally and vertically with Align and Valign
+respectively.
+
+.. figure:: img/5_common_nodes_Label.png
+   :alt: Picture of a Label
+
+   Picture of a Label
+
+NinePatchRect
+~~~~~~~~~~~~~
+
+**NinePatchRect** takes a texture split in 3 rows and 3 columns. The
+center and the sides tile when you scale the texture, but it never
+scales the corners. It is very useful to build panels, dialogue boxes
+and scalable backgrounds for your UI.
+
+.. figure:: img/5_common_nodes_NinePatchRect.png
+   :alt: NinePatchRect scaled with the min\_size property
+
+   NinePatchRect scaled with the min\_size property
+
+Place UI elements precisely with anchors
+----------------------------------------
+
+Control nodes have a position and size, but they also have anchors and
+margins. Anchors define the origin, or the reference point, for the
+Left, Top, Right and Bottom edges of the node. Change any of the 4
+anchors, and the margins will update automatically.
+
+.. figure:: img/anchor_property.png
+   :alt: The anchor property
+
+   The anchor property
+
+How to change the anchor
+~~~~~~~~~~~~~~~~~~~~~~~~
+
+Like any properties, you can edit the 4 anchor points in the Inspector,
+but this is not the most convenient way. When you select a control node,
+the anchor menu appears above the viewport, in the toolbar. It gives you
+a list of icons to set all 4 anchors with a single click, instead of
+using the inspector’s 4 properties. The anchor menu will only show up
+when you select a control node.
+
+.. figure:: img/anchor_menu.png
+   :alt: The anchor menu in the viewport
+
+   The anchor menu in the viewport
+
+Anchors are relative to the parent container
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Each anchor is a value between 0 and 1. For the left and top anchors, a
+value of 0 means that without any margin, the node's edges will align
+with the left and top edges of its parent. For the right and bottom
+edges, a value of 1 means they'll align with the parent container's
+right and bottom edges. On the other hand, margins represent a distance
+to the anchor position in pixels, while anchors are relative to the
+parent container's size.
+
+.. figure:: ./img/ui_anchor_and_margins.png
+   :alt: Margins are relative to the anchor position, which is relative
+   to the anchors. In practice, you'll often let the container update
+   margins for you
+
+   Margins are relative to the anchor position, which is relative to the
+   anchors. In practice, you'll often let the container update margins
+   for you
+
+Margins change with the anchor
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Margins update automatically when you move or resize a control node.
+They represent the distance from the control node's edges to its anchor,
+which is relative to the parent control node or container. That's why
+your control nodes should always be inside a container, as we'll see in
+a moment. If there's no parent, the margins will be relative to the
+node's own bounding Rectangle, set in the Rect section, in the
+inspector.
+
+.. figure:: img/control_node_margin.png
+   :alt: Margins on a CenterContainer set to the "Full Rect" anchor
+
+   Margins on a CenterContainer set to the "Full Rect" anchor
+
+Try to change the anchors or nest your Control nodes inside Containers:
+the margins will update. You'll rarely need to edit the margins
+manually. Always try to find a container to help you first; Godot comes
+with nodes to solve all the common cases for you. Need to add space
+between a lifebar and the border of the screen? Use the MarginContainer.
+Want to build a vertical menu? Use the VBoxContainer. More on these
+below.
+
+Use size tags to change how UI elements fill the available space
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Every control node has Size Flags. They tell containers how the UI
+elements should scale. If you add the "Fill" flag to the Horizontal or
+Vertical property, the node's bounding box will take all the space it
+can, but it'll respect its siblings and retain its size. If there are 3
+TextureFrame nodes in an HBoxContainer, with the "Fill" flags on both
+axes, they'll each take up to a third of the available space, but no
+more. The container will take over the node and resize it automatically.
+
+.. figure:: img/TextureFrame_in_box_container_fill.png
+   :alt: 3 UI elements in an HBoxContainer, they align horizontally
+
+   3 UI elements in an HBoxContainer, they align horizontally
+
+The "Expand" flag lets the UI element take all the space it can, and
+push against its siblings. Its bounding rectangle will grow against the
+edges of its parent, or until it's blocked by another UI node.
+
+.. figure:: img/TextureFrame_in_box_container_expand.png
+   :alt: The same example as bove, but the left node has the "Expand"
+   size flag
+
+   The same example as bove, but the left node has the "Expand" size
+   flag
+
+You'll need some practice to understand the size tags, as their effect
+can change quite a bit depending on how you set up your interface.
+
+Arrange control nodes automatically with containers
+---------------------------------------------------
+
+Containers automatically arrange all children Control nodes including
+other containers in rows, columns, and more. Use them to add padding
+around your interface or center nodes in their bounding rectangles. All
+built-in containers update in the editor so you can see the effect
+instantly.
+
+Containers have a few special properties to control how they arrange UI
+elements. To change them, navigate down to the Custom Constants section
+in the Inspector.
+
+The 5 most useful containers
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+If you build tools, you might need all of the containers. But for most
+games, a handful will be enough:
+
+-  MarginContainer, to add margins around part of the UI
+-  CenterContainer, to center its children in its bounding box
+-  VboxContainer and HboxContainer, to arrange UI elements in rows or
+   columns
+-  GridContainer, to arrange Controls nodes in a grid-like pattern
+
+CenterContainer centers all its children inside of its bounding
+rectangle. It's one you typically use for title screens, if you want the
+options to stay in the center of the viewport. As it centers everything,
+you'll often want a single container nested inside it. If you use
+textures and buttons instead, they'll stack up.
+
+.. figure:: img/5_containers_CenterContainer.png
+   :alt: CenterContainer in action. The life bar centers inside its
+   parent container.
+
+   CenterContainer in action. The life bar centers inside its parent
+   container.
+
+The MarginContainer adds a margin on any side of the child nodes. Add a
+MarginContainer that encompasses the entire viewport to add a separation
+between the edge of the window and the UI. You can set a margin on the
+top, left, right, or bottom side of the container. No need to tick the
+checkbox: click the corresponding value box and type any number. It will
+activate automatically.
+
+.. figure:: img/5_containers_MarginContainer.png
+   :alt: The MarginContainer adds a 40px margin around the Game User
+   Interface
+
+   The MarginContainer adds a 40px margin around the Game User Interface
+
+There are two BoxContainers: VBoxContainer and HBoxContainer. You cannot
+add the BoxContainer node itself, as it is a helper class, but you can
+use vertical and horizontal box containers. They arrange nodes either in
+rows or columns. Use them to line up items in a shop, or to build
+complex grids with rows and columns of different sizes, as you can nest
+them to your heart's content.
+
+.. figure:: img/5_containers_BoxContainer.png
+   :alt: The HBoxContainer horizontally aligns UI elements
+
+   The HBoxContainer horizontally aligns UI elements
+
+VBoxContainer automatically arranges its children into a column. It puts
+them one after the other. If you use the separation parameter, it will
+leave a gap between its children. HBoxContainer arranges UI elements in
+a row. It's similar to the VBoxContainer, with an extra ``add_spacer``
+method to add a spacer control node before its first child or after its
+last child, from a script.
+
+The GridContainer lets you arrange UI elements in a grid-like pattern.
+You can only control the number of columns it has, and it will set the
+number of rows by itself, based on its children's count. If you have
+nine children and three columns, you will have 9÷3 = 3 rows. Add three
+more children and you'll have four rows. In other words, it will create
+new rows as you add more textures and buttons. Like the box containers,
+it has two properties to set the vertical and horizontal separation
+between the rows and columns respectively.
+
+.. figure:: img/5_containers_GridContainer.png
+   :alt: A GridContainer with 2 columns. It sizes each column
+   automatically.
+
+   A GridContainer with 2 columns. It sizes each column automatically.
+
+Godot's UI system is complex, and has a lot more to offer. To learn how
+to design more advanced interface, read `Design advanced UI with other
+Control nodes <img/#>`__.

learning/step_by_step/ui_main_menu.rst

@@ -0,0 +1,305 @@
+In this tutorial, you will build two responsive UI (user interface)
+scenes step-by-step using the engine's UI system:
+
+1. A main menu
+2. A game UI with a health bar, energy bar, bomb and money counters
+
+You will learn how to design game UI efficiently, and how to use Godot's
+Control nodes. This page focuses on the visual part: everything you do
+from the editor. To learn how to code a life bar, 
+check out the corresponding tutorial.
+
+.. figure:: img/ui_main_menu_design_final_result.png
+   :alt: The GUI you're going to create
+
+   The GUI you're going to create
+
+Download the project files: :download:`ui_main_menu_design.zip <files/ui_main_menu_design.zip>` and extract the archive. Import the `start/` project in Godot to follow this tutorial. The `end/` folder contains the final result.
+
+.. note: 
+
+    Read the ref:\ ``ui_design_guide`` first to learn how Godot’s UI system works
+
+How to design your game UI
+--------------------------
+
+To design a good UI, you want to come up with a rough mockup first: a
+plain drawing version that focuses on the placement of your UI
+components, their size, and user interaction. Pen and paper is all you
+need. You shouldn't use fancy and final graphics at this stage. Then,
+you only need simple placeholder sprites and you're good to jump into
+Godot. You want to make sure the players can find their way around the
+interface using those placeholders.
+
+.. figure:: img/ui_design_rough.png
+   :alt: The UI's rough plan or mockup
+
+   The UI's rough plan or mockup
+
+Placeholder doesn't have to mean ugly, but you should keep the graphics
+simple and clean. Avoid special effects, animation, and detailed
+illustration before you had players playtest your UI. Otherwise:
+
+1. The graphics might skew the players' perception of the experience and
+   you'll miss out on valuable feedback
+2. If the User Experience doesn't work, you'll have to redo some sprites
+
+.. tip::
+
+    Always try to make the interface work with simple text and
+    boxes first. It's easy to replace the textures later. Professional UX
+    designers often work with plain outlines and boxes in greyscale. When
+    you take colors and fancy visuals away, it's a lot easier to size and
+    place UI elements properly. It helps you refine the design foundation
+    you'll build upon.
+
+There are two ways to design your UI in Godot. You can:
+
+1. Build it all in a single scene, and eventually save some branches as
+   reusable scenes
+2. Build template scenes for reusable components and create specific
+   components that inherit from your base scenes
+
+We will use the first approach, because the first version of your UI may
+not work as well as you’d like. You’re likely to throw parts away and
+redesign components as you go. When you're sure everything works, it's
+easy to make some parts reusable, as you'll see below.
+
+Please download :download:``ui_design.zip </files/ui_design.zip>``. It
+contains all the files you'll need to follow along. You'll find all the
+sprites in the ``assets/main_menu`` folder.
+
+.. figure:: img/ui_main_menu_placeholder_assets.png
+   :alt: The files you'll find in Godot. The graphics look cleaner than
+   on the rough design, but they're still placeholders
+
+   The files you'll find in Godot. The graphics look cleaner than on the
+   rough design, but they're still placeholders
+
+Design the main menu
+--------------------
+
+Before we jump into the editor, we want to plan how we'll nest
+containers based on our mockup image.
+
+Break down the UI mockup
+~~~~~~~~~~~~~~~~~~~~~~~~
+
+Here are my three rules of thumb to find the right containers:
+
+1. Break down the UI into nested boxes, from the largest that contains
+   everything, to the smallest ones, that encompass one widget, like a
+   bar with its label, a panel or a button
+2. If there's some padding around an area, use a ``MarginContainer``
+3. If the elements are arranged in rows or columns, use an
+   ``HBoxContainer`` or ``VBoxContainer``
+
+These rules are enough to get us started, and work well for simple
+interfaces.
+
+For the main menu, the largest box is the entire game window. There's
+padding between the edges of the window and the first components: this
+should be a ``MarginContainer``. Then, the screen is split into two
+columns, so we'll use an ``HBoxContainer``. In the left column, we'll
+manage the rows with a ``VBoxContainer``. And in the right column, we'll
+center the illustration with a ``CenterContainer``.
+
+.. figure:: img/ui-mockup-break-down.png
+   :alt: Interface building blocks, broken down using the three rules of
+   thumb
+
+   Interface building blocks, broken down using the three rules of thumb
+
+.. tip:: 
+
+    Containers adapt to the window's resolution and width-to-height
+    ratio. Although we could place UI elements by hand, containers are
+    faster, more precise, and `responsive <>`__.
+
+Prepare the Main Menu scene
+~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Let's create the main menu. We'll build it in a single scene. To create
+an empty scene, click on the Scene menu -> New Scene.
+
+We have to add a root node before we can save the scene. Your UI's root
+should be the outermost container or element. In this case it's a
+``MarginContainer``. ``MarginContainer`` is a good starting point for
+most interfaces, as you often need padding around the UI. Press
+:kbd:``Ctrl S`` to save the scene to the disk. Name it *MainMenu*.
+
+Select the ``MarginContainer`` again, and head to the inspector to
+define the margins' size. Scroll down the ``Control`` class, to the
+``Custom Constants`` section. Unfold it. Set the margins as such:
+
+-  Margin Right: *120*
+-  Margin Top: *80*
+-  Margin Left: *120*
+-  Margin Bottom: *80*
+
+We want the container to fit the window. In the Viewport, open the
+Anchor menu and select the last option, ``Full Rect and Fit Parent``.
+
+Add the UI sprites
+~~~~~~~~~~~~~~~~~~
+
+Select the ``MarginContainer``, and create the UI elements as
+``TextureRect`` nodes. We need:
+
+1. The title, or logo
+2. The three text options, as individual nodes
+3. The version note
+4. And the main menu’s illustration
+
+Click the ``Add Node`` button or press :kbd:``Ctrl A`` on your keyboard.
+Start to type ``TextureRect`` to find the corresponding node and press
+enter. With the new node selected, press :kbd:``Ctrl D`` five times to
+create five extra ``TextureRect`` instances.
+
+Click each of the nodes to select it. In the inspector, click the ``…``
+Icon to the right of the Texture property, and click on ``Load``. A file
+browser opens and lets you pick a sprite to load into the texture slot.
+
+.. figure:: img/ui_TextureRect_load_texture.png
+   :alt: The file browser lets you find and load textures
+
+   The file browser lets you find and load textures
+
+Repeat the operation for all ``TextureRect`` nodes. You should have the
+logo, the illustration, the three menu options and the version note,
+each as a separate node. Then, double click on each of the nodes in the
+Inspector to rename them
+
+.. figure:: img/ui_main_menu_6_TextureRect_nodes.png
+   :alt: The six nodes, with textures loaded
+
+   The six nodes, with textures loaded
+
+.. note:: 
+
+    If you want to support localization in your game, use
+    ``Labels`` for menu options instead of ``TextureRect``.
+
+Add containers to place UI elements automatically
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Our main menu has some margin around the edges of the screen. It is
+split in two parts: on the left, you have the logo and the menu options.
+On the right, you have the characters. We can use one of two containers
+to achieve this: ``HSplitContainer`` or ``HBoxContainer``. Split
+containers split the area into two: a left and a right side or a top and
+a bottom side. They also allow the user to resize the left and right
+areas using an interactive bar. On the other hand, ``HBoxContainer``
+just splits itself into as many columns as it has children. Although you
+can deactivate the split container's resize behaviour, I recommend to
+favour box containers.
+
+Select the ``MarginContainer`` and add an ``HBoxContainer``. Then, we
+need two containers as children of our ``HBoxContainer``: a
+``VBoxContainer`` for the menu options on the left, and a
+``CenterContainer`` for the illustration on the right.
+
+.. figure:: img/ui_main_menu_containers_step_1.png
+   :alt: You should have four nested containers, and the TextureRect
+   nodes sitting aside from it
+
+   You should have four nested containers, and the TextureRect nodes
+   sitting aside from it
+
+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
+drop them into the ``VBoxContainer``. Then, drag the illustration node
+into the ``CenterContainer``. The nodes should position automatically.
+
+.. figure:: img/ui_main_menu_containers_step_2.png
+   :alt: Containers automatically place and resize textures
+
+   Containers automatically place and resize textures
+
+We're left with two problems to solve:
+
+1. The characters on the right aren't centered
+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 inside the ``VBoxContainer``, then drag
+and drop the Characters into it. The Characters element will center
+automatically.
+
+.. figure:: img/ui_main_menu_containers_step_3.png
+   :alt: The character node centers inside the right half of the screen
+   as soon as you place it inside the CenterContainer
+
+   The character node centers inside the right half of the screen as
+   soon as you place it inside the CenterContainer
+
+To space out the menu options and the logo on the left, we'll use one
+final container and its size flags. Select the ``VBoxContainer`` and
+press :kbd:``Ctrl A`` to add a new node inside it. Add a second
+``VBoxContainer`` and name it "MenuOptions". Select all three menu
+options, ``Continue``, ``NewGame`` and ``Options``, and drag and drop
+them inside the new ``VBoxContainer``. The UI's layout should barely
+change, if at all.
+
+.. figure:: img/ui_main_menu_containers_step_4.png
+   :alt: Place the new container between the other two nodes to retain
+   the UI's layout
+
+   Place the new container between the other two nodes to retain the
+   UI's layout
+
+Now we grouped the menu options together, we can tell their container to
+expand to take as much vertical space as possible. Select the
+``MenuOptions`` node. In the Inspector, scroll down to the
+``Size Flags`` category. Click on the field to the right of the
+``Vertical`` property, and check ``Expand``. The container expands to
+take all the available vertical space. But it respects its neighbors,
+the ``Logo`` and ``Version`` elements.
+
+To center the nodes in the ``VBoxContainer``, scroll to the top of the
+Inspector and change the ``Alignment`` property to ``Center``.
+
+.. figure:: img/ui_main_menu_containers_step_5.png
+   :alt: The menu options should center vertically in the UI's left
+   column
+
+   The menu options should center vertically in the UI's left column
+
+To wrap things up, let's add some separation between the menu options.
+Expand the ``Custom Constants`` category below ``Size Flags``, and click
+the field next to the ``Separation`` parameter. Set it to 30. Once you
+press enter, the ``Separation`` property becomes active and Godot adds
+30 pixels between menu options.
+
+.. figure:: img/ui_main_menu_design_final_result.png
+   :alt: The final interface
+
+   The final interface
+
+Without a single line of code, we have a precise and responsive main
+menu.
+
+Congratulations for getting there! You can download the `final
+menu <#>`__ to compare with your own. In the next tutorial, you'll
+create a Game User Interface with bars and item counters.
+
+.. note::
+
+    Responsive User Interface is all about making sure our UIs scale well on
+    all screen types. TV screens and computer displays have different sizes
+    and ratios. In Godot, we use containers to control the position and the
+    size of UI elements. The order in which you nest matters. To see if your
+    UI adapts nicely to different screen ratios, select the root node, press
+    the Q key to activate the Select Mode, select the container and click
+    and drag on one of the container's corners to resize it. The UI
+    components should flow inside of it. You'll notice that although
+    containers move sprites around, they don't scale them. This is normal.
+    We want the UI system to handle different screen ratios, but we also
+    need the entire game to adapt to different screen resolutions. To do
+    this, Godot scales the entire window up and down. You can change the
+    scale mode in the project settings: click the Project menu -> Project
+    Settings. In the window's left column, look for the Display category.
+    Click on the Window sub-category. On the right side of the window,
+    you'll find a Stretch section. The three settings, Mode, Aspect, and
+    Shrink, control the screen size. For more information, see `Project
+    Settings <#>`__.