Sprite Animator : prévisualiser et exporter des animations de feuilles de sprites

Un sprite animator est un outil qui prend une feuille de sprites — une grille de frames d'animation regroupées dans une seule image — et la lit en boucle pour vous permettre de juger le timing, l'espacement et la silhouette avant que l'art ne parte dans un jeu. Le sprite animator de Neta Studio lit la feuille, devine la taille de frame, le nombre de colonnes et l'ordre de lecture à partir des dimensions de l'image, puis lance la lecture sur un canvas dans le navigateur. Rien n'est envoyé.

Une image fixe ne vous dit rien d'un cycle de marche. Il faut voir la frame 3 à côté de la frame 4, la pose de contact à côté de la pose de passage, et vérifier si l'ensemble dérive parce qu'une cellule est décalée d'un pixel. L'animateur fait cela au chargement, puis vous laisse corriger à la main la taille de frame, l'ordre et le FPS quand la déduction est fausse.

Prévisualiser l'animation d'une feuille de sprites

Déposez un PNG ou un WebP sur le canvas. L'animateur lit la largeur et la hauteur intrinsèques, puis en déduit une grille plausible : il factorise les dimensions et cherche un petit nombre entier de colonnes (de 2 à 16) qui donne des cellules à peu près carrées dans les tailles de sprites courantes. Une feuille 512×512 avec 4 colonnes de frames de 128px, une feuille 384×256 avec 6 colonnes de frames de 64px — les deux tombent sur la bonne déduction la plupart du temps. Une feuille 300×300, non, car 300 ne se divise pas proprement en 16/32/64 ; vous devrez donc régler la taille de frame manuellement.

La lecture se fait sur un canvas HTML avec `imageSmoothingEnabled = false`, donc les pixels restent nets à une échelle entière. Un agrandissement à 4× ou 8× se fait en plus proche voisin, ce qui est souhaitable pour le pixel art : une frame de 32px affichée à 8× donne un sprite de 256px à l'écran, chaque pixel source étant dilaté en un bloc de 8×8. Un lissage bilinéaire transformerait tout cela en bouillie grise.

Comme tout se passe sur le canvas, le fichier ne quitte jamais la machine. Aucun envoi, aucune file d'attente, aucun compte. Vous pouvez déposer la feuille non publiée d'un client : elle reste dans l'onglet. La contrepartie, c'est que les feuilles très volumineuses sont limitées par la mémoire du navigateur — un PNG 4096×4096 représente environ 67 Mo une fois décodé en RGBA, ce qui passe sur ordinateur de bureau mais devient juste sur une tablette d'entrée de gamme.

Régler la taille de frame, l'ordre et le FPS

Trois réglages déterminent ce que vous voyez réellement : la taille de frame, l'ordre de lecture et la vitesse. Si l'un d'eux est faux, l'animation semble catastrophique pour des raisons qui n'ont rien à voir avec l'art.

La taille de frame est la largeur et la hauteur d'une cellule en pixels. L'animateur propose 16, 32, 64 et 128 comme choix standard, plus une valeur personnalisée. Elle doit diviser exactement les dimensions de la feuille. Une frame de 128px sur une feuille large de 400px donne 3,125 colonnes ; le moteur de rendu arrondit à 3 et laisse une bande de 16px de pixels inutilisés à droite — ces pixels apparaissent alors comme un fragment de la frame voisine dans la dernière colonne. Si vos frames semblent cisaillées sur le bord droit, c'est que la taille de frame ne divise pas la largeur de la feuille.

L'ordre est row-major ou column-major. Le row-major (le défaut courant, et ce que produisent la plupart des exportateurs) lit de gauche à droite, puis passe à la ligne suivante. Le column-major lit de haut en bas, puis avance vers la droite. Une feuille de marche exportée en colonnes mais lue en lignes joue la frame 1, puis la frame 5, puis la frame 9 — une foulée qui saute d'un quart de l'animation à chaque tick. La correction tient à une bascule, mais il faut reconnaître le symptôme : un mouvement qui saute des étapes.

Le FPS et `image_speed` sont deux réglages différents que l'on confond souvent. Le FPS est le nombre de frames dont le lecteur avance par seconde. `image_speed` (terme de GameMaker, et celui que les gens tapent dans leurs recherches) est un multiplicateur du taux d'animation du sprite par rapport à la vitesse de la room ; 1.0 signifie que la feuille joue une frame par pas de jeu, 0.5 une frame tous les deux pas. Dans l'animateur du navigateur, réglez directement le FPS. Si vous portez un sprite GameMaker et que votre personnage s'anime à vitesse double, vérifiez `image_speed` avant de redécouper la feuille.

Cycles de marche, idles et attaques

Trois animations portent l'essentiel de la lisibilité d'un personnage, et chacune échoue d'une manière qui lui est propre. Aucune n'échoue de la même façon, donc un outil de prévisualisation qui ne boucle qu'un clip générique passe à côté de l'essentiel. Ci-dessous, les modes d'échec sont séparés par type d'animation.

La règle vaut pour les trois : prévisualisez à l'échelle finale du jeu, pas en zoom. Une marche qui se lit à 8× s'effondre souvent à 1× parce que le lever de jambe fait 2 pixels et que le contraste entre le pied levé et le sol est trop faible. Réduisez la prévisualisation à la taille que le joueur verra réellement avant de valider quoi que ce soit.

Une feuille de marche à quatre directions est généralement ordonnée bas, gauche, droite, haut — bas face à la caméra, haut tourné, gauche et droite formant la paire horizontale. Certains exportateurs utilisent bas, haut, gauche, droite. Si votre personnage fait du moonwalk quand vous appuyez sur haut, les lignes sont inversées et vous jouez la ligne bas pour une entrée haut. C'est une correction de 2 lignes dans le lecteur, pas un nouvel export.

Pour un déplacement en 8 directions, il faut des diagonales : bas-gauche, bas-droite, haut-gauche, haut-droite. Avec quatre directions en miroir horizontal, vous obtenez 4 lignes à moindre coût (gauche et droite sont le même art retourné, c'est pourquoi beaucoup de feuilles ont 4 lignes et non 8). Un déplacement diagonal avec seulement 4 directions force le moteur à choisir l'orientation la plus proche, ce qui produit un à-coup visible sur une entrée diagonale. Si votre jeu gère le déplacement diagonal, prévoyez 8 lignes distinctes ou acceptez l'à-coup.

Nombre de frames : 6 ou 8 frames par direction est courant à 16–32px. À 4 frames, une marche paraît saccadée mais reste lisible en petite taille ; à 10 frames, l'espacement entre poses de contact et de passage devient assez serré pour exiger un timing par frame, qu'un lecteur à FPS uniforme ne peut pas exprimer. L'animateur du navigateur joue de façon uniforme, donc construisez votre feuille avec un espacement régulier si vous comptez la prévisualiser ici.

L'idle est l'animation que le joueur fixe pendant qu'il ne se passe rien, c'est donc elle qui pèse le plus par frame. La structure standard est une boucle de respiration : la poitrine se soulève, les épaules montent d'un pixel, le poids se déplace, puis retour. Le squash and stretch est ce qui l'empêche de ressembler à un sprite statique que l'on secoue. Sur le temps fort, comprimez le personnage d'un ou deux pixels verticalement et élargissez-le d'un ; sur le temps faible, faites l'inverse.

L'erreur courante est d'exagérer le squash. Un personnage de 32px comprimé de 4px perd 12,5 % de sa hauteur et ressemble à une gelée. Un pixel d'étirement vertical sur un sprite de 32px représente 3 % et évoque une respiration. Si votre idle donne l'impression que le personnage rebondit sur un trampoline, c'est probablement que vous avez mis à l'échelle toute la cellule plutôt que le personnage qu'elle contient — la frame a changé de taille par rapport à la grille.

Prévisualisez l'idle au FPS que vous livrerez. Un idle à 6 FPS dérive ; à 12 FPS, il respire. Comme un idle lent est surtout la même image avec de petits décalages, ce que vous vérifiez en réalité c'est le point de bouclage : la dernière frame doit enchaîner proprement sur la première, sans saut dans la position des épaules.

Une attaque, ce sont trois phases au timing inégal, pas une salve uniforme. L'anticipation tire en arrière — le bras s'arme, le corps se ramasse, souvent 2 à 3 frames tenues ou ralenties. L'impact dure une ou deux frames, la partie la plus rapide, où l'arme atteint sa pleine extension et où la pose est à son plus extrême. La récupération est le retour, et c'est là que les amateurs coupent trop tôt. Une attaque de 6 frames avec 2 d'anticipation, 1 d'impact et 3 de récupération se lit ; une attaque de 6 frames réparties également 2-2-2 ressemble à une bourrade.

Comme l'animateur joue de façon uniforme, l'astuce consiste à tenir la pose d'anticipation en dupliquant des frames plutôt qu'en modifiant le timing par frame. Deux frames d'anticipation identiques produisent la tenue. Une frame d'impact produit le déclic. C'est la même technique que dans les feuilles faites à la main, et elle survit à un portage vers n'importe quel moteur.

Les animations de sort ajoutent un second problème : l'effet doit apparaître et disparaître sur une frame précise. Si votre feuille intègre le projectile ou le cercle magique dans la frame, le lecteur doit savoir quand faire apparaître le véritable objet — généralement la première frame d'impact. Si l'effet est un objet séparé, gardez la feuille propre et calez l'apparition sur l'index de la frame d'impact, pas sur une seconde d'horloge.

Générer un cycle de marche à partir d'un seul prompt

Créer à la main huit lignes de cycle de marche représente des heures de travail, et le résultat est une feuille qu'il faut encore vérifier dans un lecteur. Agent Sprite Forge inverse la logique : vous écrivez une description du personnage, et il produit la feuille. Une description, huit directions, la feuille arrive déjà découpée en grille avec des frames transparentes et des repères d'ancrage aux pieds pour que le personnage ne flotte pas quand vous le placez.

Les repères d'ancrage comptent plus que l'art au premier passage. Un cycle de marche où les pieds ne partagent pas une ligne de sol donne l'impression que le personnage est sur un trampoline, quelle que soit la qualité du dessin. Comme les frames générées portent l'ancrage, vous pouvez déposer la feuille dans l'animateur, la jouer et voir la ligne de sol tenir — c'est la vérification qu'une image statique ne peut pas vous offrir.

La sortie générée est une feuille de sprites normale : lignes et colonnes, fond transparent, tailles de frame standard. Rien n'y est verrouillé sur Neta Studio. Exportez-la, déposez-la dans l'animateur pour une passe de prévisualisation, redécoupez-la si votre moteur veut une seule ligne, et passez à la suite. Si le générateur vous donne une direction dont vous n'avez pas besoin — disons dos-gauche, parce que votre jeu ne gère que 4 directions — ignorez cette ligne à l'étape de redécoupage.

Logiciels d'animation de sprites : ce qu'il faut comparer

Le bon outil dépend de ce que vous avez déjà sous la main. Une feuille terminée et une question de timing, c'est un problème différent d'un canvas vierge sans personnage. Le tableau ci-dessous associe le point de départ à l'outil qui convient, et inclut les cas où l'animateur du moteur est la bonne réponse et où un lecteur tiers est superflu.

Règle empirique : si vous prévisualisez, utilisez un lecteur. Si vous créez, utilisez un éditeur. Si vous générez, utilisez un générateur. La plupart des confusions viennent de l'usage d'un lecteur pour créer — on ne corrige pas une mauvaise pose de contact dans un outil de lecture, et on ne corrige pas un ressenti de timing dans un outil de dessin dépourvu de lecture.

Exporter un GIF ou une feuille redécoupée

Deux exports couvrent la plupart des cas. Le premier est un GIF animé : la boucle en cours, au FPS en cours, à l'échelle en cours, en un seul fichier. Un GIF n'a pas de runtime et se lit dans n'importe quelle fenêtre de chat, outil de relecture ou gestionnaire de tickets. C'est ce que vous envoyez à un collaborateur qui ne va rien installer. Le coût, c'est une palette de 256 couleurs, ce qui convient à la plupart des pixel arts et produit un banding visible sur les dégradés doux — si votre sprite a une lueur progressive, attendez-vous à une posterisation.

Le second est une feuille redécoupée. L'animateur prend la feuille chargée et ses réglages de frames, puis écrit une nouvelle image avec un autre conditionnement : une seule ligne pour un flipbook, ou quatre lignes pour un ensemble directionnel, ou la même grille avec une taille de cellule différente. Le redécoupage est sans perte quand la taille de cellule reste identique et que vous ne faites que réordonner. Quand vous changez la taille de cellule, l'outil rééchantillonne, et tout rééchantillonnage de pixel art qui n'est pas un multiple entier adoucit les bords.

Un redécoupage courant est le flipbook : toutes les frames d'une animation disposées de gauche à droite sur une seule ligne, sans retour à la ligne. Certains moteurs et certaines techniques CSS de sprites veulent cette forme. Prenez une marche de 6 frames, redécoupez-la en une ligne de 6 : la bande fait 6× la largeur de frame sur 1× la hauteur de frame. Si vous voulez cette bande sous forme de GIF, le convertisseur de feuille de sprites en GIF fait le même export de boucle depuis une feuille conditionnée.

Réglez la taille de frame et le nombre de colonnes avant d'exporter. L'exportateur écrit en utilisant la grille que vous avez configurée dans le lecteur, pas celle qu'il a déduite au chargement. Si vous avez forcé la déduction pour corriger un cisaillement sans revérifier le nombre de frames, la feuille exportée hérite du mauvais nombre.

Entrez dans le monde auquel il appartient

Un sprite est un personnage qui n'a nulle part où se tenir. La dernière étape est celle que personne d'autre ne propose : prenez la feuille que vous venez de créer et placez-la dans un monde où l'on peut se promener — une petite île, une planète, un coin de rue sous la pluie. Chaque monde de ce site a été créé à partir d'une seule description écrite et publié sous forme de page jouable.

FAQ