update images and outdated properties

getting_started/first_2d_game/01.project_setup.rst

@@ -7,7 +7,7 @@ In this short first part, we'll set up and organize the project.
 
 Launch Godot and create a new project.
 
-.. image:: img/new-project-button.png
+.. image:: img/new-project-button.webp
 
 .. tabs::
  .. tab:: GDScript

getting_started/first_2d_game/02.player_scene.rst

@@ -87,7 +87,7 @@ fit, so next to "Shape" in the Inspector, click "[empty]" -> "New
 CapsuleShape2D". Using the two size handles, resize the shape to cover the
 sprite:
 
-.. image:: img/player_coll_shape.png
+.. image:: img/player_coll_shape.webp
 
 When you're finished, your ``Player`` scene should look like this:
 

getting_started/first_2d_game/04.creating_the_enemy.rst

@@ -35,11 +35,11 @@ Set up the :ref:`AnimatedSprite2D <class_AnimatedSprite2D>` like you did for the
 player. This time, we have 3 animations: ``fly``, ``swim``, and ``walk``. There
 are two images for each animation in the art folder.
 
-Adjust the "Speed (FPS)" to ``3`` for all animations.
+The ``Animation Speed`` property has to be set for each individual animation. Adjust it to ``3`` for all 3 animations.
 
-.. image:: img/mob_animations.gif
+.. image:: img/mob_animations.webp
 
-Set the ``Playing`` property in the Inspector to "On".
+You can use the "Play Animation" buttons on the right of the ``Animation Speed`` input field to preview your animations.
 
 We'll select one of these animations randomly so that the mobs will have some
 variety.

getting_started/first_2d_game/06.heads_up_display.rst

@@ -48,44 +48,54 @@ A setting of ``64`` works well.
 
 .. 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 -
-          the reference point for the edges of the node. Margins update
-          automatically when you move or resize a control node. They represent
-          the distance from the control node's edges to its anchor.
-
-Arrange the nodes as shown below. Click the "Layout" button to set a Control
-node's layout:
-
-.. image:: img/ui_anchor.png
+.. note:: **Anchors:** ``Control`` nodes have a position and size,
+          but they also have anchors. Anchors define the origin -
+          the reference point for the edges of the node.
 
+Arrange the nodes as shown below.
 You can drag the nodes to place them manually, or for more precise placement,
-use the following settings:
+use "Anchor Presets" with the following settings:
+
+.. image:: img/ui_anchor.webp
 
 ScoreLabel
 ~~~~~~~~~~
 
--  *Layout* : "Top Wide"
--  *Text* : ``0``
--  *Alignment* : "Center"
+Layout :
+
+-  Anchor Preset : ``Center Top``
+
+Label settings :
+
+-  Text : ``0``
+-  Horizontal Alignment : ``Center``
+-  Vertical Alignment : ``Center``
 
 Message
 ~~~~~~~~~~~~
 
--  *Layout* : "HCenter Wide"
--  *Text* : ``Dodge the Creeps!``
--  *Alignment* : "Center"
--  *Autowrap* : "On"
+Layout :
+
+-  Anchor Preset : ``Center``
+
+Label settings :
+
+-  Text : ``Dodge the Creeps!``
+-  Horizontal Alignment : ``Center``
+-  Vertical Alignment : ``Center``
+-  Autowrap Mode : ``Word``
 
 StartButton
 ~~~~~~~~~~~
 
--  *Text* : ``Start``
--  *Layout* : "Center Bottom"
--  *Margin* :
+Layout :
 
-   -  Top: ``-200``
-   -  Bottom: ``-100``
+-  Anchor Preset : ``Center Bottom``
+
+Button settings :
+
+-  Text : ``Start``
+-  Position Y : ``580`` (Control - Layout/Transform)
 
 On the ``MessageTimer``, set the ``Wait Time`` to ``2`` and set the ``One Shot``
 property to "On".

getting_started/first_2d_game/07.finishing-up.rst

@@ -53,13 +53,15 @@ tab. In the same way you created the movement input actions, create a new
 input action called ``start_game`` and add a key mapping for the :kbd:`Enter`
 key.
 
-In the ``HUD`` scene, select the ``StartButton`` and find its *Shortcut*
-property in the Inspector. Select "New Shortcut" and click on the "Shortcut"
-item. A second *Shortcut* property will appear. Select "New InputEventAction"
-and click the new "InputEventAction". Finally, in the *Action* property, type
-the name ``start_game``.
+In the ``HUD`` scene, select the ``StartButton`` and find its **Shortcut**
+property in the Inspector. Create a new :ref:`Shortcut <class_Shortcut>` resource,
+open the **Events** array and add a new array element to it.
 
-.. image:: img/start_button_shortcut.png
+.. image:: img/start_button_shortcut.webp
+
+Create a new :ref:`InputEventAction <class_InputEventAction>` and name it ``start_game``.
+
+.. image:: img/start_button_shortcut2.webp
 
 Now when the start button appears, you can either click it or press :kbd:`Enter`
 to start the game.