Merge pull request #11149 from Piralein/MeMeDontLike3D

Overhaul "Getting Started - Your first 3D game" images

getting_started/first_3d_game/01.game_setup.rst

@@ -27,7 +27,7 @@ Click *Import* to open the project in the editor.
 .. image:: img/01.game_setup/03.import_and_edit.webp
 
 A window notifying you that the project was generated by an older Godot version may appear.
-Click *Convert Full Project* to convert the project to your current Godot version.
+Click *OK* to convert the project to your current Godot version.
 
 .. image:: img/01.game_setup/import_project_to_4.x_prompt.webp
 
@@ -147,7 +147,7 @@ Move it up by clicking and dragging on the manipulator's green arrow
 and click and drag on the red arc to rotate it around the X-axis, until the
 ground is lit.
 
-In the *Inspector*, turn on *Shadow -> Enabled* by clicking the checkbox.
+In the *Inspector*, turn on *Shadow* by clicking the checkbox.
 
 .. image:: img/01.game_setup/16.turn_on_shadows.webp
 

getting_started/first_3d_game/03.player_movement_code.rst

@@ -449,12 +449,12 @@ Ultimately, we have both player movement and the view in place. Next, we will
 work on the monsters.
 
 .. |image0| image:: img/03.player_movement_code/01.attach_script_to_player.webp
-.. |image1| image:: img/03.player_movement_code/02.clicking_main_tab.png
+.. |image1| image:: img/03.player_movement_code/02.clicking_main_tab.webp
 .. |image2| image:: img/03.player_movement_code/03.instance_child_scene.webp
 .. |image3| image:: img/03.player_movement_code/04.scene_tree_with_camera.webp
-.. |image4| image:: img/03.player_movement_code/05.camera_preview_checkbox.png
-.. |image5| image:: img/03.player_movement_code/06.two_viewports.png
-.. |image6| image:: img/03.player_movement_code/07.camera_preview_checkbox.png
+.. |image4| image:: img/03.player_movement_code/05.camera_preview_checkbox.webp
+.. |image5| image:: img/03.player_movement_code/06.two_viewports.webp
+.. |image6| image:: img/03.player_movement_code/07.camera_preview_checkbox.webp
 .. |image7| image:: img/03.player_movement_code/08.camera_moved.png
 .. |image8| image:: img/03.player_movement_code/09.camera_rotated.png
 .. |image9| image:: img/03.player_movement_code/10.camera_perspective.png

getting_started/first_3d_game/04.mob_scene.rst

@@ -331,13 +331,13 @@ Here is the complete ``mob.gd`` script for reference.
         }
     }
 
-.. |image0| image:: img/04.mob_scene/01.initial_three_nodes.png
-.. |image1| image:: img/04.mob_scene/02.add_child_node.png
-.. |image2| image:: img/04.mob_scene/03.scene_with_collision_shape.png
+.. |image0| image:: img/04.mob_scene/01.initial_three_nodes.webp
+.. |image1| image:: img/04.mob_scene/02.add_child_node.webp
+.. |image2| image:: img/04.mob_scene/03.scene_with_collision_shape.webp
 .. |image4| image:: img/04.mob_scene/05.box_final_size.png
-.. |image5| image:: img/04.mob_scene/06.visibility_notifier.png
+.. |image5| image:: img/04.mob_scene/06.visibility_notifier.webp
 .. |image6| image:: img/04.mob_scene/07.visibility_notifier_bbox_resized.png
-.. |image7| image:: img/04.mob_scene/08.mob_attach_script.png
-.. |image8| image:: img/04.mob_scene/09.switch_to_3d_workspace.png
+.. |image7| image:: img/04.mob_scene/08.mob_attach_script.webp
+.. |image8| image:: img/04.mob_scene/09.switch_to_3d_workspace.webp
 .. |image9| image:: img/04.mob_scene/10.node_dock.webp
 .. |image10| image:: img/04.mob_scene/11.connect_signal.webp

getting_started/first_3d_game/05.spawning_mobs.rst

@@ -21,7 +21,7 @@ Go to *Project -> Project Settings*.
 If you still have *Input Map* open, switch to the *General* tab.
 
 In the left menu, navigate down to *Display -> Window*. On the right, set the
-*Width* to ``720`` and the *Height* to ``540``.
+*Viewport Width* to ``720`` and the *Viewport Height* to ``540``.
 
 |image2|
 
@@ -106,8 +106,6 @@ In the *Inspector*, expand the *Material* section and assign a :ref:`StandardMat
 
 |image13|
 
-.. image:: img/05.spawning_mobs/standard_material.webp
-
 Click the sphere icon to open the material resource. You get a preview of the
 material and a long list of sections filled with properties. You can use these
 to create all sorts of surfaces, from metal to rock or water.
@@ -346,28 +344,28 @@ For now, they bump and slide against one another when their paths cross. We'll
 address this in the next part.
 
 .. |image0| image:: img/05.spawning_mobs/01.monsters_path_preview.png
-.. |image1| image:: img/05.spawning_mobs/02.project_settings.png
+.. |image1| image:: img/05.spawning_mobs/02.project_settings.webp
 .. |image2| image:: img/05.spawning_mobs/03.window_settings.webp
 .. |image3| image:: img/05.spawning_mobs/04.camera_preview.png
-.. |image4| image:: img/05.spawning_mobs/05.cylinders_node.png
-.. |image5| image:: img/05.spawning_mobs/06.cylinder_mesh.png
-.. |image6| image:: img/05.spawning_mobs/07.top_view.png
-.. |image7| image:: img/05.spawning_mobs/08.toggle_view_grid.png
-.. |image8| image:: img/05.spawning_mobs/09.toggle_grid_snap.png
+.. |image4| image:: img/05.spawning_mobs/05.cylinders_node.webp
+.. |image5| image:: img/05.spawning_mobs/06.cylinder_mesh.webp
+.. |image6| image:: img/05.spawning_mobs/07.top_view.webp
+.. |image7| image:: img/05.spawning_mobs/08.toggle_view_grid.webp
+.. |image8| image:: img/05.spawning_mobs/09.toggle_grid_snap.webp
 .. |image9| image:: img/05.spawning_mobs/10.place_first_cylinder.png
 .. |image10| image:: img/05.spawning_mobs/11.both_cylinders_selected.png
 .. |image11| image:: img/05.spawning_mobs/12.four_cylinders.png
-.. |image12| image:: img/05.spawning_mobs/13.selecting_all_cylinders.png
+.. |image12| image:: img/05.spawning_mobs/13.selecting_all_cylinders.webp
 .. |image13| image:: img/05.spawning_mobs/14.multi_material_selection.webp
-.. |image14| image:: img/05.spawning_mobs/15.bright-cylinders.png
-.. |image15| image:: img/05.spawning_mobs/16.cylinders_fold.png
-.. |image16| image:: img/05.spawning_mobs/17.points_options.png
-.. |image17| image:: img/05.spawning_mobs/18.close_path.png
+.. |image14| image:: img/05.spawning_mobs/15.bright-cylinders.webp
+.. |image15| image:: img/05.spawning_mobs/16.cylinders_fold.webp
+.. |image16| image:: img/05.spawning_mobs/17.points_options.webp
+.. |image17| image:: img/05.spawning_mobs/18.close_path.webp
 .. |image18| image:: img/05.spawning_mobs/19.path_result.png
-.. |image19| image:: img/05.spawning_mobs/20.spawn_nodes.png
-.. |image20| image:: img/05.spawning_mobs/20.mob_scene_property.png
-.. |image21| image:: img/05.spawning_mobs/21.mob_timer.png
-.. |image22| image:: img/05.spawning_mobs/22.mob_timer_properties.png
-.. |image23| image:: img/05.spawning_mobs/23.timeout_signal.png
+.. |image19| image:: img/05.spawning_mobs/20.spawn_nodes.webp
+.. |image20| image:: img/05.spawning_mobs/20.mob_scene_property.webp
+.. |image21| image:: img/05.spawning_mobs/21.mob_timer.webp
+.. |image22| image:: img/05.spawning_mobs/22.mob_timer_properties.webp
+.. |image23| image:: img/05.spawning_mobs/23.timeout_signal.webp
 .. |image24| image:: img/05.spawning_mobs/24.connect_timer_to_main.webp
 .. |image25| image:: img/05.spawning_mobs/25.spawn_result.png

getting_started/first_3d_game/06.jump_and_squash.rst

@@ -181,17 +181,22 @@ collisions with the floor. To do so, we can use Godot's :ref:`group
 Open the scene ``mob.tscn`` again and select the *Mob* node. Go to the *Node*
 dock on the right to see a list of signals. The *Node* dock has two tabs:
 *Signals*, which you've already used, and *Groups*, which allows you to assign
-tags to nodes.
-
-Click on it to reveal a field where you can write a tag name. Enter "mob" in the
-field and click the *Add* button.
+tags to nodes. Click on the *+* button to open the *Create new Group* dialog.
 
 |image7|
 
+Enter "mob" in the *Name* field and click the *Ok* button.
+
+|image8|
+
+The "mob" group is now shown under the *Scene Groups* section.
+
+|image9|
+
 An icon appears in the *Scene* dock to indicate the node is part of at least one
 group.
 
-|image8|
+|image10|
 
 We can now use the group from the code to distinguish collisions with monsters
 from collisions with the floor.
@@ -367,12 +372,14 @@ With that, you should be able to kill monsters by jumping on them. You can press
 
 However, the player won't die yet. We'll work on that in the next part.
 
-.. |image0| image:: img/06.jump_and_squash/02.project_settings.png
+.. |image0| image:: img/06.jump_and_squash/02.project_settings.webp
 .. |image1| image:: img/06.jump_and_squash/03.physics_layers.webp
 .. |image2| image:: img/06.jump_and_squash/04.default_physics_properties.webp
 .. |image3| image:: img/06.jump_and_squash/05.toggle_layer_and_mask.webp
-.. |image4| image:: img/06.jump_and_squash/06.named_checkboxes.png
+.. |image4| image:: img/06.jump_and_squash/06.named_checkboxes.webp
 .. |image5| image:: img/06.jump_and_squash/07.player_physics_mask.webp
 .. |image6| image:: img/06.jump_and_squash/08.mob_physics_mask.webp
-.. |image7| image:: img/06.jump_and_squash/09.groups_tab.png
-.. |image8| image:: img/06.jump_and_squash/10.group_scene_icon.png
+.. |image7| image:: img/06.jump_and_squash/09.groups_tab.webp
+.. |image8| image:: img/06.jump_and_squash/10.group_create_new.webp
+.. |image9| image:: img/06.jump_and_squash/11.group_scene_groups.webp
+.. |image10| image:: img/06.jump_and_squash/12.group_scene_icon.webp

getting_started/first_3d_game/07.killing_player.rst

@@ -511,9 +511,9 @@ Finally, the longest script, ``player.gd``:
 
 See you in the next lesson to add the score and the retry option.
 
-.. |image0| image:: img/07.killing_player/01.adding_area_node.png
-.. |image1| image:: img/07.killing_player/02.cylinder_shape.png
+.. |image0| image:: img/07.killing_player/01.adding_area_node.webp
+.. |image1| image:: img/07.killing_player/02.cylinder_shape.webp
 .. |image2| image:: img/07.killing_player/03.cylinder_in_editor.png
 .. |image3| image:: img/07.killing_player/04.mob_detector_properties.webp
-.. |image4| image:: img/07.killing_player/05.body_entered_signal.png
-.. |image5| image:: img/07.killing_player/06.player_hit_signal.png
+.. |image4| image:: img/07.killing_player/05.body_entered_signal.webp
+.. |image5| image:: img/07.killing_player/06.player_hit_signal.webp

getting_started/first_3d_game/09.adding_animations.rst

@@ -56,17 +56,15 @@ nodes.
 
 Set the animation duration to ``1.2`` seconds in the top-right of the dock.
 
-|image7|
-
 You should see the gray ribbon widen a bit. It shows you the start and end of
 your animation and the vertical blue line is your time cursor.
 
-|image8|
+|image7|
 
 You can click and drag the slider in the bottom-right to zoom in and out of the
 timeline.
 
-|image9|
+|image8|
 
 The float animation
 -------------------
@@ -82,7 +80,7 @@ rotation of the ``Character`` node.
 
 Select the ``Character`` and in the *Inspector* expand the *Transform* section. Click the key icon next to *Position*, and *Rotation*.
 
-|image10|
+|image9|
 
 .. image:: img/09.adding_animations/curves.webp
 
@@ -90,15 +88,15 @@ For this tutorial, just create RESET Track(s) which is the default choice
 
 Two tracks appear in the editor with a diamond icon representing each keyframe.
 
-|image11|
+|image10|
 
 You can click and drag on the diamonds to move them in time. Move the
 position key to ``0.3`` seconds and the rotation key to ``0.1`` seconds.
 
-|image12|
+|image11|
 
 Move the time cursor to ``0.5`` seconds by clicking and dragging on the gray
-timeline.
+timeline, or by entering it into the input field.
 
 |timeline_05_click|
 
@@ -108,7 +106,7 @@ In the *Inspector*, set the *Position*'s *Y* axis to ``0.65`` meters and the
 If you don't see the properties in the *Inspector* panel, first click on the
 ``Character`` node again in the *Scene* dock.
 
-|image13|
+|image12|
 
 Create a keyframe for both properties
 
@@ -117,7 +115,7 @@ Create a keyframe for both properties
 Now, move the position keyframe to ``0.7``
 seconds by dragging it on the timeline.
 
-|image14|
+|image13|
 
 .. note::
 
@@ -136,7 +134,7 @@ create a key for both properties.
 You can preview the result by clicking the play button or pressing :kbd:`Shift + D`.
 Click the stop button or press :kbd:`S` to stop playback.
 
-|image15|
+|image14|
 
 You can see that the engine interpolates between your keyframes to produce a
 continuous animation. At the moment, though, the motion feels very robotic. This
@@ -147,33 +145,33 @@ We can control the transition between keyframes using easing curves.
 
 Click and drag around the first two keys in the timeline to box select them.
 
-|image16|
+|image15|
 
 You can edit the properties of both keys simultaneously in the *Inspector*,
 where you can see an *Easing* property.
 
-|image17|
+|image16|
 
 Click and drag on the curve, pulling it towards the left. This will make it
 ease-out, that is to say, transition fast initially and slow down as the time
 cursor reaches the next keyframe.
 
-|image18|
+|image17|
 
 Play the animation again to see the difference. The first half should already
 feel a bit bouncier.
 
 Apply an ease-out to the second keyframe in the rotation track.
 
-|image19|
+|image18|
 
 Do the opposite for the second position keyframe, dragging it to the right.
 
-|image20|
+|image19|
 
 Your animation should look something like this.
 
-|image21|
+|image20|
 
 .. note::
 
@@ -197,7 +195,7 @@ Let's change the animation speed when the character is moving.
 
 Open the ``Player``'s script by clicking the script icon next to it.
 
-|image22|
+|image21|
 
 In ``_physics_process()``, after the line where we check the ``direction``
 vector, add the following code.
@@ -618,26 +616,25 @@ And the *Mob*'s script.
 .. |image0| image:: img/squash-the-creeps-final.gif
 .. |image1| image:: img/09.adding_animations/animation_player_dock.webp
 .. |image2| image:: img/09.adding_animations/02.new_animation.webp
-.. |image3| image:: img/09.adding_animations/03.float_name.png
-.. |image4| image:: img/09.adding_animations/03.timeline.png
-.. |image5| image:: img/09.adding_animations/04.autoplay_and_loop.png
-.. |image6| image:: img/09.adding_animations/05.pin_icon.png
+.. |image3| image:: img/09.adding_animations/03.float_name.webp
+.. |image4| image:: img/09.adding_animations/03.timeline.webp
+.. |image5| image:: img/09.adding_animations/04.autoplay_and_loop.webp
+.. |image6| image:: img/09.adding_animations/05.pin_icon.webp
 .. |image7| image:: img/09.adding_animations/06.animation_duration.webp
-.. |image8| image:: img/09.adding_animations/07.editable_timeline.webp
-.. |image9| image:: img/09.adding_animations/08.zoom_slider.webp
-.. |image10| image:: img/09.adding_animations/09.creating_first_keyframe.webp
-.. |image11| image:: img/09.adding_animations/10.initial_keys.webp
-.. |image12| image:: img/09.adding_animations/11.moving_keys.webp
-.. |image13| image:: img/09.adding_animations/12.second_keys_values.webp
-.. |image14| image:: img/09.adding_animations/13.second_keys.webp
-.. |image15| image:: img/09.adding_animations/14.play_button.png
-.. |image16| image:: img/09.adding_animations/15.box_select.webp
-.. |image17| image:: img/09.adding_animations/16.easing_property.png
-.. |image18| image:: img/09.adding_animations/17.ease_out.png
-.. |image19| image:: img/09.adding_animations/18.ease_out_second_rotation_key.png
-.. |image20| image:: img/09.adding_animations/19.ease_in_second_translation_key.png
-.. |image21| image:: img/09.adding_animations/20.float_animation.gif
-.. |image22| image:: img/09.adding_animations/21.script_icon.png
+.. |image8| image:: img/09.adding_animations/08.zoom_slider.webp
+.. |image9| image:: img/09.adding_animations/09.creating_first_keyframe.webp
+.. |image10| image:: img/09.adding_animations/10.initial_keys.webp
+.. |image11| image:: img/09.adding_animations/11.moving_keys.webp
+.. |image12| image:: img/09.adding_animations/12.second_keys_values.webp
+.. |image13| image:: img/09.adding_animations/13.second_keys.webp
+.. |image14| image:: img/09.adding_animations/14.play_button.webp
+.. |image15| image:: img/09.adding_animations/15.box_select.webp
+.. |image16| image:: img/09.adding_animations/16.easing_property.webp
+.. |image17| image:: img/09.adding_animations/17.ease_out.webp
+.. |image18| image:: img/09.adding_animations/18.ease_out_second_rotation_key.webp
+.. |image19| image:: img/09.adding_animations/19.ease_in_second_translation_key.webp
+.. |image20| image:: img/09.adding_animations/20.float_animation.gif
+.. |image21| image:: img/09.adding_animations/21.script_icon.webp
 .. |animation_final_keyframes| image:: img/09.adding_animations/animation_final_keyframes.webp
 .. |second_keys_both| image:: img/09.adding_animations/second_keys_both.webp
 .. |timeline_05_click| image:: img/09.adding_animations/timeline_05_click.webp