Merge pull request godotengine#7238 from Piralein/animation

Update "2D Sprite Animation" Page

Author: mhilbrunner

tutorials/2d/2d_sprite_animation.rst

@@ -7,12 +7,16 @@ Introduction
 ------------
 
 In this tutorial, you'll learn how to create 2D animated
-characters with the AnimatedSprite2D class and the AnimationPlayer. Typically, when you create or download an animated character, it
-will come in one of two ways: as individual images or as a single sprite sheet
-containing all the animation's frames. Both can be animated in Godot with the AnimatedSprite2D class.
+characters with the AnimatedSprite2D class and the AnimationPlayer.
+Typically, when you create or download an animated character,
+it will come in one of two ways: as individual images or as a single sprite sheet
+containing all the animation's frames.
+Both can be animated in Godot with the AnimatedSprite2D class.
 
 First, we'll use :ref:`AnimatedSprite2D <class_AnimatedSprite2D>` to
-animate a collection of individual images. Then we will animate a sprite sheet using this class. Finally, we will learn another way to animate a sprite sheet
+animate a collection of individual images.
+Then we will animate a sprite sheet using this class.
+Finally, we will learn another way to animate a sprite sheet
 with :ref:`AnimationPlayer <class_AnimationPlayer>` and the *Animation*
 property of :ref:`Sprite2D <class_Sprite2D>`.
 
@@ -45,7 +49,7 @@ with the following nodes:
 Now select the ``AnimatedSprite2D`` and in its *SpriteFrames* property, select
 "New SpriteFrames".
 
-.. image:: img/2d_animation_new_spriteframes.png
+.. image:: img/2d_animation_new_spriteframes.webp
 
 Click on the new SpriteFrames resource and you'll see a new panel appear at the
 bottom of the editor window:
@@ -58,11 +62,12 @@ of the animation from "default" to "run".
 
 .. image:: img/2d_animation_spriteframes_done.webp
 
-Back in the Inspector, check the box for the *Playing* property. You should
-now see the animation playing in the viewport. However, it is a bit slow. To
-fix this, change the *Speed (FPS)* setting in the SpriteFrames panel to 10.
+Use the "Play" buttons on the top-right of the *Filter Animations* input to preview the animation.
+You should now see the animation playing in the viewport.
+However, it is a bit slow. To fix this,
+change the *Speed (FPS)* setting in the SpriteFrames panel to 10.
 
-You can add additional animations by clicking the "New Animation" button and
+You can add additional animations by clicking the "Add Animation" button and
 adding additional images.
 
 Controlling the animation
@@ -116,30 +121,37 @@ released.
 Sprite sheet with AnimatedSprite2D
 ----------------------------------
 
-You can also easily animate from a sprite sheet with the class ``AnimatedSprite2D``. We will use this public domain sprite sheet:
+You can also easily animate from a sprite sheet with the class ``AnimatedSprite2D``.
+We will use this public domain sprite sheet:
 
 .. image:: img/2d_animation_frog_spritesheet.png
 
-Right-click the image and choose "Save Image As" to download it, and then copy the image into your project folder.
+Right-click the image and choose "Save Image As" to download it,
+and then copy the image into your project folder.
 
-Set up your scene tree the same way you did previously when using individual images. Select the ``AnimatedSprite2D`` and in its *SpriteFrames* property, select
-"New SpriteFrames".
+Set up your scene tree the same way you did previously when using individual images.
+Select the ``AnimatedSprite2D`` and in its *SpriteFrames* property, select "New SpriteFrames".
 
-Click on the new SpriteFrames resource. This time, when the bottom panel appears, select "Add frames from a Sprite Sheet".
+Click on the new SpriteFrames resource.
+This time, when the bottom panel appears, select "Add frames from a Sprite Sheet".
 
 .. image:: img/2d_animation_add_from_spritesheet.webp
 
 You will be prompted to open a file. Select your sprite sheet.
 
-A new window will open, showing your sprite sheet. The first thing you will need to do is to change the number of vertical and horizontal images in your sprite sheet. In this sprite sheet, we have four images horizontally and two images vertically.
+A new window will open, showing your sprite sheet.
+The first thing you will need to do is to change the number of vertical and horizontal images in your sprite sheet.
+In this sprite sheet, we have four images horizontally and two images vertically.
 
 .. image:: img/2d_animation_spritesheet_select_rows.webp
 
-Next, select the frames from the sprite sheet that you want to include in your animation. We will select the top four, then click "Add 4 frames" to create the animation.
+Next, select the frames from the sprite sheet that you want to include in your animation.
+We will select the top four, then click "Add 4 frames" to create the animation.
 
 .. image:: img/2d_animation_spritesheet_selectframes.webp
 
-You will now see your animation under the list of animations in the bottom panel. Double click on default to change the name of the animation to jump.
+You will now see your animation under the list of animations in the bottom panel.
+Double click on default to change the name of the animation to jump.
 
 .. image:: img/2d_animation_spritesheet_animation.webp
 
@@ -180,7 +192,7 @@ expand the *Animation* section in the Inspector and set the *Hframes* to ``6``.
 *Hframes* and *Vframes* are the number of horizontal and vertical frames in
 your sprite sheet.
 
-.. image:: img/2d_animation_setframes.png
+.. image:: img/2d_animation_setframes.webp
 
 Now try changing the value of the *Frame* property. You'll see that it ranges
 from ``0`` to ``5`` and the image displayed by the Sprite2D changes accordingly.
@@ -190,17 +202,17 @@ Select the ``AnimationPlayer`` and click the "Animation" button followed by
 "New". Name the new animation "walk". Set the animation length to ``0.6`` and
 click the "Loop" button so that our animation will repeat.
 
-.. image:: img/2d_animation_new_animation.png
+.. image:: img/2d_animation_new_animation.webp
 
 Now select the ``Sprite2D`` node and click the key icon to add a new track.
 
-.. image:: img/2d_animation_new_track.png
+.. image:: img/2d_animation_new_track.webp
 
 Continue adding frames at each point in the timeline (``0.1`` seconds by
 default), until you have all the frames from 0 to 5. You'll see the frames
 actually appearing in the animation track:
 
-.. image:: img/2d_animation_full_animation.png
+.. image:: img/2d_animation_full_animation.webp
 
 Press "Play" on the animation to see how it looks.
 
@@ -266,7 +278,9 @@ released.
 Summary
 -------
 
-These examples illustrate the two classes you can use in Godot for
-2D animation. ``AnimationPlayer`` is
-a bit more complex than ``AnimatedSprite2D``, but it provides additional functionality, since you can also
-animate other properties like position or scale. The class ``AnimationPlayer`` can also be used with an ``AnimatedSprite2D``. Experiment to see what works best for your needs.
+These examples illustrate the two classes you can use in Godot for 2D animation.
+``AnimationPlayer`` is a bit more complex than ``AnimatedSprite2D``,
+but it provides additional functionality, since you can also
+animate other properties like position or scale.
+The class ``AnimationPlayer`` can also be used with an ``AnimatedSprite2D``.
+Experiment to see what works best for your needs.