Éditeur de tilemap — créateur de tilemap et éditeur de niveaux gratuit en ligne

Un éditeur de tilemap, c’est une grille, un tileset et un pinceau. Vous importez un PNG ou générez un ensemble à partir d’un prompt, définissez une taille de cellule, peignez des cellules sur plusieurs calques, marquez celles qui sont solides pour la collision, puis exportez. L’éditeur de tilemap de cette page fonctionne dans le navigateur : aucun téléchargement, aucun compte, aucune étape de compilation, et l’éditeur est la première chose que vous voyez plutôt qu’une capture d’écran du logiciel.

Tout ce qui suit décrit ce que l’outil fait réellement et où il échoue. Pourquoi une planche avec une marge de 1 px s’importe mal si vous n’indiquez que la taille de tuile. Pourquoi une règle d’autotile à deux états par bord a besoin de 47 variantes au lieu de 16. Ce que le TMX transporte et qu’un PNG ne peut pas. Et pourquoi pouvoir appuyer sur play et parcourir la carte que vous venez de peindre change la vitesse à laquelle vous pouvez la corriger.

L’éditeur de tilemap (outil en direct)

L’outil en direct est la première chose sur cette page. Le canevas est une grille, le tileset se trouve à côté, et la liste des calques est une pile de grilles indépendantes que vous pouvez masquer et verrouiller une par une. Peindre une cellule, c’est un clic. Le glisser peint une série de cellules. Un outil rectangle remplit une zone, un remplissage par diffusion gère les sols ouverts, et une gomme efface jusqu’au calque inférieur.

Quatre capacités font le travail. La grille fixe un seul nombre pour tout le document, la taille de cellule en pixels, et chaque pinceau, calque et export est mesuré dans cette unité. Les pinceaux décident ce qu’écrit un clic : tuile unique, bloc rectangulaire, remplissage par diffusion, ligne ou effacement. Les calques empilent des grilles distinctes afin que le terrain, la décoration et la collision restent modifiables indépendamment. La collision marque une cellule comme solide et la stocke sous forme de données plutôt que de la peindre dans l’illustration, si bien que repeindre un mur n’implique jamais de refaire son volume bloquant.

Il n’y a aucune boîte de dialogue d’enregistrement et aucune étape de compilation entre la peinture et le jeu. Le document que l’éditeur écrit est celui que le runtime lit, ce qui élimine toute une catégorie de bugs où une carte semble correcte dans un programme et se décale d’une demi-tuile dès qu’elle se charge dans un autre.

Importez un tileset ou générez-en un

Il y a deux façons de commencer. Importez un PNG que vous possédez déjà, ou générez un ensemble à partir d’un prompt textuel et peignez avec. Les deux mènent au même endroit : une planche de tuiles alignée posée à côté du canevas.

Si vous préférez ne dessiner ni l’un ni l’autre, la bibliothèque de tilesets gratuits est un catalogue de planches prêtes aux tailles de cellule courantes. Agent Sprite Forge s’occupe de l’autre moitié du problème, les personnages et les accessoires, qui suivent des règles différentes du terrain et demandent généralement plus d’images par action.

L’éditeur demande la taille de tuile avant de charger quoi que ce soit, et ce nombre doit correspondre exactement à l’illustration. Une planche de 256 par 256 composée de tuiles de 16 px fait 16 colonnes sur 16 lignes. Si la planche a une marge de 1 px sur le bord et un espacement de 1 px entre les tuiles, un réglage par défaut courant dans les outils de sprites, le calcul brut donne un mauvais nombre de colonnes ; indiquez donc aussi la marge et l’espacement, ou recadrez la planche. En cas d’erreur, la grille se cisaille : la première colonne semble correcte et chaque tuile suivante est décalée par une erreur qui s’accroît sur toute la planche.

Trois autres choses cassent un import de tileset. Des tuiles de 15 ou 33 px parce que l’illustration a été mise à l’échelle par un facteur non entier. Une illustration dessinée à 1 px dans la cellule voisine, ce qui apparaît comme une fine ligne de la tuile adjacente le long de chaque joint et s’aggrave lorsque le moteur échantillonne avec le filtrage activé. Et un canal alpha dont la zone transparente est en réalité noire, ce qui transforme chaque cellule vide en bloc solide une fois la carte rendue.

Décrivez plutôt l’ensemble : taille de cellule, vue, palette et les rôles de tuiles dont vous avez besoin, comme sol, mur, coin de mur, porte et bord d’eau. Le générateur de tilesets IA renvoie une planche déjà alignée sur la taille de cellule demandée, elle s’importe donc sans le calcul de marge.

Traitez le résultat comme un point de départ. Les ensembles générés sont solides sur la surface et faibles sur la continuité : la seizième tuile de sol se raccorde rarement sans couture à la première, et les tuiles de bord doivent généralement être repeintes avant que l’autotiling ne les accepte comme un terrain connecté.

Peignez des tuiles, ajoutez des calques et des collisions

Une carte qui reste facile à modifier, c’est trois calques, pas un. Le calque sol contient le terrain sur lequel le joueur marche. Le calque détail contient tout ce qui est dessiné par-dessus, comme les murs, les arbres, les caisses et les décalques, afin que vous puissiez le restyler ou le masquer sans toucher au sol. Le calque collision ne contient rien de visible : c’est un masque des cellules dans lesquelles le joueur ne peut pas entrer.

Gardez la collision sous forme de données sur son propre calque, et non sous forme de tuiles sombres intégrées au terrain. Si les volumes bloquants sont peints dans l’illustration du sol, modifier l’illustration change la conception du niveau et modifier la conception du niveau change l’illustration. Avec un calque distinct, vous pouvez repeindre le sol autant de fois que vous voulez et les murs restent là où ils étaient.

Le mode de défaillance à surveiller est une cellule non marquée dans une rangée de murs. Une seule cellule de collision manquante dans un mur de quarante tuiles est un trou par lequel le joueur passe, et elle est invisible à un zoom normal. La routine qui la détecte : masquez tous les calques sauf la collision, regardez la carte comme une silhouette et vérifiez que le contour est ininterrompu.

L’autotiling et l’ensemble de 47 tuiles expliqués

L’autotiling est la partie d’un éditeur de tilemap qui choisit quelle tuile dessiner en fonction de ce qui l’entoure. Au lieu de choisir un coin de mur à la main, vous peignez n’importe quelle tuile de mur et l’éditeur inspecte les cellules voisines, construit un masque de bits et remplace par la variante qui correspond. Peignez un second mur à côté du premier et les deux cellules se mettent à jour.

La version simple de la règle examine quatre voisins, nord, est, sud et ouest, ce qui donne deux puissance quatre, soit 16 combinaisons. Cet ensemble est facile à dessiner et il échoue à un endroit précis : le coin intérieur. Prenez une cellule de sol avec un mur au nord et un mur à l’est, et rien d’autre. Ce n’est pas un cas exotique, c’est à quoi ressemble partout l’intérieur d’une pièce en L. Un ensemble de 16 tuiles n’a aucune variante dessinant un bord à la fois sur les côtés nord et est d’une même cellule, vous obtenez donc un pixel de sol égaré, une bordure doublée ou un trou visible.

L’ensemble blob de 47 tuiles, aussi appelé tileset blob, ajoute les quatre coins. Suivre naïvement les huit voisins donne deux puissance huit, soit 256 combinaisons, et la plupart sont redondantes : un coin ne change l’image que lorsque les deux bords qui le touchent sont remplis. Un coin situé entre deux bords vides s’affiche de façon identique dans ses quatre états. Appliquer cette seule réduction fait passer 256 cas à 47 cas distincts, d’où vient le nombre.

Les éditeurs stockent généralement un ensemble blob sous forme de table de correspondance indexée par un masque de 8 bits : 1, 2, 4 et 8 pour les bords, 16, 32, 64 et 128 pour les coins. Lorsque vous peignez, l’éditeur recalcule le masque de la cellule peinte et de chaque voisin également soumis à l’autotiling, si bien qu’un clic peut réécrire jusqu’à neuf cellules. La conséquence pratique est que l’autotiling veut son propre calque de terrain. Mélangez des accessoires placés à la main dans ce calque et chaque mise à jour d’autotile doit décider si les écraser est acceptable.

Tiled Map ou Tile Map — lequel voulez-vous dire ?

Deux recherches différentes arrivent ici et elles veulent des choses différentes. Un éditeur de tilemap est la catégorie : tout outil qui peint une grille de tuiles et produit une carte. Tiled est un programme précis à l’intérieur de cette catégorie, l’éditeur de bureau publié sur mapeditor.org, et les gens tapent souvent tiled map editor lorsqu’ils désignent ce programme par son nom.

Si vous vouliez parler de la catégorie, l’outil en direct de cette page est un éditeur de tilemap et il ne nécessite aucune installation. Si vous vouliez parler de la marque, ce que vous voulez probablement, c’est quelque chose qui ouvre les fichiers que vous avez déjà, les projets TMX et les tilesets TSX que produit un flux de travail de bureau, et qui vous laisse continuer à travailler sans rien installer sur la machine où vous êtes. La page alternative à Tiled couvre cela directement : lesquels de vos fichiers sont conservés, quels réglages ne le sont pas, et comment les formats d’exportation s’alignent entre les deux.

Mécaniquement, la différence tient à l’endroit où vit le document. Un éditeur de bureau écrit les projets sur le disque local et dépend de l’installation du programme sur cette machine pour les rouvrir. Un éditeur de navigateur garde le document dans la session et dans le stockage du navigateur, et dépend d’un export suffisamment complet pour reconstruire la carte n’importe où ailleurs. Les formats d’exportation constituent donc le véritable pont entre les deux, ce dont traite la section suivante.

Exportez votre carte (PNG / TMX / JSON)

Trois formats, trois usages. Choisissez selon ce qui va lire le fichier, pas selon celui qui sonne le plus officiel.

Le PNG est une image plate. L’exportateur rend la carte à la taille de cellule multipliée par la taille de la carte, ainsi une carte de 40 par 25 avec des cellules de 32 px devient 1280 par 800 pixels, les calques étant soit aplatis en une seule image, soit écrits dans un fichier par calque. Utilisez-le pour les maquettes, les vignettes, les arrière-plans de menu ou une conversation avec un artiste. Ne l’utilisez pas comme livraison à un moteur : un PNG ne transporte aucune grille, aucune identité de tuile et aucune collision, donc rien en aval ne peut distinguer un mur d’un sol sauf par la couleur.

Le TMX est le format d’échange XML de Tiled et ce que l’écosystème des outils de tuiles a de plus proche d’une lingua franca. Il transporte des calques, des références de tileset, des propriétés par tuile, des calques d’objets et des propriétés personnalisées, et la plupart des moteurs et convertisseurs peuvent le lire. Un détail cause la plupart des bugs : les ID de tuiles dans le TMX sont globaux à tous les tilesets de la carte, décalés par un firstgid par tileset. Fusionnez deux planches et ratez ce décalage, et chaque cellule qui utilisait la seconde planche se charge avec une tuile de la mauvaise planche. Aucune erreur. Cela semble simplement incorrect.

Le JSON est ce que la plupart des moteurs et des runtimes web ingèrent directement. Il s’agit généralement d’une liste de calques, chacun contenant un tableau plat d’indices de tuiles plus la taille de cellule, avec la collision dans un tableau distinct. Comme le consommateur construit la carte au moment de l’exécution, la convention d’ordre des lignes compte : inversez-la et toute la carte se reflète verticalement, ce qui est évident sur une carte avec un littoral et invisible sur un donjon symétrique. Les cellules vides ont aussi besoin d’une valeur définie, car certains formats utilisent 0 et d’autres -1, et choisir la mauvaise place une vraie tuile dans chaque espace vide.

Entrez dans votre carte (démo jouable)

La démo jouable de cette page est The Cyclops’ Island, un jeu en pixel art isométrique construit à partir d’une tilemap peinte dans le même éditeur. Appuyez sur play et la caméra plonge dans la carte. Le calque de collision devient des murs, le calque de sol devient le plancher sur lequel le personnage marche, et le calque de détail se dessine derrière ou devant le personnage selon sa position.

C’est l’étape que la plupart des pages d’outils sautent. Peindre une carte et l’exporter signifie que la première fois que vous voyez le niveau à l’échelle du joueur, c’est dans un autre programme, avec une autre caméra, après une compilation. Le jouer sur place transforme la conception de niveaux en une boucle que vous pouvez exécuter dix fois par minute : peignez un couloir, parcourez-le, remarquez qu’il est une tuile trop large, repeignez-le.

Les projections isométriques ajoutent une chose à laquelle une carte orthogonale ne doit jamais penser : l’ordre de dessin. Une tuile plus bas dans l’écran est plus proche de la caméra, donc le moteur de rendu trie par profondeur, grosso modo par ligne puis par calque, sinon un personnage est dessiné par-dessus un mur qui devrait l’occulter. Le symptôme est un sprite qui traverse le haut d’un mur en marchant derrière lui. Quand vous voyez cela dans une démo, la cause est le tri par profondeur, pas le masque de collision.

À partir de là, la carte peut prendre deux directions. Restez en 2D et elle demeure une tilemap avec un contrôleur de joueur par-dessus. Emmenez-la dans le constructeur de jeux 3D et la même grille devient de la géométrie, chaque cellule s’extrudant en dalle de sol ou en mur, c’est l’approche derrière Mini World. Agent Sprite Forge couvre le versant personnage. La grille que vous avez peinte ne change dans aucun des deux cas.

Entrez dans le monde auquel elle appartient

Un sprite est un personnage qui n’a nulle part où se tenir. La dernière étape est celle que personne d’autre n’offre : prenez la planche que vous venez de construire et placez-la dans un monde où l’on peut se promener — une petite île, une planète, un coin de rue sous la pluie. Chaque monde de ce site a été créé à partir d’une seule description écrite et publié sous forme de page jouable.

FAQ