Fix UI docs build errors

- Remove CB: comments
- Fix missing images
- Fix one image name that had - instead of _ as separators

learning/step_by_step/ui_introduction_to_the_ui_system.rst

@@ -11,7 +11,6 @@ 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
 
@@ -33,18 +32,18 @@ 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.
+All control nodes share the same main properties:  
 
-    CB: *That list of properties is very long. Maybe better as bullets?*
+1. Anchor
+2. Bounding rectangle
+3. Focus and focus neighbour
+4. Size flags
+5. Margin
+6. The optional UI theme
+
+Once you understand the basics of the Control node, it will take you less time to learn all the
+nodes that derive from it.
 
-    CB: *I would remove this last sentence. It sounds too close to "it's
-    easy".*
 
 The 5 most common UI elements
 -----------------------------
@@ -64,27 +63,16 @@ Containers. These five Control nodes are:
 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
+.. figure:: img/five_most_common_nodes.png
 
    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.*
+**TextureRect** displays a texture or image inside a UI.
+It seems similar to the Sprite node but it offers multiple scaling modes.
+Set the Stretch Mode property to change its behaviour:
 
 -  ``Tile`` makes the texture repeat, but it won't scale
 -  The default, ``Scale and Expand (compat)``, lets you scale the
@@ -93,14 +81,10 @@ TextureRect
    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
+.. figure:: img/five_common_nodes_TextureFrame.png
 
    TextureRect modulated with a red color
 
@@ -115,17 +99,14 @@ 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.
+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
+``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
+.. figure:: img/five_common_nodes_TextureButton.png
 
    TextureButton and its 5 texture slots
 
@@ -138,19 +119,18 @@ 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
+``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
+``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
+.. figure:: img/five_common_nodes_TextureProgress.png
 
    TextureProgress bar, two thirds filled
 
@@ -164,8 +144,7 @@ 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
+.. figure:: img/five_common_nodes_Label.png
 
    Picture of a Label
 
@@ -177,8 +156,7 @@ 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
+.. figure:: img/five_common_nodes_NinePatchRect.png
 
    NinePatchRect scaled with the min\_size property
 
@@ -191,7 +169,6 @@ 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
 
@@ -206,7 +183,6 @@ 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
 
@@ -222,9 +198,6 @@ 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
@@ -242,7 +215,6 @@ 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
 
@@ -265,8 +237,7 @@ 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
+.. figure:: img/textureframe_in_box_container_fill.png
 
    3 UI elements in an HBoxContainer, they align horizontally
 
@@ -274,9 +245,7 @@ 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
+.. figure:: img/textureframe_in_box_container_expand.png
 
    The same example as bove, but the left node has the "Expand" size
    flag
@@ -315,9 +284,7 @@ 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.
+.. figure:: img/five_containers_CenterContainer.png
 
    CenterContainer in action. The life bar centers inside its parent
    container.
@@ -329,9 +296,7 @@ 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
+.. figure:: img/five_containers_MarginContainer.png
 
    The MarginContainer adds a 40px margin around the Game User Interface
 
@@ -342,8 +307,7 @@ 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
+.. figure:: img/five_containers_BoxContainer.png
 
    The HBoxContainer horizontally aligns UI elements
 
@@ -363,9 +327,7 @@ 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.
+.. figure:: img/five_containers_GridContainer.png
 
    A GridContainer with 2 columns. It sizes each column automatically.
 

learning/step_by_step/ui_main_menu.rst

@@ -1,4 +1,8 @@
-In this tutorial, you will build two responsive UI (user interface)
+=======================
+ Design a title screen
+=======================
+
+In the next two tutorials, you will build two responsive UI (user interface)
 scenes step-by-step using the engine's UI system:
 
 1. A main menu
@@ -7,10 +11,10 @@ scenes step-by-step using the engine's UI system:
 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.
+read :doc:`ui_game_user_interface`
+
 
 .. figure:: img/ui_main_menu_design_final_result.png
-   :alt: The GUI you're going to create
 
    The GUI you're going to create
 
@@ -18,7 +22,7 @@ Download the project files: :download:`ui_main_menu_design.zip <files/ui_main_me
 
 .. note: 
 
-    Read the ref:\ ``ui_design_guide`` first to learn how Godot’s UI system works
+    Read the :doc:`ui_introduction_to_the_ui_system` first to learn how Godot’s UI system works
 
 How to design your game UI
 --------------------------
@@ -32,7 +36,6 @@ 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
 
@@ -70,8 +73,6 @@ 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
@@ -104,9 +105,7 @@ 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
+.. figure:: img/ui_mockup_break_down.png
 
    Interface building blocks, broken down using the three rules of thumb
 
@@ -161,7 +160,6 @@ 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
 
@@ -171,7 +169,6 @@ 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
 
@@ -200,8 +197,6 @@ need two containers as children of our ``HBoxContainer``: 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
@@ -212,7 +207,6 @@ 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
 
@@ -227,8 +221,6 @@ 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
@@ -242,8 +234,6 @@ 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
@@ -260,8 +250,6 @@ 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
 
@@ -272,7 +260,6 @@ 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
 
@@ -283,23 +270,29 @@ 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::
+Break down the UI mockup
+~~~~~~~~~~~~~~~~~~~~~~~~
 
-    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 <#>`__.
+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 <#>`__.