Add UI roles to remaining step by step pages

This commit is contained in:
skyace65
2025-08-04 20:59:25 -04:00
parent bae4de3b5b
commit 733897966b
5 changed files with 46 additions and 44 deletions

View File

@@ -52,9 +52,10 @@ you to download the ball's sample project we prepared for you:
`instancing_starter.zip <https://github.com/godotengine/godot-docs-project-starters/releases/download/latest-4.x/instancing_starter.zip>`_.
Extract the archive on your computer. To import it, you need the Project Manager.
The Project Manager is accessed by opening Godot, or if you already have Godot opened, click on *Project -> Quit to Project List* (:kbd:`Ctrl + Shift + Q`, :kbd:`Ctrl + Option + Cmd + Q` on macOS)
The Project Manager is accessed by opening Godot, or if you already have Godot
opened, click on :menu:`Project > Quit to Project List` (:kbd:`Ctrl + Shift + Q`, :kbd:`Ctrl + Option + Cmd + Q` on macOS)
In the Project Manager, click the *Import* button to import the project.
In the Project Manager, click the :button:`Import` button to import the project.
.. image:: img/instancing_import_button.webp
@@ -63,12 +64,12 @@ Double-click the ``project.godot`` file to open it.
.. image:: img/instancing_import_project_file.webp
Finally, click the Import & Edit button.
Finally, click the :button:`Import`` button.
.. image:: img/instancing_import_and_edit_button.webp
A window notifying you that the project was last opened in an older Godot version
may appear, that's not an issue. Click *Ok* to open the project.
may appear, that's not an issue. Click :button:`Ok`` to open the project.
The project contains two packed scenes: ``main.tscn``, containing walls against
which the ball collides, and ``ball.tscn``. The Main scene should open
@@ -118,7 +119,7 @@ Editing scenes and instances
There is more to instances. With this feature, you can:
1. Change the properties of one ball without affecting the others using the
Inspector.
:ui:`Inspector`.
2. Change the default properties of every Ball by opening the ``ball.tscn`` scene
and making a change to the Ball node there. Upon saving, all instances of the
Ball in the project will see their values update.
@@ -130,8 +131,8 @@ Let's try this. Double-click ``ball.tscn`` in the FileSystem to open it.
.. image:: img/instancing_ball_scene_open.webp
In the Scene dock on the left, select the Ball node. Then, in the Inspector on the right, click on the PhysicsMaterial
property to expand it.
In the Scene dock on the left, select the Ball node. Then, in the :ui:`Inspector` on the
right, click on the :inspector:`PhysicsMaterial`` property to expand it.
.. image:: img/instancing_physics_material_expand.webp
@@ -149,8 +150,8 @@ on the corresponding tab above the viewport.
.. image:: img/instancing_scene_tabs.webp
Select one of the instanced Ball nodes and, in the Inspector, set its Gravity
Scale value to ``10``.
Select one of the instanced Ball nodes and, in the :ui:`Inspector`, set its
:inspector:`Gravity Scale` value to ``10``.
.. image:: img/instancing_property_gravity_scale.png
@@ -167,11 +168,11 @@ Rerun the game and notice how this ball now falls much faster than the others.
.. note::
You may notice you are unable to change the values of the PhysicsMaterial
of the ball. This is because PhysicsMaterial is a *resource*, and needs
You may notice you are unable to change the values of the :inspector:`PhysicsMaterial`
of the ball. This is because :inspector:`PhysicsMaterial` is a *resource*, and needs
to be made unique before you can edit it in a scene that is linking to its
original scene. To make a resource unique for one instance, right-click on
the **Physics Material** property in the Inspector and click **Make Unique**
the :inspector:`Physics Material` property in the :ui:`Inspector`` and click :button:`Make Unique``
in the context menu.
Resources are another essential building block of Godot games we will cover

View File

@@ -72,7 +72,7 @@ opening the project, you should see an empty editor.
.. image:: img/nodes_and_scenes_01_empty_editor.webp
In an empty scene, the Scene dock on the left shows several options to add a
In an empty scene, the :ui:`Scene`` dock on the left shows several options to add a
root node quickly. :button:`2D Scene` adds a :ref:`Node2D <class_Node2D>` node,
:button:`3D Scene` adds a :ref:`Node3D <class_Node3D>` node,
and :button:`User Interface` adds a :ref:`Control <class_Control>` node.

View File

@@ -41,8 +41,8 @@ icon, which we often use for prototyping in the community.
.. image:: img/scripting_first_script_icon.svg
We need to create a Sprite2D node to display it in the game. In the Scene dock,
click the **Other Node** button.
We need to create a Sprite2D node to display it in the game. In the :ui:`Scene` dock,
click the :button:`Other Node` button.
.. image:: img/scripting_first_script_click_other_node.webp
@@ -51,14 +51,14 @@ to create the node.
.. image:: img/scripting_first_script_add_sprite_node.webp
Your Scene tab should now only have a Sprite2D node.
Your :ui:`Scene` tab should now only have a Sprite2D node.
.. image:: img/scripting_first_script_scene_tree.webp
A Sprite2D node needs a texture to display. In the Inspector on the right, you
can see that the **Texture** property says ``<empty>``. To display the Godot icon,
click and drag the file ``icon.svg`` from the FileSystem dock onto the Texture
slot.
A Sprite2D node needs a texture to display. In the :ui:`Inspector` on the right, you
can see that the :inspector:`Texture` property says ``<empty>``. To display the
Godot icon, click and drag the file ``icon.svg`` from the FileSystem dock onto the
Texture slot.
.. image:: img/scripting_first_script_setting_texture.webp
@@ -75,16 +75,16 @@ Creating a new script
---------------------
To create and attach a new script to our node, right-click on Sprite2D in the
Scene dock and select **Attach Script**.
Scene dock and select :button:`Attach Script`.
.. image:: img/scripting_first_script_attach_script.webp
The **Attach Node Script** window appears. It allows you to select the script's
The :ui:`Attach Node Script` window appears. It allows you to select the script's
language and file path, among other options.
Change the **Template** field from ``Node: Default`` to ``Object: Empty`` to
Change the :ui:`Template` field from ``Node: Default`` to ``Object: Empty`` to
start with a clean file. Leave the other options set to their default values and
click the **Create** button to create the script.
click the :button:`Create` button to create the script.
.. image:: img/scripting_first_script_attach_node_script.webp
@@ -93,7 +93,7 @@ click the **Create** button to create the script.
C# script names need to match their class name. In this case, you should name the
file ``MySprite2D.cs``.
The Script workspace should appear with your new ``sprite_2d.gd`` file open and
The :ui:`Script` workspace should appear with your new ``sprite_2d.gd`` file open and
the following line of code:
.. tabs::
@@ -120,16 +120,16 @@ node, including classes it extends, like ``Node2D``, ``CanvasItem``, and
class will implicitly extend :ref:`RefCounted <class_RefCounted>`, which
Godot uses to manage your application's memory.
Inherited properties include the ones you can see in the Inspector dock, like
Inherited properties include the ones you can see in the :ui:`Inspector` dock, like
our node's ``texture``.
.. note::
By default, the Inspector displays a node's properties in "Title Case", with
By default, the :ui:`Inspector` displays a node's properties in "Title Case", with
capitalized words separated by a space. In GDScript code, these properties
are in "snake_case", which is lowercase with words separated by an underscore.
You can hover over any property's name in the Inspector to see a description and
You can hover over any property's name in the :ui:`Inspector` to see a description and
its identifier in code.
Hello, world!
@@ -165,7 +165,7 @@ this function.
red and display the following error message: "Indented block expected".
Save the scene as ``sprite_2d.tscn`` if you haven't already, then press :kbd:`F6` (:kbd:`Cmd + R` on macOS)
to run it. Look at the **Output** bottom panel that expands.
to run it. Look at the :ui:`Output` bottom panel that expands.
It should display "Hello, world!".
.. image:: img/scripting_first_script_print_hello_world.webp
@@ -178,7 +178,7 @@ Turning around
It's time to make our node move and rotate. To do so, we're going to add two
member variables to our script: the movement speed in pixels per second and the
angular speed in radians per second. Add the following after the ``extends Sprite2D`` line.
angular speed in radians per second. Add the following after the ``extends Sprite2D`` line.
.. tabs::
.. code-tab:: gdscript GDScript

View File

@@ -74,8 +74,8 @@ The two actions we use above, "ui_left" and "ui_right", are predefined in every
Godot project. They respectively trigger when the player presses the left and
right arrows on the keyboard or left and right on a gamepad's D-pad.
.. note:: You can see and edit input actions in your project by going to Project
-> Project Settings and clicking on the Input Map tab.
.. note:: You can see and edit input actions in your project by going to
:menu:`Project > Project Settings` and clicking on the :ui:`Input Map` tab.
Finally, we use the ``direction`` as a multiplier when we update the node's
``rotation``: ``rotation += angular_speed * direction * delta``.

View File

@@ -58,11 +58,11 @@ To add a button to our game, we will create a new scene which will include
both a :ref:`Button <class_button>` and the ``sprite_2d.tscn`` scene we created in
the :ref:`doc_scripting_first_script` lesson.
Create a new scene by going to the menu Scene -> New Scene.
Create a new scene by going to the menu :menu:`Scene > New Scene`.
.. image:: img/signals_01_new_scene.webp
In the Scene dock, click the 2D Scene button. This will add
In the Scene dock, click the :button:`2D Scene`` button. This will add
a :ref:`Node2D <class_Node2D>` as our root.
.. image:: img/signals_02_2d_scene.webp
@@ -73,7 +73,7 @@ previously onto the Node2D to instantiate it.
.. image:: img/signals_03_dragging_scene.png
We want to add another node as a sibling of the Sprite2D. To do so, right-click
on Node2D and select Add Child Node.
on Node2D and select :button:`Add Child Node`.
.. image:: img/signals_04_add_child_node.webp
@@ -92,8 +92,8 @@ If you don't see the handles, ensure the select tool is active in the toolbar.
Click and drag on the button itself to move it closer to the sprite.
You can also write a label on the Button by editing its Text property in the
Inspector. Enter ``Toggle motion``.
You can also write a label on the Button by editing its :inspector:`Text` property
in the :ui:`Inspector`. Enter ``Toggle motion``.
.. image:: img/signals_08_toggle_motion_text.webp
@@ -114,8 +114,9 @@ want to call a new function that will toggle its motion on and off. We need to
have a script attached to the Sprite2D node, which we do from the previous
lesson.
You can connect signals in the Node dock. Select the Button node and, on the
right side of the editor, click on the tab named "Node" next to the Inspector.
You can connect signals in the :ui:`Node` dock. Select the Button node and, on the
right side of the editor, click on the tab named :ui:`Node` next to the
:ui:`Inspector`.
.. image:: img/signals_10_node_dock.webp
@@ -142,7 +143,7 @@ methods "_on_node_name_signal_name". Here, it'll be "_on_button_pressed".
The advanced view lets you connect to any node and any built-in
function, add arguments to the callback, and set options. You can
toggle the mode in the window's bottom-right by clicking the Advanced
toggle the mode in the window's bottom-right by clicking the :button:`Advanced`
button.
.. note::
@@ -151,8 +152,8 @@ methods "_on_node_name_signal_name". Here, it'll be "_on_button_pressed".
automatic code generation might not work. In this case, you need to connect
the signal via code as explained in the next section.
Click the Connect button to complete the signal connection and jump to the
Script workspace. You should see the new method with a connection icon in the
Click the :button:`Connect` button to complete the signal connection and jump to the
:ui:`Script` workspace. You should see the new method with a connection icon in the
left margin.
.. image:: img/signals_13_signals_connection_icon.webp
@@ -273,7 +274,7 @@ this.
.. image:: img/signals_15_scene_tree.webp
With the Timer node selected, go to the Inspector and enable the **Autostart**
With the Timer node selected, go to the :ui:`Inspector` and enable the :inspector:`Autostart`
property.
.. image:: img/signals_18_timer_autostart.webp
@@ -466,7 +467,7 @@ reaches 0.
.. note:: As signals represent events that just occurred, we generally use an
action verb in the past tense in their names.
Your signals work the same way as built-in ones: they appear in the Node tab and
Your signals work the same way as built-in ones: they appear in the :ui:`Node` tab and
you can connect to them like any other.
.. image:: img/signals_17_custom_signal.webp