Découper des tuiles depuis une image

Tileset ou planche de sprites : pourquoi les exigences augmentent

Une planche de sprites contient des images indépendantes. Si une image d’un cycle de marche est décentrée d’un pixel par rapport à la suivante, personne ne le remarque : chaque image est dessinée séparément, et de petites variations de position ressemblent à un mouvement naturel. Un jeu de tuiles est différent. Chaque tuile est posée bord à bord avec ses voisines sur une grille, à répétition dans tout un niveau. Un décalage d’un pixel ne reste pas limité à cette tuile : il se répète à chaque raccord où elle apparaît. Sur un sol ou un mur, une mauvaise découpe peut créer des dizaines de raccords visibles.

C’est toute la contrainte d’un tileset : les raccords doivent être invisibles, donc les bords exacts au pixel, donc la source doit avoir une vraie grille identifiable avant toute découpe.

Choisir une taille de tuile

Si vous extrayez des tuiles d’une ressource existante créée par quelqu’un d’autre, leur taille est généralement déjà fixée par le dessin : comptez combien de fois un motif (brique, touffe d’herbe, lame de parquet) se répète sur la largeur, puis divisez. Si vous définissez vous-même le jeu de tuiles à partir d’une référence ou d’une planche de textures générée, les tailles courantes sont 16×16, 32×32 et 48×48 pixels.

• 16×16 évoque le pixel art rétro classique. Les détails y sont impitoyablement limités : chaque tuile doit communiquer sa matière — herbe, pierre, eau — avec très peu de pixels, ce qui est un véritable savoir-faire artistique.
• 32×32 est le réglage moderne le plus courant. Il laisse assez de place pour les textures et les ombres, sans exiger une précision sous-pixel pour rester lisible à un zoom normal.
• 48×48 et au-delà conviennent aux jeux avec des tuiles plus grandes à l’écran ou un dessin plus pictural, où l’on veut des détails de texture visibles plutôt qu’un aspect pixel art plat.

Quel que soit votre choix, gardez-le cohérent dans tout le tileset et, idéalement, dans tous les tilesets du projet. Mélanger les tailles de tuiles impose soit de redimensionner les dessins à l’exécution — ce qui réintroduit précisément le flou que le pixel art cherche à éviter — soit de maintenir plusieurs systèmes de grille séparés dans l’éditeur de niveaux.

Trouver le décalage d'une grille ne commençant pas à zéro

C’est l’étape qui piège. Vous savez que les tuiles font 32px, découpez à 0, 32, 64, 96… et obtenez des tuiles coupées en deux, une texture de mur surtout faite de sol sur une ligne et de mur sur l’autre. La grille réelle ne commence pas au coin supérieur gauche : elle est décalée de quelques pixels, souvent à cause d’une bordure, d’une marge de capture ou d’un espacement ajouté à l’export.

Pour trouver le décalage, zoomez dans l’image au niveau des pixels et cherchez un détail répétitif : une ligne de mortier entre les briques, une ombre à la base d’une tuile d’herbe, un reflet le long du bord supérieur d’une tuile. Mesurez la coordonnée en pixels où ce détail apparaît pour la première fois, puis vérifiez si le même détail revient tous les N pixels où N est la taille de vos tuiles. Si la première ligne de joint se trouve à x = 6 et la suivante à x = 38, le décalage est de 6 pixels et votre estimation de taille de 32 est confirmée. Appliquez ce décalage indépendamment aux deux axes : les décalages horizontal et vertical n’ont pas de lien, et l’image peut facilement présenter l’un sans l’autre.

Tuiles sans espacement et problème de débordement

Les planches de sprites ont souvent des espaces transparents entre les images. Les tilesets n’en ont généralement pas : les tuiles se touchent directement, sans espace, pour former des surfaces continues une fois placées. Dans un moteur, cela peut provoquer un débordement de texture : une fine bande de la tuile voisine apparaît au bord de celle placée.

Le débordement vient de l’échantillonnage des textures par le GPU. Lorsque la tuile n’est pas dessinée avec une correspondance exacte 1:1 — légère mise à l’échelle ou caméra en position sous-pixel — le rendu mélange son pixel de bord avec celui qui le touche dans la texture source, donc la tuile voisine. Ajouter un espace à la source casserait les raccords. Utilisez plutôt un filtrage point/nearest sans interpolation, ou laissez le moteur extruder automatiquement un bord d’un pixel à l’empaquetage ou à l’importation. Le Sprite Atlas de Unity et l’importateur TileSet de Godot proposent des marges ou une extrusion pour cela : activez-les pour les tuiles redimensionnées ou déplacées à des positions non entières.

Suppression des tuiles en double

Après avoir découpé toute la grille, il est courant d’obtenir plusieurs tuiles identiques ou presque identiques au pixel près. Une tuile d’herbe simple peut apparaître quatre fois sur une planche de référence, parce que le dessin source la répétait pour équilibrer la composition. Conserver ces doublons n’est pas vraiment une erreur, mais alourdit la ressource, complique la lecture de la palette de tuiles dans l’éditeur de niveaux et oblige ensuite à modifier « la tuile d’herbe » à plusieurs endroits.

Pour détecter les doublons sans examiner des dizaines de carrés, hachez les pixels bruts de chaque tuile et comparez. Des hachages identiques signifient pixels identiques, donc fusion sûre. Une quasi-identique, par exemple une torche allumée et éteinte différant d'un pixel, a un autre hachage : un humain décide si ces variantes méritent d'être conservées.

Importer dans un moteur

Unity : Tile Palette

Importez le jeu de tuiles découpé comme Sprite avec Sprite Mode réglé sur Multiple, découpez-le dans le Sprite Editor avec Grid By Cell Size à la taille de vos tuiles, puis ouvrez Window → 2D → Tile Palette, créez une palette et glissez-y les sprites découpés. Ils se peignent ensuite sur un composant Tilemap. Avec des PNG individuels déjà découpés, ignorez Sprite Editor et glissez directement leur dossier dans la palette.

Godot : ressource TileSet

Créez une ressource TileSet sur un nœud TileMapLayer et ajoutez votre image de tuiles découpée comme source Atlas, avec la taille de tuile correspondante. L’importateur Godot expose aussi les réglages Separation et Margin sur la source d’atlas, pour les planches ayant un petit espace entre les tuiles plutôt que la disposition sans espace décrite ci-dessus. Si votre source n’a pas d’espacement et présente des débordements dans la vue de l’éditeur, activez les marges de texture de l’atlas : elles dupliquent intérieurement les pixels de bord afin que l’échantillonnage n’atteigne jamais une tuile voisine.

Un ordre pratique des opérations

1. Identifiez la taille à partir d'un motif répétitif.
2. Trouver x et y à partir du vrai début de la première tuile.
3. Découpez selon cette grille : un outil dans le navigateur avec des lignes déplaçables rend cette étape visuelle et vérifiable plutôt qu’un calcul à l’aveugle.
4. Comparer les hachages et fusionner les doublons exacts.
5. Activez marges ou extrusion si les tuiles seront affichées à position ou échelle fractionnaire.

Questions fréquentes