Animations

Introduction

Le système d'animation de Godot est extrêmement puissant et flexible.

Pour commencer, utilisez la scène du tutoriel précédent (Écran de lancement). L'objectif est d'ajouter une animation de "fondu-enchaîné" à l'image de lancement. Voici une copie juste au cas où : robisplash.zip.

Ajouter un lecteur d'animation

Pour commencer, ajoutez un nœud AnimationPlayer à la scène en tant qu'enfant de "background" (le nœud racine) :

../../_images/robisplash_anim_inspector.png

Quand un nœud de ce type est sélectionné, le panneau de l'éditeur d'animation apparaît :

../../_images/robisplash_anim_editor.png

Le panneau de l'éditeur d'animation reste visible jusqu'à ce qu'il soit masqué manuellement.

Créer l'animation

Il est temps de créer une nouvelle animation ! Appuyez sur le bouton Animation puis sélectionnez nouveau dans le menu. Nommez l'animation "intro" lorsque la boite de dialogue apparaît.

../../_images/robisplash_anim_button.png ../../_images/robisplash_anim_new.png

Maintenant que nous avons une animation, l'éditeur de propriétés entre en mode "édition d'animation". Dans ce mode, une icône clé apparaît à côté de chaque propriété de l'éditeur de propriétés. Sur Godot, n'importe quelle propriété d'un objet peut être animée :

../../_images/robisplash_anim_property_keys.png

Éditer l'animation

Le logo apparaîtra en haut de l'écran.

Avec le panneau de l'éditeur d'animation ouvert, sélectionnez le nœud "logo" et réglez la propriété "Rect / Position" sur (118, -400) et appuyez sur le bouton en forme de clé à côté de la propriété pour ajouter une clé d'animation :

../../_images/robisplash_anim_logo_inspector_key.png

Lorsque la boîte de dialogue apparaît, confirmez que vous créez une nouvelle piste.

La clé d'animation va être ajoutée dans l'éditeur d'animation :

../../_images/robisplash_anim_editor_keyframe.png

Déplacez le curseur d'édition en avant dans le temps en cliquant ici :

../../_images/robisplash_anim_editor_track_cursor.png

Modifiez la position du logo à (118, 0) et ajoutez une clé d'animation à nouveau. Avec deux clés d'animation ayant deux valeurs différentes, l'animation se produit.

../../_images/robisplash_anim_editor_keyframe_2.png

Appuyer sur "Lecture de l'animation sélectionnée depuis le début" sur le panneau d'animation (ou Shift + D sur le clavier) fera descendre le logo.

../../_images/robisplash_anim_editor_play_start.png

Cliquez sur le bouton "Lecture automatique au chargement" pour que l'animation se lance automatiquement quand la scène démarre.

../../_images/robisplash_anim_editor_autoplay.png

Et enfin, lors de l'exécution de la scène, l'animation devrait ressembler à ceci :

../../_images/out.gif