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 d’accueil . Voici une copie juste au cas où : robisplash.zip.

Ajouter un lecteur d’animation

Pour commencer, ajoutez un nœud :ref:`AnimationPlayer <class_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 image clé (keyframes ) :

../../_images/robisplash_anim_logo_inspector_key.png

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

L’image clé 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 image clé à nouveau. Avec deux images clés 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. (Shift-D) » sur le panneau d’animation 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