Animation de Sprite 2D

Introduction

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.

Note

Art pour les exemples suivants par https://opengameart.org/users/ansimuz et par https://opengameart.org/users/tgfcoder

Images individuelles avec AnimatedSprite

Dans ce scénario, vous avez une collection d'images, qui contient toutes les images pour l'animation de votre personnage. Pour cet exemple, nous allons utiliser l'animation suivante :

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

Vous pouvez télécharger les images ici : run_animation.zip

Décompressez les images et placez-les dans le dossier de votre projet. Configurez votre arbre de scène avec les nœuds suivants :

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

Note

Le nœud racine peut également être Area2D ou RigidBody2D. L'animation sera toujours faite de la même manière. Une fois l'animation terminée, vous pouvez attribuer une forme à CollisionShape2D. Voir Physics Introduction pour plus d'informations.

Sélectionnez maintenant le AnimatedSprite et dans propriété SpriteFrames, sélectionnez "Nouveau SpriteFrames".

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

Cliquez sur la nouvelle ressource SpriteFrames et vous verrez un nouveau panneau apparaît en bas de la fenêtre de l'éditeur :

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

Depuis le dock situé à gauche, faites glisser les 8 images individuelles dans la partie centrale du panneau SpriteFrames. Sur le côté gauche, modifiez le nom de l'animation de "default" par "run" (courir).

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

De retour dans l'inspecteur, cochez la case propriété de Playing. Vous devriez maintenant voir l'animation se jouer dans la fenêtre d'affichage. Cependant, c'est un peu lent. Pour résoudre ce problème, modifiez le paramètre Speed (FPS) dans le panneau SpriteFrames à la valeur 10.

Vous pouvez rajouter des animations supplémentaires en cliquant sur "New Animation" et ajoutez de nouvelles images.

Contrôle de l'animation

Une fois l'animation terminée, vous pouvez contrôler l'animation via le code en utilisant les méthodes play() et stop(). Voici un bref exemple pour lire l'animation tant que la touche fléchée droite est maintenue enfoncée et l'arrêter lorsque vous la relâchez.

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();
        }
    }
}

Feuille de Sprite avec AnimationPlayer

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

Faites un clique-droit sur l'image et choisissez "Enregistrer l'image sous" pour la télécharger, puis copiez l'image dans le dossier de votre projet.

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

Feuille de Sprite avec AnimationPlayer

Une autre façon d'animer lorsque vous utilisez une feuille de sprite est d'utiliser un nœud standard Sprite pour afficher la texture, puis d'animer le changement de texture avec AnimationPlayer.

Considérez cette feuille de sprite (sprite sheet), qui contient 6 images d'animation :

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

Faites un clique-droit sur l'image et choisissez "Enregistrer l'image sous" pour télécharger, puis copiez l'image dans votre dossier de votre projet.

Notre objectif est d’afficher ces images l’une après l’autre en boucle. Commencez par configurer votre arbre de scène :

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

Note

Le nœud racine peut également être Area2D ou RigidBody2D. L'animation sera toujours faite de la même manière. Une fois l'animation terminée, vous pouvez attribuer une forme à CollisionShape2D. Voir Physics Introduction pour plus d'informations.

Faites glisser la feuille de sprite (sprite sheet) dans la propriété Texture du sprite et vous verrez toute la feuille affichée à l'écran. Pour la découper en images individuelles, développez la section Animation de l'inspecteur et réglez Hframes sur 6. Hframes et Vframes représente le nombre d'images horizontales et verticales dans votre feuille de sprite.

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

Maintenant, essayez de changer la valeur de la propriété Frame. Vous verrez qu'elles vont de 0 à 5 et que l'image affichée par le Sprite change en conséquence. C'est la propriété que nous allons animer.

Sélectionnez AnimationPlayer et cliquez sur le bouton "Animation" suivi de "Nouveau". Nommez la nouvelle animation "walk" (marche). Définissez la longueur de l'animation sur 0.6 et cliquez sur le bouton "Bouclage de l'animation" pour que notre animation se répète.

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

Maintenant, sélectionnez le nœud Sprite et cliquez sur l'icône de la clé pour ajouter une nouvelle track.

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

Continuez à ajouter des images à chaque point de la timeline (0.1 secondes par défaut) jusqu'à ce que toutes les images soient comprises entre 0 et 5. Vous verrez les images apparaître dans la piste d'animation :

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

Appuyez sur "Play" pour voir à quoi ressemble l'animation.

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

Contrôle d'une animation AnimationPlayer

Comme avec AnimatedSprite, vous pouvez contrôler l'animation via le code en utilisant les méthodes play() et stop(). Encore une fois, voici un exemple pour jouer l'animation pendant que la touche fléchée droite est maintenue enfoncée, et l'arrêter quand la touche est relâchée.

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();
        }
    }
}

Note

Si la mise à jour simultanée d'une animation et d'une propriété séparée (par exemple, un platformer peut mettre à jour les propriétés h_flip/v_flip du sprite lorsqu'un personnage tourne lorsqu'il lance une animation 'tourner'), il est important de se rappeler que play() ne sera pas appliqué immédiatement. Au lieu de cela, il est appliqué la prochaine fois que le AnimationPlayer est traité. Ceci peut finir par se retrouver sur l'image suivante, provoquant un 'glitch' où le changement de propriété a été appliqué mais l'animation ne l'a pas été. Si cela s'avère être un problème, après avoir appelé play(), vous pouvez appeler advance(0) pour mettre à jour l'animation immédiatement.

Résumé

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.