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.
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.
La position du panneau d'animation
Il se compose de quatre parties :
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é.
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.
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.
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.
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.
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" (
) pour ajouter une nouvelle animation. Et Saisissez un nom pour l'animation dans la boîte de dialogue.
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 :
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 :
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.
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 :
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.
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.
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
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
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 :
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.
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 cliquer sur elles pour faire apparaître l'éditeur de clé d'animation dans l'inspecteur.
É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" (
) 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.
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.
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.
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.
