Créer une feuille de sprite PNG et une carte JSON

Disposer de deux à soixante-quatre images raster prises en charge dans des cellules fixes et télécharger un PNG ainsi qu'une carte de coordonnées JSON avec origine en haut à gauche dans un ZIP.

Quand cet outil est utile

Emballer de petits sprites de jeu, icônes, vignettes ou états d'interface utilisateur dans un bitmap prévisible avec des coordonnées de cellules lisibles par machine.

Comment le traitement local fonctionne

Les entrées restent dans l'ordre sélectionné, les colonnes sont limitées par le nombre réel d'entrées, chaque frame reçoit une cellule fixe, contain centre l'image entière et cover remplit puis recadre, les espaces conservent le fond RGBA choisi, et le ZIP contient sprite-sheet.png ainsi que les coordonnées déterministes sprite-sheet.json.

Comment l'utiliser

  1. Préparer la source: Emballer de petits sprites de jeu, icônes, vignettes ou états d'interface utilisateur dans un bitmap prévisible avec des coordonnées de cellules lisibles par machine.
  2. Traiter localement: Les entrées restent dans l'ordre sélectionné, les colonnes sont limitées par le nombre réel d'entrées, chaque frame reçoit une cellule fixe, contain centre l'image entière et cover remplit puis recadre, les espaces conservent le fond RGBA choisi, et le ZIP contient sprite-sheet.png ainsi que les coordonnées déterministes sprite-sheet.json.
  3. Télécharger et vérifier: Extraire les deux fichiers, confirmer les dimensions du PNG, l'origine en haut à gauche, l'ordre des frames et les rectangles de cellules par rapport au JSON, inspecter le padding contain ou les recadrages cover, et charger la carte dans l'application consommatrice.

Limitations importantes

Le PNG est une feuille raster plate : animation, vecteurs, calques, métadonnées source, conteneurs indépendants et intentions de profil de couleur ne sont pas conservés. Cover peut recadrer les bords, contain peut laisser le fond, et les limites de source, pixels totaux, canevas, mémoire, PNG, JSON et ZIP s'appliquent.

Vérifier le résultat téléchargé

Extraire les deux fichiers, confirmer les dimensions du PNG, l'origine en haut à gauche, l'ordre des frames et les rectangles de cellules par rapport au JSON, inspecter le padding contain ou les recadrages cover, et charger la carte dans l'application consommatrice.

Privé par conception

Vos fichiers restent dans ce navigateur. L'outil n'envoie pas la source ni le résultat à nos serveurs.

Questions et réponses

Quand cet outil est-il utile ?

Emballer de petits sprites de jeu, icônes, vignettes ou états d'interface utilisateur dans un bitmap prévisible avec des coordonnées de cellules lisibles par machine.

Que fait réellement le navigateur ?

Les entrées restent dans l'ordre sélectionné, les colonnes sont limitées par le nombre réel d'entrées, chaque frame reçoit une cellule fixe, contain centre l'image entière et cover remplit puis recadre, les espaces conservent le fond RGBA choisi, et le ZIP contient sprite-sheet.png ainsi que les coordonnées déterministes sprite-sheet.json.

Quels limites dois-je comprendre ?

Le PNG est une feuille raster plate : animation, vecteurs, calques, métadonnées source, conteneurs indépendants et intentions de profil de couleur ne sont pas conservés. Cover peut recadrer les bords, contain peut laisser le fond, et les limites de source, pixels totaux, canevas, mémoire, PNG, JSON et ZIP s'appliquent.

Comment devrais-je vérifier le résultat ?

Extraire les deux fichiers, confirmer les dimensions du PNG, l'origine en haut à gauche, l'ordre des frames et les rectangles de cellules par rapport au JSON, inspecter le padding contain ou les recadrages cover, et charger la carte dans l'application consommatrice.

Outils associés