Introduction aux fonctions d'animation¶

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.

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.

Il se compose de quatre parties :

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é.

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 didacticiel, nous allons créer un nœud Sprite avec un AnimationPlayer comme enfant. Nous allons animer le sprite pour qu'il se déplacer entre deux points sur l'écran.

Avertissement

AnimationPlayer hérite de Node plutôt que de Node2D ou de Spatial, ce qui signifie que les nœuds enfants n'hériteront pas de la transformation des nœuds parents en raison de la présence d'un Node nu dans la hiérarchie.

Par conséquent, il n'est pas recommandé d'ajouter des nœuds qui ont une transformation 2D/3D comme enfant d'un nœud AnimationPlayer.

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.

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

Ajout d'une piste¶

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

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 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.

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 bouton "Jouer depuis le début" ().

Yeah ! Notre animation fonctionne :

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.

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.

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

Continuous : Mise à jour de la propriété sur chaque image.
Discrete : Ne mettez à jour la propriété que sur les clés d'animation.
Trigger : Ne mettez à jour la propriété que sur les clés d'animation ou les déclencheurs. Les déclencheurs sont un type de clé d'animation utilisé par la propriété current_animation d'un AnimationPlayer, et les pistes de Animation Playback.
Capture : Si la durée de la première clé d'animation est supérieure à 0.0, la valeur actuelle de la propriété sera mémorisée et sera mélangée à la première clé d'animation. Par exemple, vous pouvez utiliser le mode Capture pour déplacer un nœud situé n’importe où vers un emplacement spécifique.

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

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 :

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 All classes 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.

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.

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

Utiliser les pistes RESET¶

Vous pouvez configurer une animation spéciale RESET pour contenir la "pose par défaut". Ceci est utilisé pour s'assurer que la pose par défaut est restaurée lorsque vous sauvegardez la scène et que vous l'ouvrez à nouveau dans l'éditeur.

Pour les pistes existantes, vous pouvez ajouter une animation appelée "RESET" (sensible à la casse), puis ajouter des pistes pour chaque propriété que vous souhaitez réinitialiser. La seule image clé doit être au temps 0, et donnez-lui la valeur par défaut souhaitée pour chaque piste.

Si la propriété Reset On Save de l'AnimationPlayer est mise à true, la scène sera sauvegardée avec les effets de l'animation reset appliqués (comme si elle avait été recherchée au temps 0.0). Cela n'affecte que le fichier sauvegardé - les pistes de propriétés dans l'éditeur restent là où elles étaient.

Si vous souhaitez réinitialiser les pistes dans l'éditeur, sélectionnez le nœud AnimationPlayer, ouvrez le panneau inférieur Animation puis choisissez Appliquer la réinitialisation dans le menu déroulant Animation de l'éditeur d'animation.

Lors de l'ajout de pistes sur de nouvelles animations, l'éditeur vous demandera de créer automatiquement une piste de réinitialisation lorsque vous utilisez l'icône d'image clé à côté d'une propriété dans l'inspecteur. Cela ne s'applique pas aux pistes créées avec des versions de Godot antérieures à 3.4, car la fonction de piste de réinitialisation de l'animation a été ajoutée dans la version 3.4.