Sprites Godot 4 : configuration 2D au pixel près

Godot rend le pixel art facile une fois trois réglages connus

Godot est le meilleur moteur gratuit pour les jeux 2D en pixel art en ce moment. Ça ne fait plus débat. Il a été conçu pour la 2D dès le départ, l'éditeur est minuscule, et il n'y a ni écran de démarrage ni part de revenus à gérer.

Mais voici ce qui piège tout le monde. Les réglages par défaut rendent vos sprites Godot flous. Chaque nouveau projet arrive avec un filtrage de texture linéaire, qui étale les bords des pixels en bouillie. Vous importez un personnage 16x16 impeccable et vous vous demandez pourquoi on dirait que quelqu'un a frotté de la vaseline sur votre écran.

Trois réglages corrigent tout. On les couvre d'abord, puis on passe au flux complet. Import des sprites, animations, machines à états, et les pièges qui font perdre des heures.

Réglages de rendu au pixel près (à faire en premier)

Avant d'importer un seul sprite, configurez ces réglages à l'échelle du projet. Ouvrez Project > Project Settings et cherchez chacun d'eux.

Filtre de texture

Rendering > Textures > Canvas Textures > Default Texture Filter → réglez sur Nearest

C'est le plus important. « Nearest » signifie que Godot interpole au plus proche voisin quand il met une texture à l'échelle, ce qui préserve les bords durs des pixels. Le « Linear » par défaut mélange les pixels voisins. Parfait pour du dessin HD, terrible pour du pixel art.

Un réglage. Corrige les sprites flous partout. Chaque tutoriel Godot pixel art commence ici, parce que rien d'autre ne compte si celui-là est faux.

Mode d'étirement du viewport

Display > Window > Stretch > Mode → réglez sur viewport

Godot rend alors votre jeu à sa résolution native, puis agrandit le viewport pour remplir la fenêtre. Sans ça, les sprites peuvent tomber sur des positions sous-pixel et paraître incohérents.

Mise à l'échelle entière

Display > Window > Stretch > Scale Mode → réglez sur integer

La mise à l'échelle entière limite le viewport aux multiples entiers (2x, 3x, 4x, jamais 2,7x). Ça évite les pixels inégaux, où certains paraissent plus gros que d'autres. Il peut rester de petites bandes noires à certaines tailles de fenêtre, mais vos pixels seront uniformes.

Résolution de base

Alignez la résolution de base sur l'échelle de votre pixel art. Pour un jeu en tuiles 16x16, 320x180 ou 384x216 fonctionne bien. C'est à peu près du 16:9, à une résolution où chaque tuile reste visible.

Display > Window > Size > Viewport Width/Height → votre résolution cible

Ce dernier, Snap 2D Transforms to Pixel, passe souvent inaperçu. Il force toutes les positions Node2D sur des pixels entiers, ce qui élimine le « scintillement » d'un sprite assis entre deux pixels pendant un déplacement.

Importer des sprites dans Godot

Glissez vos PNG dans le dock FileSystem de Godot. C'est tout. Godot les importe automatiquement.

Mais les réglages d'import comptent. Sélectionnez votre sprite dans le dock FileSystem et regardez l'onglet Import (en haut à droite par défaut).

Réglages d'import pour le pixel art

• Compress > Mode → Lossless (jamais Lossy pour du pixel art)
• Texture > Filter → laissez « Project Default » si le filtre global est sur Nearest, sinon forcez Nearest ici
• Texture > Repeat → Disabled (sauf pour une texture répétable)

Cliquez Reimport après tout changement. Godot n'applique rien avant.

Format de fichier

PNG avec transparence. Toujours. Godot lit le PNG nativement, les fichiers sont minuscules en pixel art, et la transparence alpha fonctionne sans rien faire. Aucune raison d'utiliser autre chose pour des sprites pixel art dans Godot.

Si vous générez vos sprites avec Sprite AI (sprite-ai.art), l'export PNG par défaut est exactement ce que Godot attend. Aucune conversion. Générez, téléchargez, glissez dans votre projet.

Pour le détail des formats, le guide des formats d'export de sprites compare PNG, SVG et sprite sheets en profondeur.

Configuration du nœud Sprite2D

La façon la plus simple d'afficher un sprite. Créez un nœud Sprite2D, assignez votre texture, terminé.

# Scene tree:
# - CharacterBody2D
#   - Sprite2D (your character texture)
#   - CollisionShape2D

Propriétés clés :

• Texture → votre PNG
• Hframes / Vframes → avec une sprite sheet, le nombre de colonnes et de lignes
• Frame → la frame à afficher (index à partir de 0)
• Centered → laissez On en général, Off si l'origine du sprite doit être en haut à gauche

Sprite2D convient aux sprites statiques ou quand vous pilotez l'animation par code. Pour de vraies séquences d'animation, par contre, il vous faut AnimatedSprite2D.

AnimatedSprite2D vs AnimationPlayer

Tout le monde s'y perd. Godot offre deux façons d'animer un sprite. Laquelle?

Réponse courte : AnimatedSprite2D pour la plupart des jeux 2D. AnimationPlayer quand vous devez animer autre chose que des frames.

AnimatedSprite2D

Conçu pour l'animation image par image. Vous définissez des animations comme des suites de frames, réglez la cadence, et lancez. Simple, et ça marche.

Quand l'utiliser :

• Cycles de marche, boucles d'attente, séquences d'attaque
• Toute animation qui se résume à « montrer ces frames dans l'ordre »
• Petits jeux, game jams, prototypes
• Quand vous voulez la configuration la plus rapide possible

AnimationPlayer

Un système d'animation généraliste. Il anime toute propriété de tout nœud. Position, rotation, échelle, modulate (couleur), visibilité, et oui, les frames d'un sprite. Plus puissant, mais plus complexe.

Quand l'utiliser :

• Vous devez synchroniser les frames avec des hitbox, des sons ou des particules
• Votre personnage a des animations multipistes complexes (sprite + effets + audio)
• Vous construisez beaucoup de cinématiques ou de séquences scriptées

Écoutez, pour la plupart des jeux indés en pixel art? AnimatedSprite2D couvre tout. J'ai vu des gens compliquer leur projet en sortant AnimationPlayer là où une simple suite de frames aurait suffi. Commencez avec AnimatedSprite2D. Changez si vous frappez un mur.

Configurer SpriteFrames

SpriteFrames est la ressource qui contient les données d'animation d'AnimatedSprite2D. Voici la marche à suivre.

1. Ajoutez un nœud AnimatedSprite2D à votre scène
2. Dans l'Inspector, cliquez Sprite Frames → New SpriteFrames
3. L'éditeur SpriteFrames s'ouvre en bas de l'écran

Ajouter des frames depuis des images séparées

Si vous avez un PNG par frame (ce que produit le générateur de Sprite AI) :

1. Dans l'éditeur SpriteFrames, cliquez Add Animation et nommez-la (« walk », « idle »)
2. Cliquez l'icône de fichier pour ajouter des frames depuis le disque
3. Sélectionnez vos PNG dans l'ordre
4. Réglez FPS à la cadence voulue (8 à 12 est typique en pixel art)
5. Activez Loop pour les animations en boucle (idle, walk), désactivez-le pour les coups uniques (attack, death)

Ajouter des frames depuis une sprite sheet

Si vous avez une sprite sheet (une image, plusieurs frames en grille) :

1. Cliquez l'icône de grille dans l'éditeur SpriteFrames
2. Sélectionnez votre sprite sheet
3. Réglez le nombre de frames Horizontal et Vertical
4. Cliquez les frames à ajouter, dans l'ordre
5. Cliquez Add Frames

C'est là qu'une sprite sheet bien faite paie. Le créateur de sprite sheets en assemble une si ce n'est pas déjà fait.

Lancer les animations par code

# Reference the AnimatedSprite2D node
@onready var sprite = $AnimatedSprite2D

func _physics_process(delta):
    if velocity.length() > 0:
        sprite.play("walk")
    else:
        sprite.play("idle")

# For one-shot animations
func attack():
    sprite.play("attack")
    await sprite.animation_finished
    sprite.play("idle")

Simple. Lisible. Aucune machine à états pour les cas de base.

Machines à états d'animation avec AnimationTree

Quand votre personnage a beaucoup d'animations et des règles de transition complexes (la marche se fond dans la course, l'attaque interrompt le déplacement, les dégâts écrasent tout), il vous faut un AnimationTree.

Le hic, c'est qu'AnimationTree exige AnimationPlayer, pas AnimatedSprite2D. Si vous prenez cette route, configurez d'abord vos animations dans AnimationPlayer.

Configuration de base d'AnimationTree

1. Ajoutez un nœud AnimationPlayer et créez vos animations (images clés sur la propriété frame d'un Sprite2D)
2. Ajoutez un nœud AnimationTree
3. Pointez son Anim Player vers votre AnimationPlayer
4. Réglez Tree Root sur New AnimationNodeStateMachine
5. Ouvrez l'éditeur de machine à états

Construire la machine à états

L'éditeur visuel permet de :

• Ajouter des états (chacun lié à une animation)
• Tracer des transitions entre états
• Fixer les conditions de transition (immédiate, en fin d'animation, après un délai)
• Configurer l'avance automatique pour les enchaînements

Une machine à états de personnage typique :

idle ←→ walk ←→ run
  ↓       ↓       ↓
 jump    jump    jump
  ↓       ↓       ↓
 fall    fall    fall
  ↓       ↓       ↓
 land    land    land

Pilotez-la par code :

@onready var state_machine = $AnimationTree.get("parameters/playback")

func _physics_process(delta):
    if is_on_floor():
        if velocity.x != 0:
            state_machine.travel("walk")
        else:
            state_machine.travel("idle")
    else:
        if velocity.y < 0:
            state_machine.travel("jump")
        else:
            state_machine.travel("fall")

Cela dit, et j'insiste, vous n'avez pas besoin d'AnimationTree pour la plupart des jeux en pixel art. Un plateformeur 2D avec 5 ou 6 animations? AnimatedSprite2D et quelques if suffisent. AnimationTree brille à partir de 15 animations et de transitions nuancées. N'architecturez pas pour une complexité que vous n'avez pas.

Problèmes courants des sprites Godot (et comment les corriger)

Sprites flous

Cause : filtre de texture sur Linear (le défaut). Correctif : Project Settings > Rendering > Textures > Canvas Textures > Default Texture Filter → Nearest. Réimportez les textures existantes.

C'est le problème numéro un. Chaque fil de forum Godot sur le pixel art commence et finit ici.

Les sprites scintillent en mouvement

Cause : positionnement sous-pixel. La position du sprite a des décimales (100,3 ou 52,7), donc Godot doit décider comment rendre un pixel « entre » deux pixels d'écran. Correctif : activez Rendering > 2D > Snap 2D Transforms to Pixel dans Project Settings. Vérifiez aussi que votre Camera2D a Position Smoothing désactivé, ou un lissage aligné sur les pixels.

Pixels de tailles inégales

Cause : mise à l'échelle non entière du viewport. La fenêtre n'est pas un multiple exact de votre résolution de base. Correctif : réglez Scale Mode sur « integer » dans les réglages Stretch. Votre jeu aura peut-être de petites bandes noires, mais les pixels seront uniformes.

Le sprite change selon le niveau de zoom

Cause : le zoom de la caméra n'est pas entier. Correctif : gardez le zoom sur des entiers (1x, 2x, 3x). Un zoom fractionnaire (1,5x, 2,3x) cause le même problème de pixels inégaux qu'un étirement non entier.

L'animation est trop rapide ou trop lente

Cause : le FPS dans SpriteFrames ne correspond pas à votre attente. Correctif : le pixel art rend mieux entre 8 et 12 FPS pour les personnages. Sous 8, c'est saccadé. Au-dessus de 12, ça devient trop fluide pour l'esthétique basse résolution. Ajustez par animation. L'attente peut être plus lente (4 à 6 FPS), les attaques plus rapides (10 à 15 FPS).

Conseils de performance

Pour un petit jeu indé, la performance est rarement un enjeu avec des sprites Godot. Mais si vous avez des centaines de sprites à l'écran, ceci compte.

Atlas de textures

Regroupez vos sprites dans un seul atlas de textures. Godot peut regrouper les appels de rendu des sprites qui partagent une texture, donc moins de changements d'état GPU. L'éditeur TileSet le fait automatiquement pour les tuiles. Pour les sprites animés, une sprite sheet donne le même résultat.

CanvasGroup pour le regroupement

Si beaucoup de sprites partagent un matériau (même shader, même texture), placez-les sous un nœud CanvasGroup. Godot dessine le groupe entier en moins d'appels de rendu.

Évitez les nœuds inutiles

Chaque Node2D de l'arbre a un coût. Pour des centaines de décorations d'arrière-plan, dessinez-les comme des tuiles dans un TileMap plutôt qu'en nœuds Sprite2D séparés.

Culling de visibilité

Godot élimine automatiquement les CanvasItem hors écran, donc les sprites hors du viewport ne coûtent aucun appel de rendu. Mais si de la logique tourne sur des sprites hors écran (animations, collisions), vous payez encore le CPU. Utilisez VisibleOnScreenNotifier2D pour mettre en pause les entités hors écran.

Exporter des sprites de Sprite AI pour Godot

Le flux est direct. Aucun réglage d'export spécial, aucune conversion.

1. Ouvrez le générateur de sprites et décrivez votre personnage
2. Générez. L'IA produit un PNG pixel art propre avec transparence
3. Besoin d'animation? Passez-le dans l'animateur pour obtenir des cycles walk / run / idle / attack en sprite sheet. Aucune frame à dessiner
4. Téléchargez le PNG (ou la sprite sheet)
5. Glissez-le dans le dossier res:// de votre projet Godot
6. Godot l'importe automatiquement. Vérifiez le filtrage Nearest dans le dock Import
7. Assignez-le à un Sprite2D, ou passez par l'éditeur de grille SpriteFrames pour une sprite sheet

Le parcours personnage du Studio vous mène du prompt → configuration → sprite généré → animation → aperçu jouable en une seule session. La sheet exportée se glisse telle quelle dans l'éditeur SpriteFrames de Godot.

Besoin de retoucher des couleurs ou des pixels égarés avant l'import? L'éditeur de pixel art tourne dans votre navigateur. Le processus d'import reste identique peu importe d'où viennent vos sprites. PNG avec transparence → glisser dans Godot → filtre sur Nearest.

Aide-mémoire : liste complète de configuration des sprites Godot

Toutes les étapes, condensées. Mettez la page en signet si vous voulez.

Configuration du projet (une fois) :

1. Project Settings → Rendering → Textures → Default Texture Filter → Nearest
2. Project Settings → Display → Window → Stretch → Mode → viewport
3. Project Settings → Display → Window → Stretch → Scale Mode → integer
4. Project Settings → Rendering → 2D → Snap 2D Transforms to Pixel → On
5. Résolution de base du viewport alignée sur votre échelle de pixels

Import par sprite :

1. Glissez le PNG dans le dock FileSystem
2. Vérifiez le dock Import → Filter doit hériter « Nearest » du projet
3. Compress Mode → Lossless
4. Cliquez Reimport

Configuration de l'animation :

1. Ajoutez un nœud AnimatedSprite2D
2. Créez un New SpriteFrames
3. Ajoutez les animations, avec des noms parlants
4. Ajoutez les frames (PNG séparés ou grille de sprite sheet)
5. Réglez le FPS par animation (8 à 12 en général, moins pour idle)
6. Activez ou non la boucle par animation

Si vous avez besoin de machines à états :

1. Passez plutôt à AnimationPlayer + Sprite2D
2. Posez des images clés sur la propriété frame dans AnimationPlayer
3. Ajoutez un AnimationTree avec une racine StateMachine
4. Définissez états et transitions visuellement
5. Pilotez avec state_machine.travel("animation_name") dans le code

Pour aller plus loin

• Formats d'export de sprites expliqués : PNG, SVG ou sprite sheets selon l'usage
• Créateur de sprite sheets : assembler des sheets d'animation pour tout moteur
• Meilleurs moteurs de jeu pour le pixel art compare Godot à Unity, GameMaker et les autres
• Documentation Godot 4 : sprites 2D, la référence officielle

Votre configuration pixel art dans Godot devrait prendre cinq minutes une fois les réglages connus. Ne réfléchissez pas trop. Réglez les trois paramètres du projet, importez vos sprites en PNG et commencez à construire. Le moteur s'occupe du reste.

FAQ

Pourquoi mes sprites Godot sont-ils flous?

Le filtre de texture par défaut est Linear, ce qui floute le pixel art. Réglez Project Settings → Rendering → Textures → Canvas Textures → Default Texture Filter sur Nearest, puis réimportez les textures existantes. C'est le problème pixel art numéro un dans Godot.

Quelle est la meilleure façon d'importer du pixel art dans Godot?

Exportez en PNG avec transparence, glissez dans le dossier res:// de votre projet. Confirmez que le dock Import affiche Filter « Nearest » et Compress Mode « Lossless ». Sprite AI exporte dans ce format par défaut. Glisser, déposer, utiliser.

AnimatedSprite2D ou AnimationPlayer pour du pixel art dans Godot?

AnimatedSprite2D dans ~90 % des cas. Il est conçu pour l'animation image par image, avec la configuration la plus simple. Réservez AnimationPlayer à la synchro multipiste (sprite + hitbox + audio + effets sur la même timeline) ou aux machines à états AnimationTree.

Comment animer une sprite sheet dans Godot?

AnimatedSprite2D + SpriteFrames. Cliquez l'icône de grille dans l'éditeur SpriteFrames, sélectionnez votre sprite sheet, réglez le nombre de frames horizontal et vertical, choisissez les frames. Réglez le FPS par animation (8 à 12 en pixel art). L'animateur de Sprite AI exporte des sprite sheets dans le format que Godot attend.

Pourquoi mes sprites Godot scintillent-ils en mouvement?

Positionnement sous-pixel. Activez Snap 2D Transforms to Pixel dans Project Settings → Rendering → 2D, et désactivez Position Smoothing sur votre Camera2D (ou passez-le en alignement pixel). Réglez Scale Mode sur « integer » dans les réglages Stretch.

Articles liés

Blog

Pixel art anime : la tradition JRPG qui n'est jamais partie

Du JRPG SNES aux jeux indés modernes, l'évolution du pixel art anime. Techniques pour les yeux, les cheveux, les poses et les palettes à petite échelle.

Blog

Comment faire un jeu en pixel art en 6 étapes

Une feuille de route en six étapes pour votre premier jeu en pixel art. Voir petit, choisir un moteur, faire les sprites et finir le jeu.

Blog

Pixel art difficile? La réponse honnête pour débutants

La vérité sur la difficulté du pixel art. Ce qui est vraiment dur, ce qui est plus facile que vous pensez, et comment sauter les parties frustrantes.