Découper une image en grilles, tuiles et images de sprite

01

Comment découper une image en tuiles exactes

découper une image — Contrôler chaque coupe avant la création

Choisissez lignes et colonnes lorsque la grille finale est prioritaire. Pour découper une image, l’outil répartit la zone utile uniformément et attribue les pixels restants de manière déterministe. Les préréglages produisent deux moitiés, quatre quarts ou une grille 3 par 3; les valeurs libres vont jusqu’à 20 par 20.

Choisissez une taille exacte lorsqu’un moteur, une impression ou une feuille de sprites impose déjà les dimensions. L’outil commence après la marge, avance selon la taille plus la gouttière et conserve une dernière tuile plus petite si nécessaire.

L’aperçu numéroté associe chaque rectangle à son nom. L’ordre normal part du haut gauche; l’ordre inverse attribue 01 au bas droite. Téléchargez une tuile pour la vérifier ou encodez tout le plan dans un ZIP.

• découper une image — 2 par 1 crée deux moitiés latérales.
• découper une image — 1 par 2 crée deux moitiés verticales.
• découper une image — 3 par 3 crée neuf panneaux égaux.
• découper une image — La taille exacte convient aux sprites.

02

découper une image — Choisir grille ou taille exacte

découper une image — Chaque coupe correspond aux pixels source

Pour découper une image, le calcul part des dimensions intrinsèques après décodage. Le mode grille retire marge et gouttières puis répartit le reste. Le mode exact avance selon les dimensions choisies et conserve le bord restant. Aperçu et export utilisent le même plan.

03

découper une image — Garder l’image privée

découper une image — Les API locales évitent le téléversement

L’outil reçoit un File local, le décode avec createImageBitmap() et emploie drawImage() pour copier chaque rectangle dans un Canvas temporaire. Il n’existe ni requête d’envoi ni projet distant. Effacer ferme le bitmap et révoque son URL locale.

04

découper une image — Exporter une tuile ou un ZIP

découper une image — Format, qualité et noms restent explicites

Vous pouvez découper une image vers PNG, JPEG ou WebP. PNG convient au texte et à la transparence, JPEG aux photos, WebP aux destinations compatibles. Une tuile encode un rectangle; le ZIP encode tout le plan avec des noms numérotés.

05

découper une image — Comment l’outil est vérifié

découper une image — Documentation officielle et contrôles reproductibles

La vérification charge des images colorées de dimensions connues, teste grille et taille exacte, ajoute marge et gouttière, compare les coordonnées, rouvre les dimensions et inspecte le ZIP. Le code est aussi contrôlé pour exclure les primitives réseau.

06

découper une image — Utiliser un créateur de feuilles de sprites sans logiciel d’atlas

découper une image — Ordonner, définir la cellule, tester le mouvement et exporter

découper une image — Ajoutez les images dans l’ordre de lecture. Le déplacement ou la suppression change l’aperçu et l’index des métadonnées. Une bande convient aux boucles courtes ; une grille évite une texture excessivement large.

découper une image — Largeur et hauteur définissent chaque cellule. Contenir garde toute la source, Couvrir remplit et recadre, Étirer impose la taille. L’écart sépare les cellules et la marge entoure l’atlas ; ils sont inclus dans x et y.

découper une image — Générez avant de copier. Si l’atlas dépasse un budget sûr, l’image et les coordonnées sont réduites ensemble. L’aperçu conserve l’ordre et l’export CSS ou JSON décrit exactement le fichier enregistré.

07

découper une image — Choisir les dimensions de l’atlas

découper une image — Cellules, écarts et marges déterminent les coordonnées

découper une image — Le créateur de feuilles de sprites rend la géométrie lisible. Les colonnes fixent les retours de ligne ; une bande impose une ligne ou une colonne. Chaque origine part de la marge et avance de la cellule plus l’écart. Si le canevas doit être réduit, l’image et les coordonnées reçoivent exactement la même échelle finale.

08

découper une image — Garder les créations privées

découper une image — Les API locales évitent un envoi de traitement

découper une image — Les fichiers choisis deviennent des bitmaps dessinés dans un Canvas local. Les miniatures utilisent des adresses blob créées par le navigateur. Aucun point d’envoi, compte ou projet cloud n’est nécessaire ; la réinitialisation ferme les bitmaps et révoque les aperçus sans modifier les sources.

09

découper une image — Exporter pour CSS ou un moteur de jeu

découper une image — Les formats décrivent le même atlas

découper une image — Le tableau JSON conserve l’ordre, l’objet JSON permet une recherche par nom, et le CSS crée une règle de fond puis une classe par image avec des décalages background-position négatifs. PNG préserve l’alpha ; WebP propose une qualité réglable. Tous les nombres décrivent le fichier réellement exporté.

10

découper une image — Vérifier la sortie de l’atlas

découper une image — Les spécifications officielles permettent des contrôles reproductibles

découper une image — La vérification associe documentation officielle et essais reproductibles. MDN décrit drawImage() et toBlob(), tandis que le W3C définit background-position. Les essais chargent des couleurs de tailles et d’alpha différents, changent l’ordre, contrôlent les rectangles, exportent WebP, relisent ses dimensions et inspectent le réseau pour distinguer ressources statiques et blobs locaux.