Éditeur de carte à tuiles en ligne — une alternative gratuite à Tiled dans le navigateur

Un éditeur de carte à tuiles est un programme qui assemble un niveau à partir d'un petit ensemble d'images de tuiles répétées plutôt que d'un grand arrière-plan peint à la main. Tiled, l'application de bureau de mapeditor.org, est l'implémentation de référence de cette idée : gratuite, hors ligne, souple sur les types de grille, et assez ancienne pour que de nombreux projets publiés transportent encore des fichiers .tmx. Cette page traite du cas où vous voulez le même flux de travail de peinture sans rien installer, et où vous voulez appuyer sur Play et vous promener à l'intérieur de la carte que vous venez de peindre.

Neta Studio fait tourner l'éditeur dans un onglet de navigateur. Vous importez un tileset, définissez la taille des tuiles, peignez un calque de sol et un calque de détail, marquez la collision, puis vous jouez. La grille devient un monde 3D rendu avec Three.js, avec un personnage contrôlable et une vraie collision. Rien à télécharger, aucun dossier de projet à garder synchronisé entre plusieurs machines, et un lien que vous pouvez transmettre à quelqu'un d'autre pour qu'il ouvre la même carte.

Tiled face à un éditeur de carte à tuiles en ligne

Tiled, de mapeditor.org, fait beaucoup de choses bien. Il est gratuit et open source, il fonctionne hors ligne, et il prend en charge depuis des années les grilles orthogonales, isométriques, décalées et hexagonales. Les calques, les calques d'objets avec rectangles, ellipses, polygones et polylignes, les propriétés personnalisées, les modèles, les animations de tuiles, les formes de collision et les jeux de terrain/Wang sont tous là. Il lit et écrit du XML TMX/TSX ainsi que des variantes JSON, et le format est assez ancien pour que des exportateurs existent pour la plupart des moteurs. Si votre pipeline consomme déjà du .tmx, Tiled est l'endroit le plus sûr pour le produire.

La friction ne vient pas de l'édition. Elle vient de tout ce qui l'entoure. Tiled est une application de bureau, donc chaque machine qui touche au projet a besoin de l'installation. Les tilesets sont généralement référencés comme des fichiers .tsx externes avec des chemins relatifs, et ceux-ci cassent dès qu'un dossier bouge ou que la copie locale d'un collaborateur se trouve à une profondeur différente. Il n'y a pas de bouton Play : vous exportez, puis vous ouvrez un second programme pour savoir si la carte fonctionne. Partager signifie zipper un projet en espérant que les chemins correspondent à l'autre bout.

Un éditeur de carte à tuiles en ligne change ces trois choses et rien d'autre. Pas d'installation, car l'éditeur est livré avec la page. Pas de jonglage de fichiers, car le tileset et les calques vivent dans un seul projet que vous pouvez rouvrir. Et pas de boucle export-pour-tester, car la carte est jouable dans l'onglet où vous l'avez peinte. Ce à quoi vous renoncez est réel : pas de plugins natifs, pas de cartes scriptées, et les très gros projets sont plus lourds dans un navigateur que sur le bureau. Pour une carte qui doit être vue et parcourue plutôt que livrée à un moteur compilé, le compromis en vaut la peine.

Ce qu'est une carte à tuiles (et pourquoi le nom trompe tout le monde)

Le mot remplit deux fonctions et celles-ci se heurtent. Tiled avec un T majuscule est un nom de produit. Une carte à tuiles, en minuscules, est n'importe quelle carte construite à partir de tuiles répétées. Vous pouvez créer une carte à tuiles dans Tiled, mais vous pouvez aussi en créer une avec les nœuds TileMap de Godot, dans le système Tilemap d'Unity, dans Phaser, dans un importateur maison, ou ici, sans jamais ouvrir Tiled.

Cette division explique pourquoi les recherches d'un éditeur de carte à tuiles aboutissent à deux endroits différents. La moitié des gens veulent l'application de bureau précise et ses formats de fichiers. L'autre moitié veut construire une carte à base de tuiles et ne se soucie guère de l'outil qui s'en charge. Les deux sont raisonnables. Si vous faites partie du second groupe, la question n'est pas de savoir quel éditeur a la liste de fonctionnalités la plus longue, mais lequel place le plus vite un résultat jouable devant vous.

Mécaniquement, une carte à tuiles représente peu de données. Une image de tileset, une largeur et une hauteur de tuile, une taille de grille en tuiles, puis un tableau d'identifiants de tuiles par calque où zéro signifie vide. Par-dessus : un calque d'objets facultatif contenant des rectangles et des polylignes, et une table de propriétés de chaînes clé/valeur. Voilà toute la structure. Un éditeur est une bonne interface pour modifier ces tableaux, ce qui est la seule raison pour laquelle les formats circulent entre les outils.

Dessinez votre première carte à tuiles en ligne

Le premier écran comporte trois zones : le panneau du tileset à gauche, le canevas de la carte au centre, la liste des calques à droite. Commencez par créer une carte. Choisissez une grille orthogonale, réglez la grille sur 40 par 30 tuiles et réglez la taille des tuiles pour qu'elle corresponde exactement à votre tileset. À 32 par 32 pixels, cela donne un canevas de 1280 par 960 pixels, ce qui est une taille de travail raisonnable et reste fluide pendant la peinture.

Importez ensuite l'image du tileset. Les deux réglages qui cassent les importations sont la marge et l'espacement. La marge est la bordure vide autour de toute la planche ; l'espacement est l'écart entre les tuiles. Si votre planche a été exportée avec l'un ou l'autre, saisissez le nombre. Si vous l'omettez, chaque colonne se décale d'un ou deux pixels et la carte semble subtilement, exaspérément fausse. Après cela, peindre, c'est peindre : remplissez le calque de sol, puis ajoutez le détail sur un calque au-dessus.

Exemples de cartes à tuiles — des cartes que vous pouvez ouvrir tout de suite

Six scènes sont livrées sous forme de cartes jouables, pas de captures d'écran. Chacune s'ouvre dans le navigateur et vous pouvez y déplacer un personnage, ce qui est le seul moyen fiable de vérifier si une carte à tuiles fonctionne.

Trois d'entre elles sont des projets complets. Les autres sont de petites cartes de démonstration intégrées à l'éditeur, qui existent pour montrer une mécanique chacune. Ouvrez-les lorsque vous voulez voir comment les calques, la collision et la taille des tuiles ont été configurés plutôt que de lire à ce sujet.

Importer un TMX / un tileset dans le navigateur

L'importation est un analyseur, pas un convertisseur. Nous lisons l'élément map pour l'orientation, la largeur, la hauteur, la largeur et la hauteur des tuiles, puis les entrées de tileset avec leur firstgid et soit une image intégrée, soit une référence à un .tsx externe. Ensuite, chaque calque dans l'ordre, avec ses données de tuiles. Les encodages qui comptent sont CSV et base64, avec ou sans compression gzip ou zlib. Si le fichier utilise un encodage que nous ne décodons pas, l'importation s'arrête et le nomme plutôt que de charger une grille vide.

Ce qui survit, c'est la partie structurelle. La référence du tileset est redirigée vers une image téléversée, donc le chemin externe du .tsx de votre projet de bureau est remplacé plutôt que suivi. La taille des tuiles, la marge et l'espacement sont conservés. L'ordre des calques, leur visibilité et leur opacité sont conservés. Les identifiants de tuiles gardent leurs positions relatives à l'intérieur de chaque calque, ce qui fait qu'une carte a le même aspect après l'importation. Les calques d'objets arrivent sous forme de rectangles et de polygones, avec leurs propriétés aplaties en chaînes clé/valeur. Les animations de tuiles déclarées sont conservées.

Ce qui ne survit pas, c'est tout ce qui était du code. Tiled prend en charge les extensions JavaScript, les classes de propriétés personnalisées et les plugins C++, et aucun d'eux ne s'exécute dans un onglet de navigateur. Une carte produite par un script n'est ici que ses tuiles de sortie. Les types de propriétés personnalisées se dégradent en chaînes. Les cartes infinies à stockage par blocs sont aplaties en une grille fixe, ce qui modifie le comportement mémoire sur les très grandes cartes. Et un tileset de collection d'images, où chaque tuile est un PNG distinct, fonctionne mais coûte une requête d'image par tuile. Si votre carte dépend d'un plugin, continuez de la produire dans Tiled.

Tiled gratuit face à Tiled payant

Tiled est gratuit. C'est un logiciel de bureau open source et il n'existe pas d'offre payante à laquelle le comparer, donc une page décrivant un Tiled gratuit face à un Tiled payant décrit autre chose, généralement un pack commercial de tilesets ou l'éditeur intégré à un moteur. Nous n'affirmons pas que Tiled coûte de l'argent, parce que ce n'est pas le cas.

La vraie division, c'est installation contre absence d'installation. Tiled exige un téléchargement sur chaque machine, conserve les tilesets sous forme de chemins relatifs qui cassent quand les dossiers bougent, et n'offre aucun test de jeu intégré, donc vous exportez et ouvrez un autre programme. Un éditeur de navigateur demande un onglet, garde le projet au même endroit et joue la carte dans la même fenêtre. C'est là le compromis, et il n'a rien à voir avec le prix.

Il y a des choses où le bureau gagne. Les plugins, les cartes scriptées, le travail sans réseau du tout, et les très grandes cartes à nombreux calques sont autant d'avantages du bureau, et prétendre le contraire serait malhonnête. Si votre pipeline consomme déjà du .tmx et que vous avez des personnes qui le maintiennent, restez sur Tiled. Utilisez l'éditeur de navigateur quand la carte doit être vue, partagée par lien, ou parcourue par quelqu'un qui n'installera jamais un éditeur.

Entrez dans le monde auquel elle appartient

Un sprite est un personnage sans endroit où se tenir. La dernière étape est celle que personne d'autre n'offre : prenez la planche que vous venez de créer et placez-la dans un monde où quelqu'un peut se promener — une petite île, une planète, un coin de rue pluvieux. Chaque monde de ce site a été créé à partir d'une seule description écrite et publié comme une page que vous pouvez jouer.

FAQ