Skip to content

Commit

Permalink
Fix Step By Step Design UI instructions (godotengine#586)
Browse files Browse the repository at this point in the history 
* Fix download link and asset path

* Fix UI instructions

* Fix typos and convert to Meta vs Ctrl to match interface.
  • Loading branch information
@mattsp1290 @NathanLovato
mattsp1290 authored and NathanLovato committed Nov 13, 2017
1 parent 8c8d5c2 commit 9177702
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 34 deletions.
38 changes: 19 additions & 19 deletions learning/step_by_step/ui_game_user_interface.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand All @@ -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
Expand All @@ -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.
Expand All @@ -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.
Expand Down
30 changes: 15 additions & 15 deletions learning/step_by_step/ui_main_menu.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`


Expand All @@ -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
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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
~~~~~~~~~~~~~~~~~~~~~~~~~~~
Expand All @@ -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
Expand All @@ -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
~~~~~~~~~~~~~~~~~~
Expand All @@ -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 ``…``
Expand All @@ -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``.
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand Down

0 comments on commit 9177702

Please sign in to comment.