Update some screenshots in the Scripting section for Godot 4 (#6851)

tutorials/scripting/creating_script_templates.rst

@@ -6,7 +6,7 @@ Creating script templates
 Godot provides a way to use script templates as seen in the
 ``Script Create Dialog`` while creating a new script:
 
-.. image:: img/script_create_dialog_templates.png
+.. image:: img/script_create_dialog_templates.webp
 
 A set of built-in script templates are provided with the editor, but it is
 also possible to create new ones and set them by default, both per project
@@ -107,7 +107,7 @@ it will be set as the default template for the node in which directory it has be
 
 This is an example of utilizing custom templates at editor and project level:
 
-.. image:: img/script_create_dialog_custom_templates.png
+.. image:: img/script_create_dialog_custom_templates.webp
 
 .. note:: The script templates have the same extension as the regular script
           files. This may lead to an issue of a script parser treating those templates as

tutorials/scripting/gdscript/static_typing.rst

@@ -59,14 +59,14 @@ options for a class called ``PlayerController``.
 You've probably stored a node in a variable before, and typed a dot to
 be left with no autocomplete suggestions:
 
-.. figure:: img/typed_gdscript_code_completion_dynamic.png
+.. figure:: img/typed_gdscript_code_completion_dynamic.webp
    :alt: code completion options for dynamic
 
 This is due to dynamic code. Godot cannot know what node or value type
 you're passing to the function. If you write the type explicitly
 however, you will get all public methods and variables from the node:
 
-.. figure:: img/typed_gdscript_code_completion_typed.png
+.. figure:: img/typed_gdscript_code_completion_typed.webp
    :alt: code completion options for typed
 
 In the future, typed GDScript will also increase code performance:
@@ -202,7 +202,7 @@ node: ``($Timer as Timer)``, ``($Player as CharacterBody2D)``, etc.
 Godot will ensure the type works and if so, the line number will turn
 green at the left of the script editor.
 
-.. figure:: img/typed_gdscript_safe_unsafe_line.png
+.. figure:: img/typed_gdscript_safe_unsafe_line.webp
    :alt: Unsafe vs Safe Line
 
    Unsafe line (line 7) vs Safe Lines (line 6 and 8)

tutorials/scripting/gdscript/warning_system.rst

@@ -9,13 +9,17 @@ mistakes that are hard to spot during development, and that may lead
 to runtime errors.
 
 You can configure warnings in the Project Settings under the section
-called **Gdscript**:
+called **GDScript**:
 
-.. figure:: img/typed_gdscript_warning_system_settings.png
+.. figure:: img/typed_gdscript_warning_system_settings.webp
    :alt: Warning system project settings
 
    Warning system project settings
 
+.. note::
+
+   As shown in the image above, you must enable **Advanced Settings** in order to see the GDScript section.
+
 You can find a list of warnings for the active GDScript file in the
 script editor's status bar. The example below has 3 warnings:
 

tutorials/scripting/groups.rst

@@ -32,27 +32,27 @@ Using the Node dock
 You can add nodes in the current scene to groups using the Groups tab in the
 Node dock.
 
-.. image:: img/groups_node_tab.png
+.. image:: img/groups_node_tab.webp
 
 Select one or more nodes in the Scene dock and write the group name in the
 field, then click Add.
 
-.. image:: img/groups_add_node_to_group.png
+.. image:: img/groups_add_node_to_group.webp
 
 You should now see the group appear.
 
-.. image:: img/groups_node_after_adding.png
+.. image:: img/groups_node_after_adding.webp
 
 In a complex project, you may end up with many groups or large scenes with many
 nodes. You can add or remove any node to groups using the Group Editor window.
 To access it, click the Manage Groups button.
 
-.. image:: img/groups_manage_groups_button.png
+.. image:: img/groups_manage_groups_button.webp
 
 The Group Editor window appears. Here's a screenshot from a complex project to
 illustrate the tool's purpose.
 
-.. image:: img/groups_group_editor_window.png
+.. image:: img/groups_group_editor_window.webp
 
 It has three columns:
 

tutorials/scripting/how_to_read_the_godot_api.rst

@@ -12,7 +12,7 @@ related to each other, what features they have, and how to use them.
 Inheritance
 -----------
 
-.. image:: img/class_api_inheritance.png
+.. image:: img/class_api_inheritance.webp
 
 At the top of each file, you will see the name of the class.
 
@@ -25,7 +25,7 @@ current class. Here ``Control`` and ``Node2D`` both inherit ``CanvasItem``.
 Brief Description
 -----------------
 
-.. image:: img/class_api_brief_description.png
+.. image:: img/class_api_brief_description.webp
 
 Next a brief description of the class. This text appears in Godot Editor
 popups for creating Nodes, Resources, and other types.
@@ -33,7 +33,7 @@ popups for creating Nodes, Resources, and other types.
 Description
 -----------
 
-.. image:: img/class_api_description.png
+.. image:: img/class_api_description.webp
 
 Next a more detailed description the class, its features, and its use case(s).
 
@@ -52,7 +52,7 @@ Things you may find here:
 Tutorials
 ---------
 
-.. image:: img/class_api_tutorials.png
+.. image:: img/class_api_tutorials.webp
 
 The page then provides links to parts of the manual which mention or make use
 of the current class.
@@ -60,7 +60,7 @@ of the current class.
 Properties
 ----------
 
-.. image:: img/class_api_properties_table.png
+.. image:: img/class_api_properties_table.webp
 
 The Properties table lists the variables which belong to each instance of the
 class, also known as the "properties."
@@ -79,7 +79,7 @@ Inspector.
 Methods
 -------
 
-.. image:: img/class_api_methods_table.png
+.. image:: img/class_api_methods_table.webp
 
 The Methods table lists the functions which belong to each instance of the
 class, also known as the "methods."
@@ -102,7 +102,7 @@ Possible qualifiers include...
 Signals
 -------
 
-.. image:: img/class_api_signals.png
+.. image:: img/class_api_signals.webp
 
 The Signals list details the names and parameters of events which "signal" a
 change in game state to other class instances.
@@ -114,7 +114,7 @@ Each signal also has a detailed explanation of when the signal is emitted.
 Enumerations
 ------------
 
-.. image:: img/class_api_enumerations.png
+.. image:: img/class_api_enumerations.webp
 
 The Enumerations list details the enumerable data types associated with the
 current class.
@@ -128,7 +128,7 @@ an explanation of its use case(s) and/or affects.
 Constants
 ---------
 
-.. image:: img/class_api_constants.png
+.. image:: img/class_api_constants.webp
 
 The Constants list details named integer constants in the current class.
 
@@ -141,7 +141,7 @@ triggers the notification.
 Property Descriptions
 ---------------------
 
-.. image:: img/class_api_property_descriptions.png
+.. image:: img/class_api_property_descriptions.webp
 
 The Property Descriptions list details everything about each property.
 
@@ -160,7 +160,7 @@ and/or links to relevant parts of the Godot API.
 Method Descriptions
 -------------------
 
-.. image:: img/class_api_method_descriptions.png
+.. image:: img/class_api_method_descriptions.webp
 
 The Method Descriptions list details everything about each method.
 

tutorials/scripting/nodes_and_scene_instances.rst

@@ -17,7 +17,7 @@ guarantees that.
 If, for example,  you have a scene tree like this, and you want to get a reference to the
 Sprite2D and Camera2D nodes to access them in your script.
 
-.. image:: img/nodes_and_scene_instances_player_scene_example.png
+.. image:: img/nodes_and_scene_instances_player_scene_example.webp
 
 To do so, you can use the following code.
 
@@ -28,7 +28,7 @@ To do so, you can use the following code.
     var camera2d
 
     func _ready():
-        sprite2d = get_node("Sprite")
+        sprite2d = get_node("Sprite2D")
         camera2d = get_node("Camera2D")
 
  .. code-tab:: csharp
@@ -40,19 +40,19 @@ To do so, you can use the following code.
     {
         base._Ready();
 
-        _sprite2D = GetNode<Sprite2D>("Sprite");
+        _sprite2D = GetNode<Sprite2D>("Sprite2D");
         _camera2D = GetNode<Camera2D>("Camera2D");
     }
 
 Note that you get nodes using their name, not their type. Above, "Sprite2D" and
 "Camera2D" are the nodes' names in the scene.
 
-.. image:: img/nodes_and_scene_instances_sprite_node.png
+.. image:: img/nodes_and_scene_instances_sprite_node.webp
 
 If you rename the Sprite2D node as Skin in the Scene dock, you have to change the
 line that gets the node to ``get_node("Skin")`` in the script.
 
-.. image:: img/nodes_and_scene_instances_sprite_node_renamed.png
+.. image:: img/nodes_and_scene_instances_sprite_node_renamed.webp
 
 Node paths
 ----------
@@ -64,27 +64,27 @@ separate nodes.
 Take the following example scene, with the script attached to the UserInterface
 node.
 
-.. image:: img/nodes_and_scene_instances_ui_scene_example.png
+.. image:: img/nodes_and_scene_instances_ui_scene_example.webp
 
-To get the Tween node, you would use the following code.
+To get the AnimationPlayer node, you would use the following code.
 
 .. tabs::
  .. code-tab:: gdscript GDScript
 
-    var tween
+    var animation_player
 
     func _ready():
-        tween = get_node("ShieldBar/Tween")
+        animation_player = get_node("ShieldBar/AnimationPlayer")
 
  .. code-tab:: csharp
 
-    private Tween _tween;
+    private AnimationPlayer _animationPlayer;
 
     public override void _Ready()
     {
         base._Ready();
 
-        _tween = GetNode<Tween>("ShieldBar/Tween");
+        _animationPlayer = GetNode<AnimationPlayer>("ShieldBar/AnimationPlayer");
     }
 
 .. note:: As with file paths, you can use ".." to get a parent node. The best
@@ -110,7 +110,7 @@ place it before the name or path of the node you want to get.
 .. code-block:: gdscript
 
     @onready var sprite2d = $Sprite2D
-    @onready var tween = $ShieldBar/Tween
+    @onready var animation_player = $ShieldBar/AnimationPlayer
 
 Creating nodes
 --------------
@@ -159,12 +159,12 @@ the scene and frees the object in memory.
 
 Before calling ``sprite2d.queue_free()``, the remote scene tree looks like this.
 
-.. image:: img/nodes_and_scene_instances_remote_tree_with_sprite.png
+.. image:: img/nodes_and_scene_instances_remote_tree_with_sprite.webp
 
 After the engine freed the node, the remote scene tree doesn't display the
 sprite anymore.
 
-.. image:: img/nodes_and_scene_instances_remote_tree_no_sprite.png
+.. image:: img/nodes_and_scene_instances_remote_tree_no_sprite.webp
 
 You can alternatively call ``free()`` to immediately destroy the node. You
 should do this with care as any reference to it will instantly become ``null``.

tutorials/scripting/pausing_games.rst

@@ -40,7 +40,7 @@ Process Modes
 Each node in Godot has a "Process Mode" that defines when it processes. It can
 be found and changed under a node's :ref:`Node <class_Node>` properties in the inspector.
 
-.. image:: img/pausemode.png
+.. image:: img/pausemode.webp
 
 You can also alter the property with code:
 

tutorials/scripting/resources.rst

@@ -37,7 +37,7 @@ types of Properties, like String, integer, Vector2, etc., and any of these types
 can become a resource. This means that both nodes and resources can contain
 resources as properties:
 
-.. image:: img/nodes_resources.png
+.. image:: img/nodes_resources.webp
 
 External vs built-in
 --------------------
@@ -50,11 +50,11 @@ There are two ways to save resources. They can be:
 To be more specific, here's a :ref:`Texture2D <class_Texture2D>`
 in a :ref:`Sprite2D <class_Sprite2D>` node:
 
-.. image:: img/spriteprop.png
+.. image:: img/spriteprop.webp
 
-Clicking the resource preview allows us to view and edit the resource's properties.
+Clicking the resource preview allows us to view the resource's properties.
 
-.. image:: img/resourcerobi.png
+.. image:: img/resourcerobi.webp
 
 The path property tells us where the resource comes from. In this case, it comes
 from a PNG image called ``robi.png``. When the resource comes from a file like

tutorials/scripting/scene_tree.rst

@@ -95,7 +95,7 @@ viewport, it becomes part of the *scene tree*.
 This means that as explained in previous tutorials, it will get the
 ``_enter_tree()`` and ``_ready()`` callbacks (as well as ``_exit_tree()``).
 
-.. image:: img/activescene.png
+.. image:: img/activescene.webp
 
 When nodes enter the *Scene Tree*, they become active. They get access
 to everything they need to process, get input, display 2D and 3D visuals,
@@ -113,7 +113,7 @@ on. However, children of a node will get called before their parent, also
 in top to bottom order. So the top child node of the top node will get its
 ``_ready()`` function called first.
 
-.. image:: img/toptobottom.png
+.. image:: img/toptobottom.webp
 
 This can also be overridden using the ``process_priority`` node property.
 Nodes with a lower number are called first. For example, nodes with the

tutorials/scripting/scene_unique_nodes.rst

@@ -21,12 +21,12 @@ Creation and usage
 In the Scene tree dock, right-click on a node and select
 **Access as Unique Name** in the context menu.
 
-.. image:: img/unique_name.png
+.. image:: img/unique_name.webp
 
 After selecting the option, the node will now have a percent symbol (**%**) next
 to its name in the scene tree:
 
-.. image:: img/percent.png
+.. image:: img/percent.webp
 
 You can now use the node in your script. For example, you can reference it with
 a ``get_node()`` method call by typing the % symbol, followed by the node's
@@ -50,7 +50,7 @@ A scene unique node can only be retrieved by a node inside the same scene. To
 demonstrate this limitation, consider this example **Player** scene that
 instances a **Sword** scene:
 
-.. image:: img/unique_name_scene_instance_example.png
+.. image:: img/unique_name_scene_instance_example.webp
 
 Here are the results of ``get_node()`` calls inside the **Player** script:
 

tutorials/scripting/singletons_autoload.rst

@@ -58,12 +58,12 @@ You can create an AutoLoad to load a scene or a script that inherits from
     attached to it. This node will be added to the root viewport before any
     other scenes are loaded.
 
-.. image:: img/singleton.png
+.. image:: img/singleton.webp
 
 To autoload a scene or script, select **Project > Project Settings** from the
 menu and switch to the **AutoLoad** tab.
 
-.. image:: img/autoload_tab.png
+.. image:: img/autoload_tab.webp
 
 Here you can add any number of scenes or scripts. Each entry in the list
 requires a name, which is assigned as the node's ``name`` property. The order of
@@ -71,7 +71,7 @@ the entries as they are added to the global scene tree can be manipulated using
 the up/down arrow keys. Like regular scenes, the engine will read these nodes
 in top-to-bottom order.
 
-.. image:: img/autoload_example.png
+.. image:: img/autoload_example.webp
 
 This means that any node can access a singleton named "PlayerVariables" with:
 
@@ -103,7 +103,7 @@ Note that autoload objects (scripts and/or scenes) are accessed just like any
 other node in the scene tree. In fact, if you look at the running scene tree,
 you'll see the autoloaded nodes appear:
 
-.. image:: img/autoload_runtime.png
+.. image:: img/autoload_runtime.webp
 
 .. warning::
 
@@ -127,26 +127,26 @@ scene contains a label displaying the scene name and a button with its
 ``pressed()`` signal connected. When you run the project, it starts in
 ``Scene1.tscn``. However, pressing the button does nothing.
 
-Global.gd
-~~~~~~~~~
+Creating the script
+~~~~~~~~~~~~~~~~~~~~~
 
-Switch to the **Script** tab and create a new script called ``Global.gd``.
+Open the **Script** window and create a new script called ``global.gd``.
 Make sure it inherits from ``Node``:
 
-.. image:: img/autoload_script.png
+.. image:: img/autoload_script.webp
 
 The next step is to add this script to the autoLoad list. Open
 **Project > Project Settings** from the menu, switch to the **AutoLoad** tab and
 select the script by clicking the browse button or typing its path:
-``res://Global.gd``. Press **Add** to add it to the autoload list:
+``res://global.gd``. Press **Add** to add it to the autoload list:
 
-.. image:: img/autoload_tutorial1.png
+.. image:: img/autoload_tutorial1.webp
 
 Now whenever we run any scene in the project, this script will always be loaded.
 
 Returning to the script, it needs to fetch the current scene in the
 `_ready()` function. Both the current scene (the one with the button) and
-``Global.gd`` are children of root, but autoloaded nodes are always first. This
+``global.gd`` are children of root, but autoloaded nodes are always first. This
 means that the last child of root is always the loaded scene.
 
 .. tabs::