Introduction aux fonctions de l'animation 2D

Vue d'ensemble

Le nœud AnimationPlayer vous permet de créer des animations simples ou complexes.

Dans ce guide, vous apprendrez à :

  • Travailler avec le panneau d'animation
  • Animer n'importe quelle propriété de n'importe quel nœud
  • Créer une animation simple
  • Appeler des fonctions avec la puissante fonction d'appel Call Function Tracks

Dans Godot, vous pouvez animer tout ce qui est disponible dans l'inspecteur, comme les transformations de nœuds, les sprites, les éléments d'interface utilisateur, les particules, la visibilité et la couleur des matériaux, etc. Vous pouvez également modifier les valeurs des variables de script et appeler n'importe quelle fonction.

Créer un nœud AnimationPlayer

Pour utiliser les outils d'animation, nous devons d'abord créer un nœud AnimationPlayer.

Le type de nœud AnimationPlayer est le conteneur de données pour vos animations. Un nœud AnimationPlayer peut contenir plusieurs animations, qui peuvent passer automatiquement les unes aux autres.

The AnimationPlayer node

Le nœud AnimationPlayer

Après avoir créé un clic sur le nœud AnimationPlayer dans l'onglet Nœud pour ouvrir le panneau Animation en bas de la fenêtre d'affichage.

The animation panel position

La position du panneau d'animation

Il se compose de quatre parties :

The animation panel

Le panneau d'animation

  • Contrôles d'animation (c.-à-d. ajouter, charger, enregistrer et supprimer des animations)
  • La liste des pistes
  • La timeline avec les clés d'animation
  • Les contrôles de timeline et de piste, où vous pouvez zoomer sur la timeline et éditer les pistes par exemple.

L'animation par ordinateur repose sur des clés d'animation

Une clé d'animation définit la valeur d'une propriété à un moment donné.

Les formes en diamant représentent les clés d'animation dans la timeline. Une ligne entre deux images clés indique que la valeur n'a pas changé.

Keyframes in Godot

clés d'animation dans Godot

Le moteur interpole les valeurs entre les clés d'animation résultant en un changement graduel des valeurs au cours du temps.

Two keyframes are all it takes to obtain a smooth motion

Deux clés d'animation sont tout ce qu'il faut pour obtenir un mouvement fluide

La timeline vous permet d'insérer des clés d'animation et de changer leur timing. Elle définit aussi la durée de l'animation.

The timeline in the animation panel

La timeline dans le panneau d'animation

Chaque ligne dans le panneau d'animation est une piste d'animation. Les pistes de type Normal et Transform référencent les propriétés du nœud. Leurs nom ou identifiant est un chemin vers le nœud et sa propriété affectée.

Example of Normal animation tracks

Exemple de piste d'animation de type Normal

Astuce

Si vous animez la mauvaise propriété, vous pouvez éditer le chemin d'une piste à tout moment. Double-cliquez dessus et tapez le nouveau chemin. Lire l'animation à l'aide du bouton "Lire du début" |Lire du début| (Raccourci par défaut Shift + D) pour voir les changements instantanément.

Tutoriel : Création d'une animation simple

Configuration de la scène

Pour ce tutoriel, nous allons créer un nœud d'AnimationPlayer et un nœud sprite qui sera son enfant.

Our scene setup

Notre configuration de scène

Le sprite contient une texture d'image. Nous animons ce sprite pour qu'il se déplace entre deux points sur l'écran. Pour ce tutoriel, utilisez l'icône Godot par défaut comme texture du sprite. Comme point de départ, déplacez le sprite vers une position à gauche à l'écran.

Astuce

Il n'est pas nécessaire d'ajouter les nœuds animés en tant qu'enfants au nœud AnimationPlayer, mais c'est un bon moyen de distinguer les nœuds animés des nœuds non animés dans l'arbre des scènes.

Sélectionnez le nœud AnimationPlayer, puis cliquez sur le bouton "Animation" dans l'éditeur d'animation. Dans la liste, sélectionnez "Nouveau" (Add Animation) pour ajouter une nouvelle animation. Et Saisissez un nom pour l'animation dans la boîte de dialogue.

Add a new animation

Ajouter une nouvelle animation

Ajout d'une piste

Pour ajouter une nouvelle piste pour notre sprite, sélectionnez-le et regardez dans la barre d'outils :

Convenience buttons

Les boutons convénients

Ces commutateurs et boutons vous permettent d'ajouter des clés d'animation pour l'emplacement, la rotation et l'échelle du nœud sélectionné respectivement.

Désélectionnez la rotation, car nous ne sommes intéressés que par l'emplacement de notre sprite pour ce tutoriel et cliquez sur le bouton clé.

Comme nous n'avons pas de piste déjà configurée pour la propriété transform/location, Godot demande, si il doit la configurée pour nous. Cliquez sur Créer.

Cela crée une nouvelle piste et notre première clé d'animation au début de la timeline :

The sprite track

La piste de sprite

La deuxième clé d'animation

Maintenant, nous devons définir la destination vers laquelle notre sprite doit se diriger et combien de temps il lui faut pour y arriver.

Disons que nous voulons qu'il faille 2 secondes pour aller à l'autre point. Par défaut l'animation est réglée pour durer une seconde, nous allons changer cela dans les commandes de la ligne de temps : dans le deuxième sous panel du panel d'animation.

Animation length

Durée de l'animation

Cliquez sur l'en-tête de la timeline près du repère de 2 secondes et déplacez le sprite vers la destination cible sur le côté droit.

De nouveau, cliquez sur le bouton clé dans la barre d'outils. Ceci crée notre deuxième clé d'animation.

Lancer l'animation

Cliquez sur le "Play from beginning" Jouer depuis le début) Bouton.

Yeah ! Notre animation fonctionne :

The animation

L'animation

Allers et retours

Godot a une fonctionnalité supplémentaire ici. Comme dit précédemment, Godot calcule toujours l'image entre deux clés d'animation. Dans une boucle, la première clé d'animation est aussi la dernière si aucune clé d'animation n'est précisé à la fin.

Animation loop

Boucle d'animation

Si vous réglez la durée de l'animation à 4 secondes maintenant, l'animation se déplace d'avant en arrière. Vous pouvez modifier ce comportement si vous changez le mode de boucle de la piste. Ceci est abordé dans le chapitre suivant.

Paramètres de la piste

Chaque piste a un panneau de configuration à la fin, où vous pouvez définir le mode de mise à jour, l'interpolation de la piste et le mode boucle.

Track settings

Paramètres de la piste

Le mode de mise à jour d'une piste indique à Godot quand mettre à jour les valeurs des propriétés. Cela peut l'être :

  • Continu : Mise à jour de la propriété sur chaque image
  • Discret : Mise à jour de la propriété uniquement sur les clés d'animation
  • Trigger : Met à jour la propriété seulement sur les clés d'animation ou les déclencheurs
  • Capture : La valeur de la propriété est mémorisée, et la propriété variera continuellement entre cette valeur et la valeur de la première clé d'animation trouvée
Track mode

Mode piste

Dans les animations normales, vous utilisez généralement "Continuous". Les autres types sont utilisés pour scripter des animations complexes.

L'interpolation indique à Godot comment calculer les valeurs d'image entre les clés d'animation. Ces modes d'interpolation sont pris en charge :

  • Le plus proche : définit la plus valeur de la clé d'animation la plus proche
  • Linéaire : Change la valeur en se basant sur un calcul linéaire entre deux clés d'animation
  • Cubique : change la valeur en se basant sur un calcul par fonction cubique entre deux clés d'animation
Track interpolation

Interpolation de piste

L'interpolation cubique donne un mouvement plus naturel où l'animation est plus lente à la clé d'animation et plus rapide entre les clés d'animation. Ceci est habituellement utilisé pour l'animation de personnage. L'interpolation linéaire crée un mouvement plus robotique.

Godot prend en charge deux modes de boucle, qui affectent l'animation si elle est réglée pour boucler :

Loop modes

Modes de boucle

  • Clamp loop interpolation : Lorsque cette option est sélectionnée, l'animation s'arrête après la dernière clé d'animation pour cette piste. Lorsque la première clé d'animation est atteinte à nouveau, l'animation se réinitialise à ses valeurs.
  • Wrap loop interpolation : Lorsque cette option est sélectionnée, Godot calcule l'animation après la dernière clé d'animation pour atteindre à nouveau les valeurs de la première clé d'animation.

Clés d'animation pour d'autres propriétés

Godot ne vous restreint pas à éditer uniquement des propriétés de transformations. Toutes les propriétés peuvent être utilisées comme piste où vous pouvez insérer des clés d'animation.

Si vous sélectionnez votre sprite pendant que le panel d'animation est visible, vous obtenez un petit bouton clé d'animation pour chacune des propriétés du sprite. Cliquez sur le bouton et Godot ajoute automatiquement une piste et clé d'animation à votre animation actuelle.

Keyframes for other properties

Clés d'animation pour d'autres propriétés

Modifier les clés d'animation

Pour une utilisation et édition avancée des clés d'animation en détail, vous pouvez cliqué sur elles pour faire apparaître l'éditeur de clé d'animation dans l'inspecteur.

Keyframe editor editing a key

Éditeur clé d'animation éditant une clé d'animation

En outre, vous pouvez également modifier la valeur d'assouplissement pour cette clé d'animation en cliquant et en faisant glisser le paramètre d'assouplissement. Ceci indique à Godot, comment changer les valeurs des propriétés quand il atteint cette clé d'animation.

Vous ajustez généralement vos animations de cette façon, lorsque le mouvement ne "semble pas correct".

Avancé : Pistes de la méthode d'appel

Le moteur d'animation de Godot ne s'arrête pas là. Si vous êtes déjà à l'aise avec le langage de script de Godot Bases de GDScript et Godot API vous savez que chaque type de nœud est une classe et possède plusieurs méthodes que vous pouvez appeler.

Par exemple le nœud type AudioStreamPlayer possède une méthode pour jouer un flux audio.

Ce serait quand même pas mal de pouvoir appeler une méthode à une clé d'animation spécifique de l'animation... C'est ici qu'entre en jeu "Call Method Tracks" ou (piste d'appel de méthode). Ces pistes ont chacune la référence à un nœud mais pas de référence à une propriété. A la place, une clé d'animation contient le nom et les arguments de la méthode qu'on souhaite appeler au moment ou Godot atteint la clé d'animation.

En guise de démonstration, on va utiliser une piste d'appel de méthode pour jouer un son à une clé d'animation spécifique. Normalement, pour jouer un son on devrait utiliser une piste audio, mais pour le bien de la démonstration de l'appel de méthodes on va le faire de cette manière.

Ajouter un AudioStreamPlayer à l'arbre des scènes et préparer un flux audio, utilisant un fichier audio que vous rajouter dans votre projet.

Cliquez sur "Ajouter une piste" (Add track) dans les commandes de piste du panneau d'animation.

Sélectionner "Add Call Method Track" (ou "ajouter une piste d'appel de méthode") depuis la liste des différents types de piste.

Add Call Method Track

Ajouter Une Piste d'Appel de Méthode

Sélectionner le nœud AudioStreamPlayer dans la fenêtre de sélection. Godot ajoute la piste avec la référence au nœud.

Select AudioStreamPlayer

Sélectionner L'AudioStreamPlayer

Clique droit sur la ligne du temps où Godot devrait jouer l'extrait et cliquez sur l'option"Insérer une clé". Une liste des méthodes qui peuvent être appelées pour l'AudioStreamPlayer devrait apparaître. Sélectionner la première.

../../_images/animation_method_options.png

Quand Godot atteint la clé d'animation, Godot appelle la fonction "play" du nœud AudioStreamPlayer et le flux audio est joué.

Vous pouvez changer la position de la clé d'animation en cliquant glissant sur la ligne temporelle, vous pouvez aussi cliquez sur la clé d'animation et changer ses paramètres dans l'inspecteur.

../../_images/animation_call_method_keyframe.png