Animation de Sprite 2D

Introduction

Dans ce tutoriel, vous allez apprendre deux manières différentes pour créer un personnage animé en 2D. Typiquement, lorsque vous créez ou téléchargez une animation d’un personnage, cela peux peux se faire de deux façon : soit avec des images individuelles soit avec une feuille de sprite « sprite sheet » qui contient toutes les images de l’animation. Cela dépend du type d’assets que vous avez, vous pouvez choisir l’une des solutions suivantes.

Premièrement, nous allons utiliser AnimatedSprite pour animer la collection d’images individuelles. Pour utiliser une feuille de sprite « sprite sheet », nous allons utiliser AnimationPlayer ainsi que la propriété Animation property of Sprite.

Note

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

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 cette exemple, nous allons utiliser l’animation suivante :

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

Vous pouvez télécharger les images ici : :téléchargement:`run_animation.zip <files/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: ref: Area2D <class_Area2D> ou : ref: RigidBody2D <class_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: ref: Physics Introduction <doc_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. Cependant, c’est un peu lent. Pour résoudre ce problème, modifiez le paramètre * Vitesse (FPS) * dans le panneau SpriteFrames.

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

func _process(delta):
    if Input.is_action_pressed("ui_right"):
        $AnimatedSprite.play("run")
    else:
        $AnimatedSprite.stop()

Feuille de Sprite avec AnimationPlayer

Si vous avez un SpriteSheet contenant toutes vos images d’animation, vous ne pouvez pas utiliser facilement `` AnimatedSprite``. Au lieu de cela, vous pouvez utiliser un noeud standard: ref: Sprite <class_Sprite> pour afficher la texture, puis l’animer en changeant de texture en texture avec: ref: AnimationPlayer <class_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: ref: Area2D <class_Area2D> ou : ref: RigidBody2D <class_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: ref: Physics Introduction <doc_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 ressembe l’animation.

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

Résumé

Ces exemples illustrent les deux situations les plus couremment rencontrées dans l’animation 2D. Chacun a ses avantages. Travailler avec `` AnimationPlayer`` est un peu plus complexe, mais fournit des fonctionnalités supplémentaires, car vous pouvez également animer d’autres propriétés telles que la position ou l’échelle. Expérimentez les et voyez lequel convient le mieux à vos besoins.