ToolCabana

Créateur de feuilles de sprites

Assemble des images dans un atlas et exporte les coordonnées.

Favorites are saved in this browser. Find them in My favorites.

Créateur de feuilles de sprites

Your input stays in this browser unless stated otherwise
Clear your input, files and result, and restore the default settings.

Drop your files here

or choose files from your device

Comment utiliser Créateur de feuilles de sprites

The Image sprite sheet maker packs multiple images into one PNG grid of square cells and exports a JSON file with each sprite's x, y, width and height. You set the number of columns from 1 to 20, a cell size from 8 to 1,024 pixels and a gap of up to 100 pixels between cells. Images are scaled to fit their cell while keeping aspect ratio.

  1. Choisissez un fichier source. Si l'outil accepte plusieurs fichiers, classez-les dans l'ordre souhaité.
  2. Ajustez les paramètres de base, puis ouvrez le mode avancé pour les options d'export et de réglage fin. Vos paramètres personnalisés restent actifs une fois le panneau fermé.
  3. Lancez le créateur de feuilles de sprites, vérifiez le résultat, puis utilisez les commandes de copie ou de téléchargement disponibles.

Ce que cet outil prend en charge

Assemblez des images dans un atlas et exportez les coordonnées.

Colonnes
Range: 1 to 20
Taille des cellules carrées (px)
Range: 8 to 1024
Espacement des cellules (px)
Range: 0 to 100

Limites et traitement

Les images utilisent la limite existante de 32 mégapixels du canevas. Jusqu'à 100 images source sont autorisées lorsque c'est pris en charge. Le HTML collé est limité à 200 000 caractères ; les diagrammes Mermaid à 20 000 caractères et 300 lignes. La génération SVG et PNG nécessite un navigateur.

Questions fréquentes

What does the sprite coordinates JSON contain?

The sprite-coordinates.json file has one entry per image, keyed by its position number and file name, such as 1-icon.png. Each entry gives the x and y offset of the sprite in the sheet and its drawn width and height in pixels.

How are sprites positioned inside each cell?

Every image is scaled down or up to fit inside the square cell while keeping its aspect ratio, then drawn from the top-left corner of the cell. Non-square images therefore leave empty transparent space to the right or below.

Why add a gap between sprites?

A gap of a few pixels keeps neighboring sprites from bleeding into each other when the sheet is scaled or filtered in a game engine or CSS. The gap is added after each cell, and the coordinates in the JSON already account for it.

Où ma saisie est-elle traitée ?

Cette opération traite sa source dans votre navigateur. La copie et le téléchargement sont des actions explicites ; la saisie source n'est enregistrée dans aucun compte ni historique.

Quelles sont les limites de saisie ?

Les images utilisent la limite existante de 32 mégapixels du canevas. Jusqu'à 100 images source sont autorisées lorsque c'est pris en charge. Le HTML collé est limité à 200 000 caractères ; les diagrammes Mermaid à 20 000 caractères et 300 lignes. La génération SVG et PNG nécessite un navigateur.