mirror of
https://github.com/godotengine/godot-docs.git
synced 2025-12-31 17:49:03 +03:00
Add UI roles to remaining step by step pages
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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``.
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user