Sprite et sprite sheet : définition et méthode de création

Un personnage qui traverse une ruelle, une enseigne qui clignote, un adversaire qui prépare son attaque : derrière ces scènes de graphisme 2D se trouvent souvent des sprites. Ces éléments visuels deviennent mobiles grâce à une succession d’images soigneusement dessinées, puis regroupées dans une sprite sheet. Cette planche sert de réserve au moteur de jeu, qui sélectionne la bonne pose au bon moment. Le principe paraît simple ; sa réussite dépend pourtant de décisions très concrètes : dimensions des cases, placement du personnage, cadence de lecture et qualité de l’export.

Du pixel art rétro aux illustrations haute définition, la méthode reste accessible avec un logiciel graphique adapté. Pour suivre sa fabrication, prenons Nox, un coursier fictif chargé de livrer des colis dans une ville nocturne. Sa silhouette, son blouson et son sac doivent rester reconnaissables lorsqu’il attend, marche ou bondit. Ce fil conducteur permet de comprendre comment passer d’un dessin isolé à un personnage exploitable dans le développement de jeux vidéo, sans confondre création artistique, organisation des fichiers et programmation des comportements. Une planche réussie n’est pas seulement une collection de poses : c’est un petit système visuel, pensé pour être lu, animé et réutilisé.

En bref : créer un sprite et une sprite sheet exploitables

• 🎮 Comprendre les fichiers : le sprite est l’élément affiché ; la sprite sheet rassemble les images utilisées pour ses poses ou ses mouvements.
• 🎨 Préparer le dessin : une grille cohérente, une silhouette lisible et un repère stable évitent les retouches coûteuses pendant la production.
• ⏱️ Construire le mouvement : les poses clés, leur durée et les transitions donnent davantage de caractère qu’une multiplication mécanique des images.
• 📦 Exporter proprement : transparence, dimensions, marges et noms de fichiers doivent correspondre aux réglages du moteur.
• 🔧 Tester en situation : Phaser et Godot permettent de vérifier le découpage, les séquences et la synchronisation avec les déplacements.

Sprite, sprite sheet et atlas : comprendre les différences en graphisme 2D

Le sprite : un élément visuel, pas nécessairement une animation

Un sprite désigne, dans l’usage courant du jeu vidéo, un élément graphique bidimensionnel affiché dans une scène. Il peut représenter un personnage, un projectile, un objet ramassable ou un effet lumineux ; sa forme n’impose ni une esthétique rétro ni un mouvement.

Dans un moteur moderne, le terme peut aussi désigner l’objet chargé d’afficher une texture ou une portion de texture. Cette distinction sépare le dessin enregistré sur disque de son instance dans le jeu : plusieurs ennemis peuvent partager la même ressource visuelle tout en possédant des positions et des comportements différents.

Nox immobile devant une borne de livraison reste donc un élément de ce type. Une pièce brillante posée au sol aussi, même si elle n’utilise qu’une seule image : la mobilité n’entre pas dans la définition.

Le pixel art constitue une manière de fabriquer ces éléments, avec des pixels volontairement visibles et contrôlés. Une illustration peinte, une silhouette vectorielle convertie en image ou un rendu provenant d’un modèle 3D peuvent remplir exactement le même rôle.

La sprite sheet : plusieurs images réunies sur une planche

Une sprite sheet est un fichier contenant plusieurs visuels destinés à être sélectionnés séparément. Dans sa forme la plus simple, ces images découpées occupent des cellules identiques, rangées en lignes et en colonnes : le logiciel retrouve chaque case à partir de ses coordonnées.

Pour Nox, une ligne peut contenir les poses d’attente, une autre celles de marche et une troisième les étapes du saut. Toutefois, cette disposition n’est pas une obligation technique : l’ordre dépend du projet, tant que la sélection des images reste correctement décrite.

Le mouvement naît lorsque le moteur remplace rapidement une pose par une autre. La planche elle-même n’est donc pas un fichier animé comparable à un GIF : elle reste une image fixe dont certaines régions sont affichées successivement.

Élément	Fonction	Exemple concret
🎮 Sprite	Afficher un élément de la scène	Nox visible devant une boutique
🧩 Sprite sheet	Rassembler plusieurs poses ou éléments	Les huit étapes de sa marche
📦 Atlas de textures	Organiser des régions avec des métadonnées	Personnages, objets et effets empaquetés

L’atlas : une organisation plus souple des textures

La distinction entre feuille régulière et atlas relève surtout d’une convention pratique. Une grille de sprites utilise généralement des cases de dimensions identiques, tandis qu’un atlas de textures peut empaqueter des rectangles de tailles différentes avec un fichier décrivant leur emplacement.

Les deux notions se recouvrent parfois dans les outils : une même image peut être appelée planche ou atlas selon son organisation et son mode d’importation. Le critère utile reste la méthode de lecture, calcul automatique des cellules ou consultation de métadonnées.

Un dictionnaire JSON peut préciser les coordonnées, la largeur, la hauteur et le recadrage de chaque région. Le moteur sait alors retrouver un petit projectile aussi bien qu’un grand personnage, sans supposer que toutes les cases possèdent le même format.

Ces regroupements existent également sur le Web, notamment pour afficher différentes icônes depuis une même image avec des règles CSS. Ils peuvent réduire le nombre de fichiers demandés, mais leur intérêt dépend du contexte : les protocoles modernes et les solutions SVG empêchent d’en faire une recette universelle.

Pour choisir une méthode, la question n’est donc pas « quel format est le plus professionnel ? », mais « comment ces visuels seront-ils retrouvés et utilisés ? ». Une bonne organisation commence par la façon dont le moteur lira les images.

Créer un sprite en pixel art : dimensions, silhouette et repères

Choisir une grille adaptée à l’usage du personnage

Avant de tracer le premier contour, il faut décider de la place occupée à l’écran. Un héros destiné à un petit jeu de plateforme ne réclame pas le même niveau de détail qu’un portrait affiché dans une fenêtre de dialogue ; la caméra et la résolution cible orientent le dessin.

Pour notre coursier, une cellule de 32 × 32 pixels constitue un point de départ possible, pas une norme. Le personnage peut n’occuper qu’une partie de cette surface, en conservant de l’espace pour son sac, ses bras et les variations de posture.

Si son équipement devient illisible, une cellule de 48 × 48 ou 64 × 64 pixels peut mieux convenir. Le coût augmente cependant : davantage de surface implique souvent plus de détails à maintenir sur chaque pose et plus de temps consacré aux corrections.

Le guide consacré au choix des dimensions d’une grille de pixel art aide à relier ambition visuelle et contraintes de fabrication. Pour un affichage écran, les dimensions en pixels priment sur les centimètres, qui concernent surtout les usages imprimés.

Construire une silhouette lisible avant les détails

Le dessin gagne à commencer par quelques masses : tête, torse, jambes et accessoire principal. Une silhouette sombre sur un fond clair révèle immédiatement si le sac se confond avec le bras ou si les chaussures disparaissent dans une pose ramassée.

Nox doit rester identifiable même devant une façade couverte de panneaux lumineux. Une couleur d’accent sur son blouson et un sac anguleux peuvent suffire ; multiplier les fermetures, les coutures et les reflets risque de transformer sa silhouette en bruit visuel.

Une palette limitée facilite également la cohérence entre les vues. Elle réduit les écarts involontaires et permet de réserver les contrastes les plus forts aux informations utiles, comme le visage, les mains ou un colis porté devant le corps.

Les ombres doivent suivre une logique stable. Si la lumière vient du haut à gauche, elle ne doit pas basculer arbitrairement pendant la marche : sinon, le personnage semble changer de matière plutôt que de posture.

Installer un point d’appui commun à toutes les poses

Le piège classique apparaît lorsque chaque image est dessinée sans repère partagé. Une tête légèrement décalée ou des pieds placés une ligne trop bas produisent un tremblement, alors même que les contours semblent corrects lorsqu’ils sont observés séparément.

Une ligne de sol et un axe central offrent une base fiable. Pour une animation de déplacement latéral, le point d’ancrage peut être situé près des pieds ; il doit conserver une relation cohérente avec le personnage, même lorsque celui-ci se penche.

Cette stabilité ne signifie pas que tout doit rester immobile. La tête peut monter et descendre, le bassin pivoter et le sac rebondir, mais ces variations doivent venir d’un choix de mouvement, pas d’une dérive accidentelle entre deux dessins.

Un logiciel graphique doté de calques et d’une pelure d’oignon simplifie ce contrôle. Aseprite convient au travail image par image ; Krita ou Photoshop peuvent aussi participer au flux de production, selon les habitudes et les besoins d’export.

Pour prendre en main les outils de dessin, ce parcours sur la création d’une première illustration avec Aseprite fournit un prolongement pratique. L’objectif reste de maîtriser les repères, pas d’accumuler des fonctions inutilisées.

Une première pose validée devient la référence pour les autres : proportions, palette, volume du sac et hauteur du personnage peuvent être comparés sans repartir de zéro. La précision du dessin initial prépare la stabilité de toute la séquence.

Une démonstration visuelle permet notamment d’observer les corrections de contour et les déplacements d’un pixel, souvent difficiles à percevoir sur une image isolée. Ces petits ajustements deviennent décisifs lorsque les poses sont mises en mouvement.

Animer un sprite : poses clés, cadence et boucle de marche

Décomposer une action avant de dessiner toutes les images

Une animation convaincante commence par une action compréhensible. Pour une marche, les principales étapes comprennent le contact du pied, l’abaissement du corps, le passage de la jambe libre et la remontée avant le contact suivant.

Ces poses clés définissent le rythme et le poids du personnage. Les dessins intermédiaires servent à les relier ; ils ne remplacent pas une bonne construction du mouvement, même lorsqu’ils sont nombreux.

Pour Nox, huit images peuvent constituer une base de travail raisonnable. Quatre correspondent à la progression d’une jambe, quatre à celle de l’autre, avec des variations du torse et du sac qui rendent la démarche moins mécanique.

Le nombre exact dépend de l’intention visuelle. Une marche volontairement saccadée peut fonctionner avec peu d’étapes, tandis qu’une démarche souple demande parfois davantage de transitions ou des durées différentes entre les poses.

Distinguer cadence d’animation et fréquence d’affichage

La cadence de lecture indique combien de changements d’image sont programmés par seconde. Elle ne doit pas être confondue avec la fréquence de rendu du jeu, qui peut afficher plusieurs fois la même pose avant de passer à la suivante.

Huit étapes jouées à huit images par seconde produisent un cycle d’une seconde. Les mêmes étapes à douze images par seconde donnent un cycle d’environ 0,67 seconde, sans qu’il soit nécessaire d’ajouter de nouveaux dessins.

Une séquence d’une seconde à trente changements par seconde peut comporter trente entrées dans sa chronologie, mais pas obligatoirement trente dessins uniques. Certaines poses peuvent être répétées ou maintenues plus longtemps, selon le format et les possibilités du lecteur.

Cette nuance aide à éviter une production inutilement lourde. Le caractère d’une action dépend autant du temps accordé à chaque pose que du volume d’images disponibles.

Donner du poids au mouvement et supprimer les défauts de boucle

Pourquoi un coursier paraît-il glisser alors que ses jambes bougent ? Souvent parce que la vitesse de déplacement dans la scène ne correspond pas à la longueur du pas représenté, ou parce que le pied censé rester posé dérive visiblement.

Le contrôle doit donc porter sur le contact avec le sol. Pendant la phase d’appui, le déplacement relatif du pied dans le dessin doit rester compatible avec la progression du personnage à l’écran ; cette relation se juge mieux en situation qu’en regardant la planche seule.

Le sac fournit un autre indice de poids. Un léger retard par rapport au torse suggère l’inertie, tandis qu’un rebond synchronisé trop parfaitement avec chaque articulation donne une impression de mannequin rigide.

La jonction entre la dernière et la première image mérite une vérification spécifique. Une différence excessive de position, de volume ou de contour crée une secousse qui revient à chaque cycle et devient rapidement plus visible que les autres défauts.

La pelure d’oignon aide à comparer les étapes voisines, mais la lecture répétée reste indispensable. Le tutoriel pour animer un personnage en pixel art permet d’approfondir cette logique de poses et de transitions.

Il faut également décider quelles actions se répètent. L’attente et la marche peuvent tourner en boucle ; une attaque, une réception ou une disparition doivent généralement se terminer avant de céder la place à un autre état.

Tester une marche très lentement révèle les erreurs de dessin, tandis qu’une lecture à vitesse cible révèle les erreurs de rythme. Le bon mouvement se construit dans les poses et se confirme dans leur enchaînement.

Les démonstrations de cycles de marche sont particulièrement utiles pour comparer le mouvement des pieds et celui du bassin. Une modification minuscule de la hauteur du corps peut suffire à transformer une démarche flottante en pas bien ancré.

Créer une sprite sheet : assemblage, transparence et exportation d’images

Organiser une grille régulière sans perdre les séquences

Lorsque les poses sont prêtes, leur assemblage doit produire un fichier prévisible. Une grille régulière facilite le découpage : toutes les cellules partagent la même largeur et la même hauteur, même si certaines contiennent davantage d’espace transparent.

Prenons trente images de 32 × 32 pixels, réparties sur huit colonnes. Sans marges ni espacement, la planche mesure 256 × 128 pixels et comporte trente-deux emplacements ; les deux dernières cases ne contiennent aucune pose valide.

Ces emplacements vides ne doivent pas entrer dans la lecture. Le moteur doit recevoir une limite ou une liste explicite des images utilisées, faute de quoi le personnage disparaîtra brièvement lorsque la séquence atteindra les cases inutilisées.

La présence de plusieurs lignes ne pose aucun problème si le chargeur connaît la taille des cellules. En revanche, ajouter une bordure extérieure ou un intervalle entre les cases impose de renseigner ces valeurs dans les paramètres de découpage.

Pour notre coursier, une organisation par action reste facile à contrôler visuellement. Une convention écrite, même courte, peut préciser que les indices 0 à 3 correspondent à l’attente et les indices 4 à 11 à la marche, sans dépendre de la mémoire du dessinateur.

Préserver la transparence et les contours du pixel art

Le PNG avec canal alpha convient généralement à ce type d’export : il conserve la transparence et n’ajoute pas d’artefacts de compression avec perte. Le JPEG, dépourvu de transparence native, peut dégrader les contours et créer des halos autour des aplats.

La couleur de fond visible dans l’éditeur ne doit pas être confondue avec une vraie transparence. Un damier affiché par le logiciel est normalement une aide de visualisation ; s’il a été dessiné dans l’image, il apparaîtra aussi dans le jeu.

Pour garder des pixels nets, le réglage de filtrage compte autant que le fichier. Un agrandissement avec interpolation lisse brouille les contours, tandis qu’un filtrage au plus proche voisin conserve les blocs ; un facteur entier limite les irrégularités de taille.

L’exportation d’images doit aussi préserver les dimensions attendues. Un recadrage automatique indépendant pour chaque pose peut casser l’alignement si le moteur ne dispose d’aucune information pour reconstruire le placement d’origine.

Passer à un atlas lorsque l’empaquetage apporte un gain réel

Un atlas devient intéressant lorsque les éléments présentent des formes et des dimensions très différentes. Retirer les grandes zones transparentes peut réduire la surface occupée, mais ce gain impose de conserver les informations nécessaires au positionnement.

Le fichier JSON associé décrit notamment le rectangle stocké, la taille source et le décalage dû au recadrage. Sans ces données, Nox pourrait se décaler brutalement lorsque son bras passe d’une pose compacte à une pose étendue.

Certains outils proposent également la rotation des régions pendant l’empaquetage. Cette option ne doit être activée que si le format exporté et le moteur la prennent en charge, sinon une partie des visuels sera lue dans le mauvais sens.

Des marges ou une extrusion des pixels de bord peuvent réduire les contaminations entre régions lorsque le filtrage échantillonne les voisins. Leur valeur dépend de l’échelle, des mipmaps et du moteur ; elle doit être testée plutôt qu’appliquée comme une règle absolue.

Aseprite, Adobe Animate ou un outil spécialisé comme TexturePacker peuvent intervenir dans cette préparation, selon les formats requis. La compatibilité du JSON, notamment ses variantes par tableau ou dictionnaire, mérite une vérification avant l’import.

Regrouper plusieurs actions peut simplifier le chargement et faciliter le partage d’une texture, mais ne garantit pas à lui seul une meilleure performance. Une bonne exportation conserve à la fois les pixels et les informations qui permettent de les replacer correctement.

Importer une sprite sheet dans Phaser ou Godot et vérifier son fonctionnement

Dans Phaser : charger les images puis définir les séquences

Dans Phaser 3, une planche régulière se charge avec une configuration indiquant notamment la largeur et la hauteur des cellules. Les options de marge et d’espacement doivent correspondre au fichier réellement exporté, pas aux valeurs supposées pendant le dessin.

Le chargement ne déclenche pas automatiquement le mouvement. Il faut définir une séquence, sélectionner les indices concernés, choisir une cadence et préciser si la lecture se répète, puis demander au personnage de jouer cette séquence.

Pour Nox, l’attente et la marche possèdent donc des définitions distinctes, même lorsqu’elles partagent la même texture. Le programme sélectionne l’une ou l’autre selon l’état du coursier, sans avoir besoin de recharger l’image à chaque changement.

Avec un atlas, le fichier graphique et ses métadonnées sont chargés ensemble. Des noms réguliers comme « nox_marche_0000 » et « nox_marche_0001 » facilitent la sélection des étapes et évitent les ambiguïtés entre plusieurs actions.

Les tutoriels plus anciens consacrés à Phaser CE utilisent des méthodes et une organisation différentes de celles de Phaser 3. Le principe de lecture reste valable, mais les exemples doivent correspondre à la version du moteur : mélanger les interfaces produit des erreurs sans rapport avec la qualité des dessins.

Dans Godot : construire une ressource SpriteFrames

Dans Godot 4, AnimatedSprite2D s’appuie sur une ressource SpriteFrames contenant les animations et leurs images. L’éditeur permet d’ajouter des fichiers séparés ou de sélectionner des cellules provenant d’une même planche.

Il faut renseigner correctement le découpage horizontal et vertical, puis choisir les cases dans l’ordre souhaité. Les emplacements vides de notre exemple à trente poses doivent rester exclus, même s’ils appartiennent géométriquement à la grille.

Chaque action dispose de ses propres réglages de vitesse et de boucle. Une réception peut être jouée une seule fois, tandis que l’attente se répète ; cette distinction rend les transitions plus naturelles et empêche une chute de recommencer indéfiniment.

Le nœud chargé de l’affichage ne remplace pas le système de déplacement ni les collisions. Le dessin montre une posture, alors que la logique physique détermine la position réelle : les deux doivent être coordonnés sans être confondus.

Tester le personnage dans une scène représentative

Une vérification sur fond uni ne suffit pas. Nox doit aussi être observé devant une chaussée sombre, une vitrine claire et un décor chargé, car le contraste qui fonctionne dans l’éditeur peut disparaître au milieu des enseignes.

La même prudence vaut pour les dimensions : un personnage lisible en grand peut devenir indistinct à l’échelle prévue. Le test doit employer la résolution, le zoom et le filtrage du jeu, plutôt qu’une fenêtre agrandie pour le confort du dessinateur.

• 🔍 Découpage : aucune case voisine ni zone vide ne doit apparaître.
• 👣 Alignement : les appuis restent cohérents lorsque l’action change.
• ⏱️ Rythme : les jambes accompagnent la vitesse réelle de déplacement.
• 🎨 Lisibilité : silhouette et accessoires résistent aux différents décors.
• 📦 Ressources : les fichiers et métadonnées portent des noms cohérents.

Les changements d’état demandent une attention particulière. Si la marche est relancée à sa première image à chaque mise à jour, elle peut sembler bloquée ; elle ne doit être redémarrée que lorsque le comportement ou les besoins de lecture l’exigent.

La pause, la reprise et la variation de vitesse méritent aussi un test. Elles permettent de vérifier que la lecture conserve un état cohérent et que les actions ponctuelles ne sont pas interrompues par une transition mal placée.

Si un générateur automatisé participe à la fabrication, les proportions, les accessoires et les orientations doivent être inspectés pose par pose. Une planche séduisante peut présenter des incohérences qui deviennent flagrantes dès son passage en boucle.

Conserver le fichier source, les réglages d’export et une courte nomenclature facilite les modifications futures. Un personnage exploitable est celui dont le dessin, le découpage et le comportement restent cohérents dans la scène réelle.

Questions fréquentes sur la création de sprites et de sprite sheets

Faut-il obligatoirement utiliser le pixel art pour créer un sprite ?

Non. Un sprite peut provenir d’un dessin peint, d’une illustration vectorielle exportée ou d’un rendu 3D. Le terme décrit son rôle dans l’affichage, pas une esthétique particulière. Le pixel art demande surtout un contrôle précis des contours, de la palette et du filtrage.

Combien d’images faut-il pour une animation de marche ?

Il n’existe pas de nombre universel. Quatre à huit poses peuvent servir de point de départ pour une démarche stylisée, mais le résultat dépend des poses clés, de leur durée et de la vitesse du personnage. Ajouter des dessins ne corrige pas automatiquement un mauvais rythme.

Pourquoi le personnage tremble-t-il pendant la lecture ?

Le tremblement vient souvent d’un mauvais alignement, d’un repère d’appui variable ou d’un recadrage dont les décalages ne sont pas pris en compte. Comparez les poses avec une ligne de sol commune, puis vérifiez le point d’ancrage et les métadonnées de l’atlas.

Une sprite sheet doit-elle avoir des dimensions en puissance de deux ?

Pas systématiquement. Les moteurs modernes acceptent généralement d’autres dimensions, mais certaines contraintes de plateforme, de compression ou de traitement des textures peuvent imposer des formats particuliers. Pour une grille régulière, respectez surtout les dimensions des cellules, les marges et les espacements annoncés au chargeur.

Peut-on réunir plusieurs animations dans le même fichier ?

Oui. Attente, marche, course et attaque peuvent partager une planche. Chaque action doit sélectionner uniquement ses propres images, par indices ou par noms. Un atlas accompagné de métadonnées permet aussi de réunir des régions de tailles différentes tout en conservant leur placement correct.