Découper un tileset avec marges et espacements sans décaler les tuiles
La première tuile semble correcte, mais chaque tuile plus loin dans la planche contient davantage de sa voisine. Ce motif signifie généralement que l’espacement a été compté dans la tuile, ou complètement ignoré. Mesurez trois valeurs indépendantes avant de découper la planche.
Mesurer taille, bord et séparation séparément
La largeur et hauteur décrivent les pixels de chaque sortie. La marge extérieure est la bordure égale sur les quatre côtés. L’espacement est l’écart entre tuiles voisines. Une tuile de 32 px suivie d’un espace de 1 px avance la découpe suivante de 33 px, mais exporte toujours une image de 32 px.
Examinez la source à sa taille native dans un éditeur affichant les coordonnées des pixels. Ne faites pas d’estimation à partir d’une vignette réduite dans le navigateur. Ce découpeur n’a qu’une valeur de marge et une valeur d’espacement ; les bordures asymétriques ou les écarts horizontaux et verticaux différents nécessitent donc un prétraitement ou un découpage manuel.
Examinez une source de 135 × 102
- Chargez un PNG ou WebP de quatre colonnes et trois lignes de tuiles 32 × 32.
- Réglez Largeur de tuile sur 32, Hauteur de tuile sur 32, Marge extérieure sur 2 et Espacement des tuiles sur 1.
- Gardez omission/déduplication désactivées au premier test : douze fichiers attendus.
- Inspectez l'aperçu puis dernière colonne/rangée du ZIP ; seuls seize premiers sont prévisualisés.
La largeur est 2 × 2 + 4 × 32 + 3 × 1 = 135. La hauteur est 2 × 2 + 3 × 32 + 2 × 1 = 102. Les positions x sont 2, 35, 68 et 101 ; les positions y sont 2, 35 et 68. Ces chiffres permettent de vérifier les réglages concrètement sans deviner.
Comprendre le type d’erreur avant de changer les paramètres
| Motif | Erreur de mesure probable | Vérifier |
|---|---|---|
| Toutes les tuiles décalées également | Marge extérieure incorrecte | Coordonnée de la première tuile |
| Décalage horizontal croissant | Largeur ou espacement incorrect | Distance entre débuts de colonnes |
| Décalage vertical croissant | Hauteur ou espacement incorrect | Distance entre débuts de rangées |
| Dernière rangée ou colonne absente | Dernières cases incomplètes | Dimensions et bordure réelles de l'image |
Seules les cases complètes sont extraites. Si vous avez saisi une marge supérieure à la marge réelle, la dernière tuile peut sortir de la grille autorisée. L’outil n’étire pas un reste partiel pour inventer une tuile complète. Corrigez les mesures ou préparez la source plutôt que de compenser avec une dimension sans rapport.
Activez omission et déduplication après correction de la grille
Une case vide a alpha 0 partout ; un pixel ténu suffit à la conserver. La déduplication compare RGBA exact, y compris RGB caché sous alpha 0. Elle ne fusionne ni ressemblances ni nécessairement des transparences visuellement identiques.
Après activation de ces options, le numéro du fichier et celui de la case source peuvent différer. Conservez tilemap.json : ses cases enregistrent les positions en lignes et colonnes, avec un identifiant de tuile pour une ressource conservée ou null pour une case vide ignorée. Les positions en doublon peuvent référencer le même identifiant. Ce manifeste décrit l’extraction, pas une carte de tuiles prête pour un moteur.
Distinguer les erreurs de découpe des raccords du moteur
Si le PNG exporté contient déjà le bord d’une tuile voisine, corrigez les paramètres de recadrage. Si les PNG sont propres mais que le jeu affiche de fines lignes lorsque la caméra bouge, examinez le filtrage, l’échelle, les marges de texture et la configuration d’importation du moteur. Redécouper des tuiles propres en ajoutant arbitrairement des pixels masque cette différence et peut détériorer le dessin.
Essayez la méthode
Définissez la largeur et la hauteur des tuiles, la marge extérieure et l’espacement, puis exportez les tuiles PNG et un manifeste de positions.
Ouvrir le découpeur de tuiles →