Restaurer les images Aseprite rognées depuis une planche de sprites et un JSON

Une planche Aseprite empaquetée économise de l’espace de texture en rognant les pixels vides autour de chaque pose. Découper simplement ces rectangles fait sauter le personnage d’une position à l’autre, car chaque recadrage possède une origine différente. Le JSON associé fournit les informations manquantes pour retrouver le canevas original.

Développement de jeuxPar Dev.SWL9 octobre 20265 min de lecture

Exporter deux fichiers de la même session Aseprite

Ouvrez l'animation dans Aseprite et utilisez File → Export Sprite Sheet. Exportez une planche PNG et activez JSON. Le décompacteur ImageMint accepte les formes hash et tableau du JSON.
Gardez la planche et le JSON ensemble. Un JSON d’un export précédent peut désigner des rectangles qui ne correspondent plus à la planche, même si les fichiers portent des noms similaires.
Si vous activez le rognage ou l’empaquetage, conservez le JSON. Un découpeur à cases identiques ne peut pas déduire de la seule planche la position originale d’images recadrées différemment.
Chargez planche et JSON exportés dans le décompacteur. Vérifiez plusieurs poses avant le ZIP, pas seulement la première.

Trois rectangles, trois fonctions

Prenez un personnage dessiné sur un canevas de 64 × 64. Une pose rognée occupe un rectangle de 22 × 38, situé à 19 pixels du bord gauche et 20 du haut du canevas original. L’empaquetage peut placer ce recadrage en x=128, y=0 sur la planche exportée. Le JSON doit contenir ces trois informations :

Champ JSON	Exemple	Ce que cela signifie
`frame`	x=128, y=0, w=22, h=38	Où prélever les pixels sur la planche exportée.
`spriteSourceSize`	x=19, y=20, w=22, h=38	Où placer cette zone rognée sur le canevas de l’image d’origine.
`sourceSize`	w=64, h=64	La taille complète du canevas à restaurer.

Le décompacteur crée une image transparente 64 × 64, copie le morceau 22 × 38 de la planche et le dessine en (19, 20). Répéter cela pour chaque pose conserve la ligne de base du personnage. Ces rôles de champs correspondent à Documentation d'export de planche/JSON Aseprite; les positions exactes viennent de votre JSON.

Aventurier à cape verte recadré près d'un canevas rembourré montrant les décalages haut/gauche. — Le rognage supprime le canevas vide, pas le besoin d’informations de placement. Replacez le recadrage à son décalage original. Cette illustration conceptuelle n’est pas à l’échelle ; la restauration ne redimensionne pas les pixels du personnage. Ouvrir l'image complète

Points à examiner dans le ZIP téléchargé

Chaque image restaurée est un PNG numéroté. manifest.json liste les noms des images sources, les durées en millisecondes, les dimensions et les balises d’animation. Ouvrez côte à côte une pose d’attente et la pose d’attaque la plus extrême : les canevas doivent être égaux, et les pieds ou le point d’ancrage choisi doivent rester stables. Si la lecture saute encore, les dessins peuvent être mal alignés dans le projet Aseprite original ; restaurer les décalages de recadrage ne corrige pas ce problème de dessin.

Limites : l’outil de dépaquetage ne lit pas les fichiers natifs .aseprite fichiers ou images placées avec rotation. Il accepte jusqu’à 100 images, 1024 pixels par côté d’image restaurée et 20 millions de pixels d’images au total. Si une erreur liée à la rotation apparaît, exportez sans rotation et réessayez.

Pour des cases uniformes, le Découpeur de planches de sprites est plus simple. Utilisez la restauration JSON lorsque le placement ou le rognage a détruit la grille uniforme.

Diagnostiquer une paire correspondante au rendu incorrect

Symptôme	Première vérification	Correction sûre
meta.size ne correspond pas	La planche a-t-elle été redimensionnée après l’exportation ?	Réexportez les deux fichiers depuis le même projet.
Une mauvaise pose apparaît dans une image	Le JSON vient-il d'un autre empaquetage ?	Remplacez les deux fichiers, même si leurs dimensions correspondent.
Le canevas est correct mais le personnage se déplace	Comparez les poses originales Aseprite.	Corrigez l'alignement ; gardez les décalages de recadrage.
Erreur de rotation	La rotation lors du placement était-elle activée ?	Exportez sans rotation.

Un nom de fichier correspondant ne valide rien, et les mêmes dimensions ne prouvent pas que les coordonnées de recadrage décrivent l’image importée. Deux atlas de même taille peuvent organiser les poses différemment. Examinez une pose distinctive, comme une attaque avec une arme tendue, plutôt qu’une image d’attente presque identique.

Transférer durées et étiquettes à l'application suivante

Une image de 200 ms doit tenir plus longtemps qu'une de 80 ms. PNG garde les pixels ; manifest.json, durationMs et les étiquettes. Conservez les deux. Un lecteur à FPS uniformes donne logiquement un autre rythme même si l'alignement est parfait.

Les tags identifient des plages comme repos et marche, mais conserver un tag ne configure pas un état d’animation du moteur. Vérifiez les plages et le sens de lecture dans l’application de destination. L’aperçu ImageMint aide à vérifier l’alignement ; il n’exporte pas automatiquement le contrôleur d’animation du moteur.

Gardez deux versions pour deux usages : utilisez la planche assemblée d’origine et le JSON pour un stockage compact en atlas ; utilisez les PNG restaurés sur canevas complet pour la retouche, la comparaison des images et les flux exigeant des dimensions égales. Restaurer les marges échange l’efficacité de texture contre un alignement simple.

Essayez la méthode

Chargez planche/JSON pour voir l'alignement et télécharger PNG complets.

Restaurer les images Aseprite →