diff --git a/getting_started/step_by_step/img/nodes_and_scenes_01_empty_editor.png b/getting_started/step_by_step/img/nodes_and_scenes_01_empty_editor.png deleted file mode 100644 index bef3eef17..000000000 Binary files a/getting_started/step_by_step/img/nodes_and_scenes_01_empty_editor.png and /dev/null differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_01_empty_editor.webp b/getting_started/step_by_step/img/nodes_and_scenes_01_empty_editor.webp new file mode 100644 index 000000000..025129f14 Binary files /dev/null and b/getting_started/step_by_step/img/nodes_and_scenes_01_empty_editor.webp differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_02_scene_dock.png b/getting_started/step_by_step/img/nodes_and_scenes_02_scene_dock.png deleted file mode 100644 index d4b2b8c8e..000000000 Binary files a/getting_started/step_by_step/img/nodes_and_scenes_02_scene_dock.png and /dev/null differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_02_scene_dock.webp b/getting_started/step_by_step/img/nodes_and_scenes_02_scene_dock.webp new file mode 100644 index 000000000..28e4265fd Binary files /dev/null and b/getting_started/step_by_step/img/nodes_and_scenes_02_scene_dock.webp differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_03_create_node_window.png b/getting_started/step_by_step/img/nodes_and_scenes_03_create_node_window.png deleted file mode 100644 index ff89e5b76..000000000 Binary files a/getting_started/step_by_step/img/nodes_and_scenes_03_create_node_window.png and /dev/null differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_03_create_node_window.webp b/getting_started/step_by_step/img/nodes_and_scenes_03_create_node_window.webp new file mode 100644 index 000000000..91745a395 Binary files /dev/null and b/getting_started/step_by_step/img/nodes_and_scenes_03_create_node_window.webp differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_04_create_label_window.png b/getting_started/step_by_step/img/nodes_and_scenes_04_create_label_window.png deleted file mode 100644 index 01796e084..000000000 Binary files a/getting_started/step_by_step/img/nodes_and_scenes_04_create_label_window.png and /dev/null differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_04_create_label_window.webp b/getting_started/step_by_step/img/nodes_and_scenes_04_create_label_window.webp new file mode 100644 index 000000000..6404736f4 Binary files /dev/null and b/getting_started/step_by_step/img/nodes_and_scenes_04_create_label_window.webp differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_05_editor_with_label.png b/getting_started/step_by_step/img/nodes_and_scenes_05_editor_with_label.png deleted file mode 100644 index de9a538f2..000000000 Binary files a/getting_started/step_by_step/img/nodes_and_scenes_05_editor_with_label.png and /dev/null differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_05_editor_with_label.webp b/getting_started/step_by_step/img/nodes_and_scenes_05_editor_with_label.webp new file mode 100644 index 000000000..eee7b82b8 Binary files /dev/null and b/getting_started/step_by_step/img/nodes_and_scenes_05_editor_with_label.webp differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_06_label_text.png b/getting_started/step_by_step/img/nodes_and_scenes_06_label_text.png deleted file mode 100644 index 7166ac591..000000000 Binary files a/getting_started/step_by_step/img/nodes_and_scenes_06_label_text.png and /dev/null differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_06_label_text.webp b/getting_started/step_by_step/img/nodes_and_scenes_06_label_text.webp new file mode 100644 index 000000000..368378efb Binary files /dev/null and b/getting_started/step_by_step/img/nodes_and_scenes_06_label_text.webp differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_07_move_tool.png b/getting_started/step_by_step/img/nodes_and_scenes_07_move_tool.png deleted file mode 100644 index cdfe446d4..000000000 Binary files a/getting_started/step_by_step/img/nodes_and_scenes_07_move_tool.png and /dev/null differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_07_move_tool.webp b/getting_started/step_by_step/img/nodes_and_scenes_07_move_tool.webp new file mode 100644 index 000000000..ad9cd1b20 Binary files /dev/null and b/getting_started/step_by_step/img/nodes_and_scenes_07_move_tool.webp differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_08_hello_world_text.png b/getting_started/step_by_step/img/nodes_and_scenes_08_hello_world_text.png deleted file mode 100644 index 23d593f95..000000000 Binary files a/getting_started/step_by_step/img/nodes_and_scenes_08_hello_world_text.png and /dev/null differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_08_hello_world_text.webp b/getting_started/step_by_step/img/nodes_and_scenes_08_hello_world_text.webp new file mode 100644 index 000000000..f037cd2c6 Binary files /dev/null and b/getting_started/step_by_step/img/nodes_and_scenes_08_hello_world_text.webp differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_09_play_scene_button.png b/getting_started/step_by_step/img/nodes_and_scenes_09_play_scene_button.png deleted file mode 100644 index dd9116f3f..000000000 Binary files a/getting_started/step_by_step/img/nodes_and_scenes_09_play_scene_button.png and /dev/null differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_09_play_scene_button.webp b/getting_started/step_by_step/img/nodes_and_scenes_09_play_scene_button.webp new file mode 100644 index 000000000..455f74b68 Binary files /dev/null and b/getting_started/step_by_step/img/nodes_and_scenes_09_play_scene_button.webp differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_10_save_scene_as.webp b/getting_started/step_by_step/img/nodes_and_scenes_10_save_scene_as.webp new file mode 100644 index 000000000..3e5e391be Binary files /dev/null and b/getting_started/step_by_step/img/nodes_and_scenes_10_save_scene_as.webp differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_10_save_scene_popup.png b/getting_started/step_by_step/img/nodes_and_scenes_10_save_scene_popup.png deleted file mode 100644 index 81c4d5a33..000000000 Binary files a/getting_started/step_by_step/img/nodes_and_scenes_10_save_scene_popup.png and /dev/null differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_11_final_result.webp b/getting_started/step_by_step/img/nodes_and_scenes_11_final_result.webp new file mode 100644 index 000000000..6050f36a5 Binary files /dev/null and b/getting_started/step_by_step/img/nodes_and_scenes_11_final_result.webp differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_11_save_scene_as.png b/getting_started/step_by_step/img/nodes_and_scenes_11_save_scene_as.png deleted file mode 100644 index 2fcb76621..000000000 Binary files a/getting_started/step_by_step/img/nodes_and_scenes_11_save_scene_as.png and /dev/null differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_12_final_result.png b/getting_started/step_by_step/img/nodes_and_scenes_12_final_result.png deleted file mode 100644 index b6952ffb3..000000000 Binary files a/getting_started/step_by_step/img/nodes_and_scenes_12_final_result.png and /dev/null differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_12_play_button.webp b/getting_started/step_by_step/img/nodes_and_scenes_12_play_button.webp new file mode 100644 index 000000000..f43946f73 Binary files /dev/null and b/getting_started/step_by_step/img/nodes_and_scenes_12_play_button.webp differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_13_main_scene_popup.webp b/getting_started/step_by_step/img/nodes_and_scenes_13_main_scene_popup.webp new file mode 100644 index 000000000..6c8818d3d Binary files /dev/null and b/getting_started/step_by_step/img/nodes_and_scenes_13_main_scene_popup.webp differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_13_play_button.png b/getting_started/step_by_step/img/nodes_and_scenes_13_play_button.png deleted file mode 100644 index 377663002..000000000 Binary files a/getting_started/step_by_step/img/nodes_and_scenes_13_play_button.png and /dev/null differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_14_main_scene_popup.png b/getting_started/step_by_step/img/nodes_and_scenes_14_main_scene_popup.png deleted file mode 100644 index c4323fcb4..000000000 Binary files a/getting_started/step_by_step/img/nodes_and_scenes_14_main_scene_popup.png and /dev/null differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_14_select_main_scene.webp b/getting_started/step_by_step/img/nodes_and_scenes_14_select_main_scene.webp new file mode 100644 index 000000000..0fe809e4a Binary files /dev/null and b/getting_started/step_by_step/img/nodes_and_scenes_14_select_main_scene.webp differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_15_select_main_scene.png b/getting_started/step_by_step/img/nodes_and_scenes_15_select_main_scene.png deleted file mode 100644 index 8882fadb7..000000000 Binary files a/getting_started/step_by_step/img/nodes_and_scenes_15_select_main_scene.png and /dev/null differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_character_nodes.png b/getting_started/step_by_step/img/nodes_and_scenes_character_nodes.png deleted file mode 100644 index 55abb9dd5..000000000 Binary files a/getting_started/step_by_step/img/nodes_and_scenes_character_nodes.png and /dev/null differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_character_nodes.webp b/getting_started/step_by_step/img/nodes_and_scenes_character_nodes.webp new file mode 100644 index 000000000..ff47bfa27 Binary files /dev/null and b/getting_started/step_by_step/img/nodes_and_scenes_character_nodes.webp differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_nodes.png b/getting_started/step_by_step/img/nodes_and_scenes_nodes.png deleted file mode 100644 index 7bf4fff20..000000000 Binary files a/getting_started/step_by_step/img/nodes_and_scenes_nodes.png and /dev/null differ diff --git a/getting_started/step_by_step/img/nodes_and_scenes_nodes.webp b/getting_started/step_by_step/img/nodes_and_scenes_nodes.webp new file mode 100644 index 000000000..53e138ada Binary files /dev/null and b/getting_started/step_by_step/img/nodes_and_scenes_nodes.webp differ diff --git a/getting_started/step_by_step/nodes_and_scenes.rst b/getting_started/step_by_step/nodes_and_scenes.rst index cd4f47b17..ebc10ba28 100644 --- a/getting_started/step_by_step/nodes_and_scenes.rst +++ b/getting_started/step_by_step/nodes_and_scenes.rst @@ -1,5 +1,3 @@ -:article_outdated: True - .. The goal of this page is to explain more than doc_key_concepts_overview about nodes and scenes, get the user to create their first concrete scene. @@ -19,9 +17,9 @@ Nodes ingredients in a recipe. There are dozens of kinds that can display an image, play a sound, represent a camera, and much more. -.. image:: img/nodes_and_scenes_nodes.png +.. image:: img/nodes_and_scenes_nodes.webp -All nodes have the following attributes: +All nodes have the following characteristics: - A name. - Editable properties. @@ -29,13 +27,14 @@ All nodes have the following attributes: - You can extend them with new properties and functions. - You can add them to another node as a child. -The last attribute is key. **Together, nodes form a tree**, which is a powerful +The last characteristic is important. **Together, nodes form a tree**, which is a powerful feature to organize projects. Since different nodes have different functions, combining them produces more complex behavior. As we saw before, you can build a -playable character the camera follows using a kinematic body node named -"Character", a sprite node, a camera node, and a collision shape node. +playable character the camera follows using a :ref:`CharacterBody2D ` +node named "Character", a :ref:`Sprite2D ` node, +a :ref:`Camera2D ` node, and a :ref:`CollisionShape2D ` node. -.. image:: img/nodes_and_scenes_character_nodes.png +.. image:: img/nodes_and_scenes_character_nodes.webp Scenes ------ @@ -57,7 +56,7 @@ contain as many of these scenes as you need. The engine only requires one as your application's **main scene**. This is the scene Godot will first load when you or a player runs the game. -On top of acting like nodes, scenes have the following attributes: +On top of acting like nodes, scenes have the following characteristics: 1. They always have one root node, like the "Character" in our example. 2. You can save them to your hard drive and load them later. @@ -71,35 +70,37 @@ Let's create our first scene with a single node. To do so, you will need to :ref:`create a new project ` first. After opening the project, you should see an empty editor. -.. image:: img/nodes_and_scenes_01_empty_editor.png +.. 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 -root node quickly. "2D Scene" adds a Node2D node, "3D Scene" adds a Node3D -node, and "User Interface" adds a Control node. These presets -are here for convenience; they are not mandatory. "Other Node" lets you select any -node to be the root node. In an empty scene, "Other Node" is equivalent to pressing -the "Add Child Node" button at the top-left of the Scene dock, which usually adds +root node quickly. "2D Scene" adds a :ref:`Node2D ` node, +"3D Scene" adds a :ref:`Node3D ` node, +and "User Interface" adds a :ref:`Control ` node. +These presets are here for convenience; they are not mandatory. +"Other Node" lets you select any node to be the root node. +In an empty scene, "Other Node" is equivalent to pressing the "Add Child Node" +button at the top-left of the Scene dock, which usually adds a new node as a child of the currently selected node. -We're going to add a single Label node to our scene. Its function is to draw +We're going to add a single :ref:`Label ` node to our scene. Its function is to draw text on the screen. Press the "Add Child Node" button or "Other Node" to create a root node. -.. image:: img/nodes_and_scenes_02_scene_dock.png +.. image:: img/nodes_and_scenes_02_scene_dock.webp The Create Node dialog opens, showing the long list of available nodes. -.. image:: img/nodes_and_scenes_03_create_node_window.png +.. image:: img/nodes_and_scenes_03_create_node_window.webp Select the Label node. You can type its name to filter down the list. -.. image:: img/nodes_and_scenes_04_create_label_window.png +.. image:: img/nodes_and_scenes_04_create_label_window.webp Click on the Label node to select it and click the Create button at the bottom of the window. -.. image:: img/nodes_and_scenes_05_editor_with_label.png +.. image:: img/nodes_and_scenes_05_editor_with_label.webp A lot happens when you add a scene's first node. The scene changes to the 2D workspace because Label is a 2D node type. The Label appears, selected, in the @@ -115,7 +116,7 @@ The next step is to change the Label's "Text" property. Let's change it to Head to the Inspector dock on the right of the viewport. Click inside the field below the Text property and type "Hello World". -.. image:: img/nodes_and_scenes_06_label_text.png +.. image:: img/nodes_and_scenes_06_label_text.webp You will see the text draw in the viewport as you type. @@ -126,12 +127,12 @@ You will see the text draw in the viewport as you type. You can move your Label node in the viewport by selecting the move tool in the toolbar. -.. image:: img/nodes_and_scenes_07_move_tool.png +.. image:: img/nodes_and_scenes_07_move_tool.webp With the Label selected, click and drag anywhere in the viewport to move it to the center of the view delimited by the rectangle. -.. image:: img/nodes_and_scenes_08_hello_world_text.png +.. image:: img/nodes_and_scenes_08_hello_world_text.webp Running the scene ----------------- @@ -139,16 +140,12 @@ Running the scene Everything's ready to run the scene! Press the Play Scene button in the top-right of the screen or press :kbd:`F6` (:kbd:`Cmd + R` on macOS). -.. image:: img/nodes_and_scenes_09_play_scene_button.png +.. image:: img/nodes_and_scenes_09_play_scene_button.webp A popup invites you to save the scene, which is required to run it. +Click the Save button in the file browser to save it as "label.tscn". -.. image:: img/nodes_and_scenes_10_save_scene_popup.png - -Click the Yes button, and in the file browser that appears, press the Save -button to save it as "Label.tscn". - -.. image:: img/nodes_and_scenes_11_save_scene_as.png +.. image:: img/nodes_and_scenes_10_save_scene_as.webp .. note:: The Save Scene As dialog, like other file dialogs in the editor, only allows you to save files inside the project. The ``res://`` path at @@ -158,7 +155,7 @@ button to save it as "Label.tscn". The application should open in a new window and display the text "Hello World". -.. image:: img/nodes_and_scenes_12_final_result.png +.. image:: img/nodes_and_scenes_11_final_result.webp Close the window or press :kbd:`F8` to quit the running scene. @@ -175,16 +172,16 @@ To run our test scene, we used the Play Scene button. Another button next to it allows you to set and run the project's main scene. You can press :kbd:`F5` (:kbd:`Cmd + B` on macOS) to do so. -.. image:: img/nodes_and_scenes_13_play_button.png +.. image:: img/nodes_and_scenes_12_play_button.webp A popup window appears and invites you to select the main scene. -.. image:: img/nodes_and_scenes_14_main_scene_popup.png +.. image:: img/nodes_and_scenes_13_main_scene_popup.webp Click the Select button, and in the file dialog that appears, double click on -Label.tscn. +label.tscn. -.. image:: img/nodes_and_scenes_15_select_main_scene.png +.. image:: img/nodes_and_scenes_14_select_main_scene.webp The demo should run again. Moving forward, every time you run the project, Godot will use this scene as a starting point.