Fix Step By Step Design UI instructions (#586)

* Fix download link and asset path

* Fix UI instructions

* Fix typos and convert to Meta vs Ctrl to match interface.

learning/step_by_step/ui_game_user_interface.rst

@@ -83,7 +83,7 @@ four containers, we have the base for our GUI scene.
 
    You should have 4 containers that look like this
 
-.. note:: 
+.. 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
@@ -172,7 +172,7 @@ 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
+menu and click ``Full Rect``. 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.
@@ -265,8 +265,8 @@ 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
+nodes. Click the Layout menu in the toolbar at the top of the viewport
+and select ``Full Rect``. Both nodes will update to fit
 the size of the ``Background``.
 
 .. figure:: ./img/ui_gui_step_tutorial_counter_design_2.png
@@ -291,10 +291,10 @@ 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
+Select the Icon, click the Layout menu, and select
+``Full Rect`` to re-center it. We need it to anchor to
+the ``Background``'s right edge. Open the Layout menu again and select
+``Center Right``. Move the icon up so it is centered vertically with the
 ``Background``.
 
 .. figure:: ./img/ui_gui_step_tutorial_counter_design_4.png
@@ -337,7 +337,7 @@ 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:: 
+.. 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
@@ -385,7 +385,7 @@ 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:: 
+.. note::
 
     Think of scene inheritance like the node tree, or the
     ``extends`` keyword in GDScript. An inherited scene does everything like
@@ -398,7 +398,7 @@ 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
+Press ``Meta+S`` to save the new inherited scene and name it
 ``LifeBar``.
 
 .. figure:: img/ui_gui_step_tutorial_inherited_scene_parent.png
@@ -412,7 +412,7 @@ 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:: 
+.. 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
@@ -461,10 +461,10 @@ all the resources this node uses and create unique copies for us.
 
    Use this option to create unique copies of the resources for one node
 
-.. tip:: 
+.. tip::
 
     When you duplicate a node from the Scene tree, with
-    :kbd:``Ctrl D``, it shares its resources with the original node. You
+    ``Meta+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.
 
@@ -498,7 +498,7 @@ as well.
 
    The Count looks better now it's a bit smaller
 
-.. tip:: 
+.. tip::
 
     The Count node's size affects the position of the
     TextureProgress. As we'll align our bars vertically in a moment, we're
@@ -564,7 +564,7 @@ centers inside the ``HBoxContainer``.
 
    Now both counters have a decent size
 
-.. tip:: 
+.. tip::
 
     Change the ``Min Size`` property of the ``Counters`` container
     to control the height of the counters' background.
@@ -582,7 +582,7 @@ vertically with the Life\` \`Bar.
 
    The 2 bars align perfectly
 
-.. note:: 
+.. 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
@@ -598,7 +598,7 @@ 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
+Head to the Layout menu and select the ``Center Top`` 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.
@@ -610,7 +610,7 @@ find final project `here <#>`__.
 
    The final result
 
-.. note:: 
+.. 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.

learning/step_by_step/ui_main_menu.rst

@@ -10,7 +10,7 @@ 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, 
+from the editor. To learn how to code a life bar,
 read :doc:`ui_game_user_interface`
 
 
@@ -20,7 +20,7 @@ read :doc:`ui_game_user_interface`
 
 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: 
+.. note:
 
     Read the :doc:`ui_introduction_to_the_ui_system` first to learn how Godot’s UI system works
 
@@ -68,9 +68,9 @@ 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
+Please download :download:`ui_main_menu_design.zip <files/ui_main_menu_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.
+sprites in the ``start/assets/main_menu`` folder.
 
 .. figure:: img/ui_main_menu_placeholder_assets.png
 
@@ -109,11 +109,11 @@ center the illustration with a ``CenterContainer``.
 
    Interface building blocks, broken down using the three rules of thumb
 
-.. tip:: 
+.. 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 <>`__.
+    faster, more precise, and ``responsive``.
 
 Prepare the Main Menu scene
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -125,7 +125,7 @@ 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*.
+``Meta+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
@@ -137,7 +137,7 @@ define the margins' size. Scroll down the ``Control`` class, to the
 -  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``.
+Layout menu and select the last option, ``Full Rect``.
 
 Add the UI sprites
 ~~~~~~~~~~~~~~~~~~
@@ -150,9 +150,9 @@ Select the ``MarginContainer``, and create the UI elements as
 3. The version note
 4. And the main menu’s illustration
 
-Click the ``Add Node`` button or press :kbd:``Ctrl A`` on your keyboard.
+Click the ``Add Node`` button or press ``Meta+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
+enter. With the new node selected, press ``Meta+D`` five times to
 create five extra ``TextureRect`` instances.
 
 Click each of the nodes to select it. In the inspector, click the ``…``
@@ -172,7 +172,7 @@ Inspector to rename them
 
    The six nodes, with textures loaded
 
-.. note:: 
+.. note::
 
     If you want to support localization in your game, use
     ``Labels`` for menu options instead of ``TextureRect``.
@@ -227,7 +227,7 @@ automatically.
 
 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
+press ``Meta+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
@@ -276,19 +276,19 @@ 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. 
+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. 
+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. 
+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.