Animación de Sprite 2D

Introducción

In this tutorial, you'll learn how to create 2D animated characters with the AnimatedSprite 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 AnimatedSprite class.

First, we'll use AnimatedSprite 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 with AnimationPlayer and the Animation property of Sprite.

Nota

El arte para los siguientes ejemplos está hecho por https://opengameart.org/users/ansimuz y https://opengameart.org/users/tgfcoder

Imágenes individuales con AnimatedSprite

En este escenario, tienes una colección de imágenes, cada una conteniendo un frame de la animación del personaje. Para este ejemplo, usaremos la siguiente animación:

../../_images/2d_animation_run_preview.gif

Puedes descargar las imágenes aquí: run_animation.zip

Descomprime las imágenes y colócalas en la carpeta de tu proyecto. Configura tu árbol de escena con los siguientes nodos:

../../_images/2d_animation_tree1.png

Nota

El nodo raíz puede ser también Area2D o RigidBody2D. La animación se hará del mismo modo. Una vez que la animación esté completa, puedes asignar una forma al CollisionShape2D. Ver Introducción a la física para más información.

Ahora selecciona el AnimatedSprite y en su propiedad SpriteFrames selecciona "New SpriteFrames".

../../_images/2d_animation_new_spriteframes.png

Haz clic en el nuevo recurso SpriteFrames y verás que aparece un nuevo panel en la parte inferior de la ventana del editor:

../../_images/2d_animation_spriteframes.png

Desde el panel del Sistema de Archivos en el lado izquierdo, arrastra las 8 imágenes individuales a la parte central del panel de SpriteFrames. En el lado izquierdo, cambia el nombre de la animación de "default" a "run".

../../_images/2d_animation_spriteframes_done.png

De vuelta en el Inspector, marque la casilla de la propiedad Playing. Ahora deberías ver la animación reproduciéndose en el Viewport. Sin embargo, es un poco lenta. Para arreglar esto, cambia el ajuste de Velocidad (FPS) en el panel de SpriteFrames a 10.

Puede añadir animaciones adicionales haciendo clic en el botón "Nueva animación" y añadiendo imágenes adicionales.

Controlando la animación

Una vez que la animación está completa, puedes controlar la animación a través del código usando los métodos play() y stop(). Aquí hay un breve ejemplo para reproducir la animación mientras se mantiene la tecla de la flecha derecha, y detenerla cuando se suelta la tecla.

extends KinematicBody2D

onready var _animated_sprite = $AnimatedSprite

func _process(delta):
    if Input.is_action_pressed("ui_right"):
        _animated_sprite.play("run")
    else:
        _animated_sprite.stop()
public class Character : KinematicBody2D
{
    private AnimatedSprite _animatedSprite;

    public override void _Ready()
    {
        _animatedSprite = GetNode<AnimatedSprite>("AnimatedSprite");
    }

    public override _Process(float delta)
    {
        if (Input.IsActionPressed("ui_right"))
        {
            _animatedSprite.Play("run");
        }
        else
        {
            _animatedSprite.Stop();
        }
    }
}

Sprite sheet con AnimatedSprite

You can also easily animate from a sprite sheet with the class AnimatedSprite. We will use this public domain sprite sheet:

../../_images/2d_animation_frog_spritesheet.png

Haz clic con el botón derecho del ratón en la imagen y selecciona "Guardar imagen como" para descargarla, luego copia la imagen en la carpeta de tu proyecto.

Set up your scene tree the same way you did previously when using individual images. Select the AnimatedSprite 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".

../../_images/2d_animation_add_from_spritesheet.png

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.

../../_images/2d_animation_spritesheet_select_rows.png

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.

../../_images/2d_animation_spritesheet_selectframes.png

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.

../../_images/2d_animation_spritesheet_animation.png

Finally, check Playing on the AnimatedSprite in the inspector to see your frog jump!

../../_images/2d_animation_play_spritesheet_animation.png

Sprite sheet con AnimationPlayer

Otra forma de animar cuando se usa una hoja de sprites es usar un nodo estándar Sprite para mostrar la textura, y luego animar el cambio de textura a textura con AnimationPlayer.

Consideremos esta hoja de sprites, que contiene 6 cuadros de animación:

../../_images/2d_animation_player-run.png

Haz clic con el botón derecho del ratón en la imagen y selecciona "Guardar imagen como" para descargarla, luego copia la imagen en la carpeta de tu proyecto.

Nuestro objetivo es mostrar estas imágenes una tras otra en un bucle. Comienza por establecer tu árbol de escenas:

../../_images/2d_animation_tree2.png

Nota

El nodo raíz puede ser también Area2D o RigidBody2D. La animación se hará del mismo modo. Una vez que la animación esté completa, puedes asignar una forma al CollisionShape2D. Ver Introducción a la física para más información.

Arrastra la hoja de sprites en la propiedad Texture del Sprite, y verás toda la hoja desplegada en la pantalla. Para cortarla en cuadros individuales, expande la sección Animación en el Inspector y pon los Cuadros a "6". Hframes y Vframes son el número de marcos horizontales y verticales en tu hoja de sprites.

../../_images/2d_animation_setframes.png

Ahora intenta cambiar el valor de la propiedad Frame. Verás que va de "0" a "5" y la imagen mostrada por el Sprite cambia en consecuencia. Esta es la propiedad que vamos a animar.

Selecciona el AnimationPlayer y haz clic en el botón Animation seguido de New. Nombra a la nueva animación "walk". Ponga la duración de la animación en "0.6" y haga clic en el botón "Loop" para que nuestra animación se repita.

../../_images/2d_animation_new_animation.png

Ahora selecciona el nodo Sprite y haz clic en el icono de la llave para añadir una nueva pista.

../../_images/2d_animation_new_track.png

Continúa agregando cuadros en cada punto de la línea de tiempo (0,1 segundos por defecto), hasta que tengas todos los cuadros de 0 a 5. Verás los cuadros que realmente aparecen en la pista de animación:

../../_images/2d_animation_full_animation.png

Presiona "Play" en la animación para ver cómo se ve.

../../_images/2d_animation_running.gif

Controlando una animación de AnimationPlayer

Como con AnimatedSprite, puedes controlar la animación por medio del código usando los métodos play() y stop(). De nuevo, aquí hay un ejemplo para reproducir la animación mientras se mantiene la tecla de la flecha derecha, y detenerla cuando se suelta la tecla.

extends KinematicBody2D

onready var _animation_player = $AnimationPlayer

func _process(delta):
    if Input.is_action_pressed("ui_right"):
        _animation_player.play("walk")
    else:
        _animation_player.stop()
public class Character : KinematicBody2D
{
    private AnimationPlayer _animationPlayer;

    public override void _Ready()
    {
        _animationPlayer = GetNode<AnimationPlayer>("AnimationPlayer");
    }

    public override void _Process(float delta)
    {
        if (Input.IsActionPressed("ui_right"))
        {
            _animationPlayer.Play("walk");
        }
        else
        {
            _animationPlayer.Stop();
        }
    }
}

Nota

Si se actualiza tanto una animación como una propiedad separada a la vez (por ejemplo, un plataformero puede actualizar las propiedades h_flip/v_flip del sprite cuando un personaje gira al iniciar una animación 'giratoria'), es importante tener en cuenta que play() no se aplica instantáneamente. En su lugar, se aplica la próxima vez que se procese el AnimationPlayer. Esto puede terminar en el siguiente cuadro, causando un cuadro de "glitch", donde se aplicó el cambio de propiedad pero no la animación. Si esto resulta ser un problema, después de llamar a play(), puedes llamar a advance(0) para actualizar la animación inmediatamente.

Sumario

These examples illustrate the two classes you can use in Godot for 2D animation. AnimationPlayer is a bit more complex than AnimatedSprite, 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 AnimatedSprite. Experiment to see what works best for your needs.