2026-07-26

Animer un personnage 2D dans Godot à partir d'une feuille de sprites — de l'import à la lecture

Godot est un excellent moteur 2D, mais on n'avance pas sans personnage à animer. Ce guide couvre tout le parcours : prendre une feuille de sprites créée à partir d'une seule image de personnage, la déposer dans un projet Godot 4, la découper en images, enregistrer les animations et les lire depuis le code.

Préparer la feuille et ses métadonnées

Importez votre personnage dans l'outil d'animation GenioPlus, choisissez un préréglage de mouvement (repos, marche, coup d'épée, saut, incantation, impact) et l'outil génère un court clip dont vous extrayez les images pour composer une feuille de sprites. Le téléchargement contient, à côté du PNG, un JSON de métadonnées indiquant la taille des images, le nombre de colonnes × lignes et le padding — exactement les valeurs dont l'étape suivante a besoin. Déposez le PNG n'importe où sous res:// : Godot l'importe automatiquement.

Découper les images avec AnimatedSprite2D

Ajoutez un nœud AnimatedSprite2D à votre scène et créez un « New SpriteFrames » dans sa propriété Sprite Frames : le panneau SpriteFrames s'ouvre en bas de l'éditeur. Cliquez sur « Add frames from a Sprite Sheet », choisissez le PNG et une fenêtre de configuration apparaît. Saisissez les valeurs Horizontal et Vertical correspondant aux colonnes × lignes du JSON ; si la feuille comporte du padding, renseignez également Separation et Offset et les limites d'images tomberont exactement juste. Sélectionnez les images voulues dans l'aperçu, puis validez avec « Add N Frames ».

Nommer les animations et régler la vitesse

Une nouvelle animation s'appelle « default » : double-cliquez pour la renommer en walk, idle ou attack, et utilisez le « + » de la liste du panneau pour regrouper plusieurs animations dans une même ressource SpriteFrames. La vitesse de lecture se règle avec la valeur Speed (FPS) ; 8 à 12 FPS conviennent généralement à une boucle de marche. Activez Loop pour les cycles, désactivez-le pour les mouvements ponctuels comme une attaque.

Lire l'animation depuis le code

Appelez play() sur le nœud — par exemple $AnimatedSprite2D.play("walk"). Pour le déplacement gauche/droite, utilisez la propriété flip_h plutôt que de générer une seconde feuille (en pilotant sprite.flip_h par le signe de velocity.x). Revenez à play("idle") en l'absence d'entrée de déplacement, et pour les mouvements ponctuels, écoutez le signal animation_finished afin de repasser en repos : les transitions d'état restent propres.

Quand préférer Sprite2D + AnimationPlayer

Si vous voulez piloter le changement d'image sur la même timeline que la position, la rotation, l'activation des collisions ou les effets sonores, le couple Sprite2D + AnimationPlayer est plus adapté. Placez la feuille dans la propriété Texture du Sprite2D, réglez Hframes/Vframes dans la section Animation selon vos colonnes et vos lignes, et la propriété Frame permet alors de choisir chaque image. Créez une nouvelle animation dans l'AnimationPlayer, définissez sa durée (0,6 s par exemple) et Loop, puis posez des clés sur la propriété Frame à intervalles réguliers. Si les images semblent interpolées entre deux valeurs, passez le mode de mise à jour de cette piste sur Discrete pour qu'elles basculent nettement.

Pour le pixel art, réglez le filtre sur Nearest

Depuis Godot 4, le filtrage des textures 2D est une propriété CanvasItem du nœud (un paramètre de projet servant de valeur par défaut). Si votre feuille en pixel art paraît floue, réglez CanvasItem > Texture > Filter sur Nearest dans l'AnimatedSprite2D ou le Sprite2D. Pour l'appliquer à tout le projet, définissez le filtre de texture par défaut dans Rendering > Textures des paramètres du projet. Conservez par ailleurs une compression Lossless pour les textures en pixel art, et laissez les mipmaps désactivés à moins que votre caméra ne dézoome fortement.

Pour commencer

Avec une seule image de personnage, vous pouvez sortir une feuille avec le préréglage de marche et la faire passer par les étapes ci-dessus. Le détourage et l'éditeur de découpe ne consomment aucun crédit : vous pouvez donc vérifier la qualité du détourage avant de dépenser quoi que ce soit.