Comment créer une sprite sheet : le guide complet pour débutants

Ce guide explique comment créer une sprite sheet en partant de zéro : ce qu’est réellement une sprite sheet, les trois chiffres à fixer avant de dessiner, comment dessiner et exporter les frames dans Aseprite, comment assembler des frames éparses en une seule image, et les réglages d’import exacts pour Unity, Godot et RPG Maker. Il se termine par les erreurs qui donnent à une planche un air amateur, et comment éviter chacune d’elles.

Si vous avez déjà vos frames et voulez seulement les assembler, passez directement à l’assemblage des frames en une seule planche. Si vous préférez que les frames soient dessinées pour vous, le créateur de sprites IA présenté à la fin s’en charge.

Qu’est-ce qu’une sprite sheet ?

Une sprite sheet est une image unique qui contient toutes les frames d’une animation, disposées en ligne ou en grille de cellules de taille identique. Votre moteur dessine une fenêtre sur une cellule à la fois, la fait avancer d’une cellule à l’autre, et le personnage marche.

L’intérêt, plutôt que de livrer huit PNG séparés, c’est que le GPU charge une seule texture au lieu de huit. Dans un jeu 2D avec quarante entités animées à l’écran, la différence se voit dans le temps de rendu par image. Cela signifie aussi un seul fichier à versionner et un seul fichier à remplacer quand la direction artistique change.

Le format, lui, est fixé : cellules uniformes, aucun espace, un seul fichier. Ce qui ne l’est pas, et que les débutants ratent, c’est la poignée de chiffres à choisir avant de commencer.

Étape 1. Fixer les chiffres d’abord

Trois décisions conditionnent tout le reste. Prenez-les correctement maintenant et la suite de ce tutoriel est mécanique. Ratez-les et vous redessinerez chaque frame.

Nombre de frames : 6, 8 ou 12

C’est la décision qui change le plus la sensation de l’animation.

6 frames suffisent pour un cycle de marche si le personnage a des jambes simples et que le jeu se lit de loin. Des RPG en vue de dessus avec des sprites de 32 px sont sortis avec 4 frames pendant des décennies sans que personne ne s’en aperçoive.
8 frames, c’est le standard. Contact, bas, passage, haut, deux fois, en miroir. Vous obtenez un vrai transfert de poids et le nombre se divise proprement si vous voulez plus tard une version simplifiée à 4 frames.
12 frames commence à ressembler à de l’animation plutôt qu’à du mouvement. Réservez-les aux personnages qui occupent une grande place à l’écran, à une cape ou une chevelure qui doit flotter, ou à une action unique que le joueur regardera vraiment : une mort, un sort, une transformation. Sur un cycle de marche qui boucle pendant six heures de jeu, douze frames, c’est surtout du travail perdu.

Une règle qui tient : si la boucle tourne en permanence, investissez vos frames dans la lisibilité. Si elle tourne rarement, investissez-les dans la fluidité.

Taille de cellule : partir de l’écran et remonter

La taille de cellule, ce sont les dimensions en pixels d’une frame. Les valeurs courantes sont 16, 32, 64, 96 et 128.

Ne la choisissez pas selon « le niveau de détail que je veux ». Choisissez-la selon le nombre de pixels que le sprite occupera sur l’écran du joueur. Prenez une cible en 1920×1080. Si votre caméra affiche 30 tuiles en largeur, chaque tuile fait 64 pixels d’écran. Un personnage d’une tuile et demie de haut demande environ 96 pixels de dessin. Dessiner en 32 et agrandir ×3 vous donne volontairement le rendu granuleux. Dessiner en 128 et réduire vous donne de la bouillie, parce que réduire du pixel art détruit les bords nets qui en font du pixel art.

Le piège à éviter est une échelle d’affichage qui n’est pas un nombre entier. Du pixel art en 32 px affiché à ×2 est net. À ×2,4, il scintille sur chaque diagonale, et une fois que vous l’aurez remarqué, cela vous gênera pour toujours.

Perspective : à choisir avant la première frame

Quatre perspectives couvrent presque tout en 2D :

Vue de côté : le profil pur. Jeux de plateforme, jeux de combat, endless runners. Une seule direction, parfois en miroir.
Vue de dessus (top-down) : la caméra regarde droit vers le bas. Twin-stick shooters et roguelikes. Généralement quatre directions.
RPG sur grille : la vue de trois quarts où le personnage fait face à la caméra mais se déplace sur une grille. C’est le style RPG Maker. Quatre directions.
Isométrique : la vue de trois quarts en losange. La plus coûteuse, parce qu’un cycle de marche demande généralement huit directions.

La perspective n’est pas un filtre appliqué après coup. Elle détermine quels membres sont visibles, où tombe l’ombre et combien de variantes directionnelles vous vous devez. Un personnage vu de côté a besoin d’un seul cycle de marche ; un personnage de RPG sur grille en a besoin de quatre.

Étape 2. Dessiner les frames dans Aseprite

Aseprite est l’outil de référence pour l’animation en pixel art et le flux de travail ci-dessous est celui qu’utilisent la plupart des artistes de sprites. N’importe quel éditeur avec des frames et une pelure d’oignon (Piskel, Pyxel Edit, LibreSprite) fonctionne de la même manière, y compris le pixel art maker gratuit de ce site, qui tourne dans le navigateur sans rien à installer.

Créez le canevas à la taille de votre cellule. File → New, puis réglez la largeur et la hauteur sur la taille de cellule choisie plus haut (par exemple 32×32) avec un fond transparent. Ne dessinez pas sur un canevas plus grand pour recadrer ensuite ; la taille de cellule est le contrat passé avec votre moteur.
Dessinez la pose de contact. La frame 1 est le personnage avec un pied en avant, posé au sol. Soignez la silhouette ici, parce que toutes les autres frames en sont des variations.
Ajoutez des frames. Frame → New Frame (ou Alt+N) duplique la frame courante pour que vous puissiez ajuster plutôt que redessiner. Construisez la marche en contact → bas → passage → haut, puis répétez en miroir pour l’autre jambe.
Activez la pelure d’oignon. View → Show Onion Skin superpose les frames précédente et suivante en fantômes. C’est ainsi que vous gardez la tête à la même hauteur et les pieds sur la même ligne d’une frame à l’autre.
Prévisualisez la boucle. Appuyez sur Entrée pour lire l’animation. Regardez les pieds et le sommet de la tête. Si l’un ou l’autre oscille de façon irrégulière, corrigez-le maintenant, tant qu’il ne s’agit que d’une frame et pas d’une planche.
Exportez la planche. File → Export Sprite Sheet (Ctrl+E). Dans l’onglet Layout, choisissez Horizontal Strip pour une seule ligne, ou By Rows avec un nombre fixe de colonnes pour une grille. Dans l’onglet Borders, laissez Trim désactivé (des cellules uniformes comptent plus qu’une boîte englobante serrée) et ajoutez 1 à 2 px de Spacing si votre moteur filtre les textures. Dans l’onglet Output, activez JSON Data si vous voulez les rectangles de frames pour des moteurs comme Phaser.

L’export vous donne un seul PNG avec toutes les frames dans des cellules identiques. C’est votre sprite sheet. Si vous avez dessiné dans un outil qui n’exporte que des images séparées, l’étape suivante les assemble.

Étape 3. Assembler les frames en une seule planche

Beaucoup de flux de travail se terminent avec un dossier de PNG en vrac : walk_01.png à walk_08.png tirés d’un pack de sprites, des frames rendues depuis un modèle 3D, ou la sortie d’un générateur. Il faut en faire un seul fichier aux cellules uniformes.

Vous pouvez le faire à la main dans n’importe quel éditeur d’images : créez un canevas de columns × cellWidth par rows × cellHeight, puis placez chaque frame à un multiple exact de la taille de cellule. Ça marche, c’est fastidieux, et le décalage d’un pixel est vite arrivé.

La voie rapide, c’est le sprite sheet maker gratuit de ce site. Déposez-y les frames : il les trie par nom de fichier, cale la cellule sur la frame la plus grande, aligne toutes les frames sur une ligne de sol commune, et vous donne un PNG plus la taille de cellule à saisir dans votre moteur. Rien n’est envoyé sur un serveur ; l’assemblage se fait dans votre navigateur. Si votre animation est un GIF animé plutôt que des frames en vrac, le convertisseur GIF to sprite sheet en extrait chaque frame et les exporte en une seule planche PNG.

Quelle que soit la méthode, vérifiez deux choses avant de continuer : chaque cellule a exactement la même taille, et les pieds du personnage reposent sur la même ligne dans chaque frame. La seconde est invisible sur une image fixe et saute aux yeux dès que l’animation tourne.

Étape 4. Importer la planche dans votre moteur

Tous les moteurs attendent la même chose de vous : une planche où chaque cellule a la même taille, sans espace sauf si vous lui indiquez la taille de l’espace. Voici où se trouvent les réglages.

Unity

Sélectionnez le PNG. Dans l’Inspector, réglez Texture Type sur Sprite (2D and UI) et Sprite Mode sur Multiple.
Pour du pixel art, réglez Filter Mode sur Point (no filter) et Compression sur None. Le filtre bilinéaire par défaut est ce qui rend le pixel art flou, et tout le monde s’y fait prendre une fois.
Réglez Pixels Per Unit sur votre taille de cellule pour qu’une cellule corresponde à une unité de monde, puis cliquez sur Apply.
Ouvrez le Sprite Editor, choisissez Slice → Grid By Cell Size, saisissez la largeur et la hauteur de cellule (et le padding si vous avez ajouté un espacement), puis découpez.
Glissez ensemble les sprites obtenus dans la Scene pour créer un Animation Clip, ou construisez-en un dans la fenêtre Animation.

Godot 4

Ajoutez un nœud AnimatedSprite2D et créez une nouvelle ressource SpriteFrames dans sa propriété Sprite Frames.
Dans le panneau SpriteFrames, cliquez sur Add frames from a Sprite Sheet, choisissez votre PNG, puis réglez Horizontal sur votre nombre de colonnes et Vertical sur votre nombre de lignes. Godot découpe la grille pour vous.
Sélectionnez les frames qui composent l’animation, réglez les FPS et activez Loop.
Pour du pixel art, ouvrez Project Settings → Rendering → Textures et réglez Default Texture Filter sur Nearest. Réglez aussi le mode d’étirement du projet sur canvas_items avec une mise à l’échelle entière pour que votre ×2 reste exactement ×2.

RPG Maker MV / MZ

RPG Maker est plus strict que les deux autres parce qu’il ne vous laisse pas choisir la disposition. Une planche de personnage est une grille fixe :

Chaque personnage occupe 3 colonnes × 4 lignes : trois frames de marche par direction, et les lignes sont bas, gauche, droite, haut, dans cet ordre.
MV et MZ utilisent des cellules de 48×48 par défaut, donc un bloc de personnage fait 144×192 pixels.
Une planche standard contient 8 personnages en blocs disposés en 4×2 (576×384 pixels).
Préfixez le nom de fichier par $ pour indiquer au moteur que le fichier contient un seul personnage plutôt que huit. Préfixez-le par ! pour désactiver le léger décalage vers le haut que le moteur applique aux personnages, ce que vous voulez pour les objets et les portes.

Déposez le fichier dans img/characters/ et il apparaît dans le sélecteur de personnages. Si vos frames ne font pas 48×48, redimensionnez les cellules (pas le dessin) pour que la grille corresponde ; RPG Maker ne découpera pas une planche arbitraire.

Phaser (bonus)

this.load.spritesheet("hero", "hero.png", { frameWidth: 32, frameHeight: 32 });
this.anims.create({
  key: "walk",
  frames: this.anims.generateFrameNumbers("hero", { start: 0, end: 7 }),
  frameRate: 10,
  repeat: -1,
});

Réglez pixelArt: true dans la configuration du jeu pour que le moteur de rendu utilise une mise à l’échelle au plus proche voisin.

Cinq erreurs qui donnent à une planche un air amateur

Des cellules non uniformes. Rogner chaque frame à sa boîte englobante semble propre et casse complètement le découpage en grille. Gardez les cellules uniformes et laissez l’espace vide être vide.
Une ligne de sol incohérente. Si les pieds sont à y=60 sur la frame 1 et à y=58 sur la frame 5, le sprite oscille en marchant. Chaque frame doit avoir la même ligne de sol.
Des bavures sur les bords transparents. Quand le GPU échantillonne un pixel au bord d’une cellule, le filtrage bilinéaire va chercher la cellule voisine et vous obtenez un liseré d’un pixel de la mauvaise couleur. Utilisez le filtrage Point, ou ajoutez une marge transparente de 1 à 2 px autour de chaque cellule et indiquez le padding au moteur.
Une échelle d’affichage non entière. Du pixel art en 32 px affiché à ×2,4 scintille. Choisissez une taille de caméra qui vous donne exactement ×2, ×3 ou ×4.
Une silhouette qui dérive. Le personnage grossit ou s’amincit subtilement d’une frame à l’autre parce que chacune a été dessinée à partir de zéro. Dupliquez les frames et ajustez au lieu de redessiner, et utilisez la pelure d’oignon à chaque fois.

Ou sautez le travail manuel

Dessiner huit frames cohérentes à la main est une vraie compétence, et c’est la raison pour laquelle la plupart des développeurs solo sortent leur jeu avec des graphismes provisoires. Le goulot d’étranglement n’est pas l’idée ; c’est de garder les proportions, la palette et la silhouette d’un personnage stables sur chaque frame.

Ce problème de cohérence est précisément ce que la génération fait bien. Le créateur de sprites SpriteGen prend une description textuelle, vous laisse choisir la perspective, le style, le nombre de frames et la taille de cellule vus dans ce guide, et renvoie une sprite sheet terminée avec les frames déjà alignées sur une grille uniforme. L’essai est gratuit, sans inscription, et prend environ une minute. S’il vous faut un seul sprite fixe plutôt qu’une animation, comme un objet, une icône ou un PNJ, l’AI sprite maker le dessine sous forme de PNG pixel art transparent.

Quel que soit l’outil que vous utilisez, les chiffres ci-dessus sont ceux à fixer en premier. Ils coûtent bien moins cher à choisir correctement au départ qu’à corriger une fois que vous avez construit la machine à états de l’animation autour d’eux.

Qu’est-ce qu’une sprite sheet ?