Update majority of images in "Your first 2d game" (#6697)

* Update images in first 2d game

getting_started/first_2d_game/01.project_setup.rst

@@ -39,15 +39,14 @@ Your project folder should look like this.
 This game is designed for portrait mode, so we need to adjust the size of the
 game window. Click on *Project -> Project Settings* to open the project settings
 window and in the left column, open the *Display -> Window* tab. There, set
-"Width" to ``480`` and "Height" to ``720``.
+"Viewport Width" to ``480`` and "Viewport Height" to ``720``.
 
-.. image:: img/setting-project-width-and-height.png
+.. image:: img/setting-project-width-and-height.webp
 
-Also, scroll down to the bottom of the section and, under the **Stretch**
-options, set **Mode** to ``canvas_items`` and **Aspect** to ``keep``. This
-ensures that the game scales consistently on different sized screens.
+Also, under the **Stretch** options, set **Mode** to ``canvas_items`` and **Aspect** to ``keep``.
+This ensures that the game scales consistently on different sized screens.
 
-.. image:: img/setting-stretch-mode.png
+.. image:: img/setting-stretch-mode.webp
 
 Organizing the project
 ~~~~~~~~~~~~~~~~~~~~~~
@@ -60,6 +59,6 @@ scenes and their scripts, but for this relatively small game, you can save your
 scenes and scripts in the project's root folder, identified by ``res://``. You
 can see your project folders in the FileSystem dock in the lower left corner:
 
-.. image:: img/filesystem_dock.png
+.. image:: img/filesystem_dock.webp
 
 With the project in place, we're ready to design the player scene in the next lesson.

getting_started/first_2d_game/02.player_scene.rst

@@ -18,7 +18,7 @@ rule, a scene's root node should reflect the object's desired functionality -
 what the object *is*. Click the "Other Node" button and add an :ref:`Area2D
 <class_Area2D>` node to the scene.
 
-.. image:: img/add_node.png
+.. image:: img/add_node.webp
 
 Godot will display a warning icon next to the node in the scene tree. You can
 ignore it for now. We will address it later.
@@ -30,10 +30,10 @@ functionality.
 
 Before we add any children to the ``Player`` node, we want to make sure we don't
 accidentally move or resize them by clicking on them. Select the node and click
-the icon to the right of the lock; its tooltip says "Makes sure the object's
-children are not selectable."
+the icon to the right of the lock. Its tooltip says "Make selected node's
+children not selectable."
 
-.. image:: img/lock_children.png
+.. image:: img/lock_children.webp
 
 Save the scene. Click Scene -> Save, or press :kbd:`Ctrl + S` on Windows/Linux
 or :kbd:`Cmd + S` on macOS.
@@ -58,10 +58,10 @@ Click on the ``Player`` node and add (:kbd:`Ctrl + A`) a child node :ref:`Animat
 appearance and animations for our player. Notice that there is a warning symbol
 next to the node. An ``AnimatedSprite2D`` requires a :ref:`SpriteFrames
 <class_SpriteFrames>` resource, which is a list of the animations it can
-display. To create one, find the ``Frames`` property in the Inspector and click
+display. To create one, find the ``Sprite Frames`` property in the Inspector and click
 "[empty]" -> "New SpriteFrames". Click again to open the "SpriteFrames" panel:
 
-.. image:: img/spriteframes_panel.png
+.. image:: img/spriteframes_panel.webp
 
 
 On the left is a list of animations. Click the "default" one and rename it to
@@ -71,14 +71,14 @@ folder you unzipped earlier. Drag the two images for each animation, named
 ``playerGrey_up[1/2]`` and ``playerGrey_walk[1/2]``, into the "Animation Frames"
 side of the panel for the corresponding animation:
 
-.. image:: img/spriteframes_panel2.png
+.. image:: img/spriteframes_panel2.webp
 
 The player images are a bit too large for the game window, so we need to scale
 them down. Click on the ``AnimatedSprite2D`` node and set the ``Scale`` property
 to ``(0.5, 0.5)``. You can find it in the Inspector under the ``Node2D``
 heading.
 
-.. image:: img/player_scale.png
+.. image:: img/player_scale.webp
 
 Finally, add a :ref:`CollisionShape2D <class_CollisionShape2D>` as a child of
 ``Player``. This will determine the player's "hitbox", or the bounds of its
@@ -91,7 +91,7 @@ sprite:
 
 When you're finished, your ``Player`` scene should look like this:
 
-.. image:: img/player_scene_nodes.png
+.. image:: img/player_scene_nodes.webp
 
 Make sure to save the scene again after these changes.
 

getting_started/first_2d_game/03.coding_the_player.rst

@@ -10,7 +10,7 @@ To do so, we need to add some functionality that we can't get from a built-in
 node, so we'll add a script. Click the ``Player`` node and click the "Attach
 Script" button:
 
-.. image:: img/add_script_button.png
+.. image:: img/add_script_button.webp
 
 In the script settings window, you can leave the default settings alone. Just
 click "Create":
@@ -18,7 +18,7 @@ click "Create":
 .. note:: If you're creating a C# script or other languages, select the language
           from the `language` drop down menu before hitting create.
 
-.. image:: img/attach_node_window.png
+.. image:: img/attach_node_window.webp
 
 .. note:: If this is your first time encountering GDScript, please read
           :ref:`doc_scripting` before continuing.
@@ -75,7 +75,7 @@ Start by declaring the member variables this object will need:
         void _ready();
         void _process(const double p_delta);
         void start(const godot::Vector2 p_position);
-        void _on_Player_body_entered(godot::Node2D *_body);
+        void _on_body_entered(godot::Node2D *_body);
 
         static void _register_methods();
     };
@@ -95,7 +95,7 @@ value written in the script.
              bottom of the editor window to reveal the Mono Panel, then clicking
              the "Build Project" button.
 
-.. image:: img/export_variable.png
+.. image:: img/export_variable.webp
 
 The ``_ready()`` function is called when a node enters the scene tree, which is
 a good time to find the size of the game window:
@@ -144,13 +144,19 @@ Click on *Project -> Project Settings* to open the project settings window and
 click on the *Input Map* tab at the top. Type "move_right" in the top bar and
 click the "Add" button to add the ``move_right`` action.
 
-.. image:: img/input-mapping-add-action.png
+.. image:: img/input-mapping-add-action.webp
 
-We need to assign a key to this action. Click the "+" icon on the right, then
-click the "Key" option in the drop-down menu. A dialog asks you to type in the
-desired key. Press the right arrow on your keyboard and click "Ok".
+We need to assign a key to this action. Click the "+" icon on the right, to
+open the event manager window.
 
-.. image:: img/input-mapping-add-key.png
+.. image:: img/input-mapping-add-key.webp
+
+The "Listening for Input..." field should automatically be selected.
+Press the "right" key on your keyboard, and the menu should look like this now.
+
+.. image:: img/input-mapping-event-configuration.webp
+
+Select the "ok" button. The "right" key is now associated with the ``move_right`` action.
 
 Repeat these steps to add three more mappings:
 
@@ -160,7 +166,7 @@ Repeat these steps to add three more mappings:
 
 Your input map tab should look like this:
 
-.. image:: img/input-mapping-completed.png
+.. image:: img/input-mapping-completed.webp
 
 Click the "Close" button to close the project settings.
 
@@ -425,7 +431,7 @@ enemies yet! That's OK, because we're going to use Godot's *signal*
 functionality to make it work.
 
 Add the following at the top of the script. If you're using GDScript, add it after
-``extends Area2D``. If you're using C#, add it after ``public class Player : Area2D {``:
+``extends Area2D``. If you're using C#, add it after ``public partial class Player : Area2D``:
 
 .. tabs::
  .. code-tab:: gdscript GDScript
@@ -448,7 +454,7 @@ Add the following at the top of the script. If you're using GDScript, add it aft
         godot::register_method("_ready", &Player::_ready);
         godot::register_method("_process", &Player::_process);
         godot::register_method("start", &Player::start);
-        godot::register_method("_on_Player_body_entered", &Player::_on_Player_body_entered);
+        godot::register_method("_on_body_entered", &Player::_on_body_entered);
         godot::register_property("speed", &Player::speed, (real_t)400.0);
         // This below line is the signal.
         godot::register_signal<Player>("hit", godot::Dictionary());
@@ -459,7 +465,7 @@ This defines a custom signal called "hit" that we will have our player emit
 collision. Select the ``Player`` node and click the "Node" tab next to the
 Inspector tab to see the list of signals the player can emit:
 
-.. image:: img/player_signals.png
+.. image:: img/player_signals.webp
 
 Notice our custom "hit" signal is there as well! Since our enemies are going to
 be ``RigidBody2D`` nodes, we want the ``body_entered(body: Node)`` signal. This
@@ -468,7 +474,7 @@ the "Connect a Signal" window appears. We don't need to change any of these
 settings so click "Connect" again. Godot will automatically create a function in
 your player's script.
 
-.. image:: img/player_signal_connection.png
+.. image:: img/player_signal_connection.webp
 
 Note the green icon indicating that a signal is connected to this function. Add
 this code to the function:
@@ -476,7 +482,7 @@ this code to the function:
 .. tabs::
  .. code-tab:: gdscript GDScript
 
-    func _on_Player_body_entered(body):
+    func _on_body_entered(body):
         hide() # Player disappears after being hit.
         hit.emit()
         # Must be deferred as we can't change physics properties on a physics callback.
@@ -484,7 +490,7 @@ this code to the function:
 
  .. code-tab:: csharp
 
-    public void OnPlayerBodyEntered(PhysicsBody2D body)
+    public void OnBodyEntered(PhysicsBody2D body)
     {
         Hide(); // Player disappears after being hit.
         EmitSignal(SignalName.Hit);
@@ -495,7 +501,7 @@ this code to the function:
  .. code-tab:: cpp
 
     // This code goes in `player.cpp`.
-    void Player::_on_Player_body_entered(godot::Node2D *_body) {
+    void Player::_on_body_entered(godot::Node2D *_body) {
         hide(); // Player disappears after being hit.
         emit_signal("hit");
         // Must be deferred as we can't change physics properties on a physics callback.

getting_started/first_2d_game/04.creating_the_enemy.rst

@@ -26,10 +26,10 @@ the Player scene.
 
 In the :ref:`RigidBody2D <class_RigidBody2D>` properties, set ``Gravity Scale``
 to ``0``, so the mob will not fall downward. In addition, under the
-:ref:`CollisionObject2D <class_CollisionObject2D>` section, click the ``Mask`` property and uncheck the first
-box. This will ensure the mobs do not collide with each other.
+:ref:`CollisionObject2D <class_CollisionObject2D>` section, uncheck the ``1`` inside the ``Mask`` property.
+This will ensure the mobs do not collide with each other.
 
-.. image:: img/set_collision_mask.png
+.. image:: img/set_collision_mask.webp
 
 Set up the :ref:`AnimatedSprite2D <class_AnimatedSprite2D>` like you did for the
 player. This time, we have 3 animations: ``fly``, ``swim``, and ``walk``. There

getting_started/first_2d_game/05.the_main_game_scene.rst

@@ -12,7 +12,7 @@ be a container for handling game logic. It does not require 2D functionality its
 Click the **Instance** button (represented by a chain link icon) and select your saved
 ``Player.tscn``.
 
-.. image:: img/instance_scene.png
+.. image:: img/instance_scene.webp
 
 Now, add the following nodes as children of ``Main``, and name them as shown
 (values are in seconds):
@@ -43,7 +43,7 @@ location on the edge of the screen. Add a :ref:`Path2D <class_Path2D>` node
 named ``MobPath`` as a child of ``Main``. When you select ``Path2D``, you will
 see some new buttons at the top of the editor:
 
-.. image:: img/path2d_buttons.png
+.. image:: img/path2d_buttons.webp
 
 Select the middle one ("Add Point") and draw the path by clicking to add the
 points at the corners shown. To have the points snap to the grid, make sure "Use
@@ -51,7 +51,7 @@ Grid Snap" and "Use Smart Snap" are both selected. These options can be found to
 left of the "Lock" button, appearing as a magnet next to some dots and
 intersecting lines, respectively.
 
-.. image:: img/grid_snap_button.png
+.. image:: img/grid_snap_button.webp
 
 .. important:: Draw the path in *clockwise* order, or your mobs will spawn
                pointing *outwards* instead of *inwards*!
@@ -68,7 +68,7 @@ a random position and direction along the path.
 
 Your scene should look like this:
 
-.. image:: img/main_scene_nodes.png
+.. image:: img/main_scene_nodes.webp
 
 Main script
 ~~~~~~~~~~~

getting_started/first_2d_game/06.heads_up_display.rst

@@ -36,14 +36,9 @@ Inspector. The default font for ``Control`` nodes is small and doesn't scale
 well. There is a font file included in the game assets called
 "Xolonium-Regular.ttf". To use this font, do the following:
 
-1. Under "Theme Overrides > Fonts", choose "New Font".
+1. Under "Theme Overrides > Fonts", choose "Load" and select the "Xolonium-Regular.ttf" file.
 
-.. image:: img/custom_font1.png
-
-2. Click on the "Font" you added, and under "Font/Data/0",
-   choose "Load" and select the "Xolonium-Regular.ttf" file.
-
-.. image:: img/custom_font2.png
+.. image:: img/custom_font_load_font.webp
 
 Once you've done this on the ``ScoreLabel``, you can click the down arrow next
 to the Font property and choose "Copy", then "Paste" it in the same place
@@ -51,7 +46,7 @@ on the other two Control nodes.
 Set the "Font Size" property of the ``ScoreLabel`` under "Theme Overrides > Font Sizes".
 A setting of ``64`` works well.
 
-.. image:: img/custom_font3.png
+.. image:: img/custom_font_size.webp
 
 .. note:: **Anchors and Margins:** ``Control`` nodes have a position and size,
           but they also have anchors and margins. Anchors define the origin -
@@ -338,7 +333,7 @@ Now that we're done creating the ``HUD`` scene, go back to ``Main``. Instance
 the ``HUD`` scene in ``Main`` like you did the ``Player`` scene. The scene tree
 should look like this, so make sure you didn't miss anything:
 
-.. image:: img/completed_main_scene.png
+.. image:: img/completed_main_scene.webp
 
 Now we need to connect the ``HUD`` functionality to our ``Main`` script. This
 requires a few additions to the ``Main`` scene:
@@ -413,7 +408,7 @@ In the ``Mob`` scene, select the root node and click the "Node" tab next to the
 Inspector (the same place where you find the node's signals). Next to "Signals",
 click "Groups" and you can type a new group name and click "Add".
 
-.. image:: img/group_tab.png
+.. image:: img/group_tab.webp
 
 Now all mobs will be in the "mobs" group. We can then add the following line to
 the ``new_game()`` function in ``Main``: