Comment créer une tilemap — guide étape par étape avec un éditeur gratuit

Apprendre à créer une tilemap consiste surtout à prendre quatre décisions dans le bon ordre : la taille de cellule, la disposition du tileset, la pile de calques et l’endroit où vivent les collisions. Prenez ces décisions une fois et peindre la carte devient mécanique.

Les étapes ci-dessous suivent l’ordre que nous utilisons lorsqu’une description écrite devient un monde jouable dans Neta Studio : choisir ou générer un tileset, fixer la grille, bloquer le terrain avant le détail, séparer les calques, puis laisser l’autotiling résoudre les bords. Rien ici ne nécessite d’installation. L’éditeur tourne dans le navigateur, et chaque nombre ci-dessous peut être modifié plus tard sans redessiner la carte.

Qu’est-ce qu’une tilemap ? (définition claire + schéma)

Une tilemap est une grille d’indices, pas une grille d’images. Chaque cellule stocke un entier qui pointe vers une tuile à l’intérieur d’un tileset, et le moteur de rendu consulte cet indice puis dessine la tuile à la position de la cellule. Une carte de 20 par 12 avec des cellules de 32 px représente 240 entiers couvrant 640 par 384 pixels.

Cette indirection est tout l’intérêt. Une tuile d’herbe est stockée une seule fois dans la planche et référencée par des centaines de cellules, si bien qu’un fichier de carte reste petit et se charge vite. Comme une tilemap est une donnée plutôt qu’une illustration, vous pouvez la générer à partir d’une fonction de bruit, la modifier sous forme de texte, comparer deux versions dans Git ou la diffuser par blocs au fur et à mesure que la caméra se déplace.

Le schéma en haut de cette page est construit à partir de nos propres tuiles sur une grille de 12 par 8 en 32 px. L’herbe remplit l’intérieur, le sable court le long des bords gauche et inférieur, et l’eau se trouve dans le coin inférieur droit, là où le sable s’arrête. Lu comme une donnée : la cellule à la colonne 3, ligne 0 contient l’indice d’herbe, la cellule à la colonne 0, ligne 7 contient l’indice de coin d’eau, et chaque autre cellule contient un simple indice de sable. L’origine est en haut à gauche, x augmente vers la droite, y augmente vers le bas. Si votre moteur utilise une origine en bas à gauche, la carte s’affiche à l’envers jusqu’à ce que vous inversiez l’indice de ligne en lignes moins 1 moins y.

• La grilleColonnes et lignes, fixées à la création de la carte. Une carte de 20 par 12 et une carte de 40 par 24 se comportent très différemment au même zoom de caméra.
• La taille de celluleL’empreinte en pixels d’une cellule : 16, 32, 48 ou 64. Elle doit correspondre exactement à la taille de tuile du tileset, sinon l’échantillonnage tombe au milieu d’une tuile.
• L’ensemble de tuilesL’image vers laquelle pointent les indices, plus la définition de son nombre de colonnes et de lignes.
• Le calque d’indicesUn entier par cellule et par calque. Le calque sol est dense, le calque détail est surtout vide, et le calque collision contient des indicateurs plutôt que de l’illustration.

Qu’est-ce qu’un tileset ? (et en quoi il diffère)

Le tileset est l’album d’images ; la tilemap est la page de références vers celui-ci. Un tileset possède les pixels : une planche, plus la règle qui dit que la planche compte, par exemple, 8 colonnes de tuiles de 32 px. Une tilemap possède le placement : quel indice se trouve dans chaque cellule de chaque calque.

Les deux mots sont constamment confondus parce que la plupart des éditeurs les affichent côte à côte dans le même panneau, et parce qu’un format à fichier unique peut masquer la séparation. Dans Tiled, la séparation est explicite, avec un fichier de tileset distinct du fichier de carte. Dans Unity, un asset Tile contient le sprite et un composant Tilemap contient les cellules. Dans Godot, TileSet et le calque de tilemap sont des ressources distinctes.

La conséquence pratique : modifier le tileset modifie chaque carte qui le référence, tandis que modifier une tilemap modifie un seul niveau. Échangez une planche de 32 px contre une planche de 48 px et chaque indice se résout toujours, mais chaque carte se dessine désormais à une échelle différente et peut échantillonner les tuiles voisines sur les bords. Traitez le tileset comme une interface publiée avec un numéro de version.

Étape 1 : choisir ou créer un tileset

Vous avez deux voies : prendre une planche existante ou en générer une. Une planche existante est plus rapide, mais vous héritez de sa palette, de sa taille de cellule et de sa licence. Vérifiez la licence avant de construire quarante cartes dessus, et vérifiez qu’il s’agit d’une planche en grille plutôt que d’un atlas compacté. Un atlas stocke des coordonnées de rectangle par tuile au lieu d’une cellule uniforme, ce qui rend l’indexation plus difficile et l’autotiling malcommode.

Si le terrain doit correspondre à une palette précise, générez-le. Agent Sprite Forge produit une planche de tuiles à partir d’une description écrite avec une taille de cellule cohérente, ce qui élimine la source la plus courante de désalignement : une planche où une tuile fait 33 px de large parce que l’artiste a ajouté un reflet en dehors de la cellule.

Quelle que soit la voie choisie, la première passe n’est pas du dessin. C’est de la mesure. Ouvrez la planche à 100 % de zoom, comptez les colonnes et les lignes, et notez la taille de cellule là où le reste de l’équipe pourra la trouver.

• Une seule taille de celluleChaque tuile de même largeur et de même hauteur, y compris les tuiles presque vides. Une seule tuile de 33 px dans une planche de 32 px décale chaque indice suivant si l’exportateur range dans l’ordre de lecture.
• Une vraie transparenceDe l’alpha, pas du blanc. Une planche avec un fond blanc opaque dessine des cases blanches sur votre ciel dans le navigateur.
• Une grille documentéeNotez les colonnes, les lignes et la présence éventuelle de marge. Le calcul d’indice est ligne fois colonnes plus colonne, à base zéro, en lisant de gauche à droite et de haut en bas.
• Un choix de gouttièreLes planches avec marge ajoutent 1 ou 2 px entre les cellules pour réduire le débordement de texture, au prix d’un décalage dans votre calcul d’échantillonnage. Décidez ce que vous utilisez avant le premier coup de pinceau.

Étape 2 : définir la taille de tuile et la grille

La taille de cellule se décide selon trois choses : le zoom auquel le joueur joue réellement, votre résolution de rendu cible et la quantité d’illustration que vous êtes prêt à dessiner. Une tuile de 16 px sur une fenêtre de 1920 px de large donne 120 cellules en largeur, ce qui fait beaucoup de niveau par écran et très peu de place pour le détail. Une tuile de 64 px donne 30 cellules et assez de pixels pour dessiner un arbre lisible.

La contrainte dure est arithmétique. La taille de cellule doit diviser la planche. Une planche de 256 px de large en 32 px donne exactement 8 colonnes ; en 48 px elle donne 5,33, si bien que la dernière colonne est une fraction de tuile et que chaque indice suivant dérive. Les dimensions de la planche ne sont pas des choix esthétiques, ce sont des multiples de la taille de cellule.

Utilisez une mise à l’échelle par nombres entiers. Si la fenêtre n’est pas un multiple entier de la grille, les cellules tombent sur des demi-pixels, le filtrage échantillonne deux tuiles voisines, et une couture d’un pixel apparaît sur toute la carte. Corrigez-le aux deux bouts : un filtrage au plus proche voisin dans le moteur et un zoom de caméra qui soit un nombre entier.

Étape 3 : peindre le sol, puis les détails

Peignez par passes, et toujours le terrain d’abord. Le terrain est ce que vous allez modifier ; la décoration est ce que vous ne voudrez pas déplacer. Placez soixante arbres, puis décalez le littoral de quatre cellules vers la gauche et chacun de ces arbres se retrouve soudain dans l’eau.

Commencez par une seule tuile. Bloquez toute la carte avec un indice d’herbe, regardez la silhouette au zoom de jeu, et seulement ensuite laissez l’autotiling résoudre les bords. Les détails viennent une fois la forme fixée, et les collisions viennent après les détails, car découvrir qu’un accessoire est praticable est une modification de collision, pas un repeint.

Peignez tout ce que le joueur peut voir. Les cellules vides retombent sur ce que le moteur de rendu dessine derrière la carte, ce qui n’est généralement pas l’arrière-plan que vous voulez. Une couleur d’arrière-plan définie sur la caméra est plus sûre que de compter sur un canevas effacé.

Étape 4 : ajouter des calques, de la profondeur et des collisions

Une tilemap cesse d’être plate dès que vous la séparez en calques. La pile utile minimale en compte trois : un calque sol dense, un calque détail clairsemé et un calque collision qui ne contient aucune illustration. Un calque superposition au-dessus des personnages vaut la peine d’être ajouté tôt si un élément de la carte doit masquer le joueur.

La profondeur vient de la même grille. Dans une carte en vue de dessus, triez selon le bord inférieur de chaque objet : ce qui a les pieds les plus bas se dessine en dernier. Pour les tuiles, c’est gratuit, car l’ordonnée de la cellule encode déjà la position. Pour les personnages mobiles, il vous faut un tri par objet avec une résolution d’égalité déterministe, typiquement l’ordonnée de l’objet plus son décalage fractionnaire dans la cellule. Sans cela, deux objets sur la même ligne clignotent d’une image à l’autre.

Les collisions se projettent sur la grille sous forme de tableau parallèle de mêmes dimensions. Donnez à chaque tuile un indicateur solide dans le tileset, afin que peindre un mur le marque aussi comme solide, et utilisez le calque collision pour les exceptions propres à chaque carte. Les indicateurs par cellule ne peuvent pas exprimer les pentes, les plateformes à sens unique ou les murs fins à l’intérieur d’une cellule. Ceux-là appartiennent à des objets distincts superposés à la grille, pas à la tilemap.

• Calque solDense : chaque cellule contient un indice. C’est le seul calque que vous pouvez autotiler en toute sécurité.
• Calque détailClairsemé et transparent là où il est vide. Arbres, rochers, décalques. Rien ici ne doit bloquer le mouvement par accident.
• Calque superpositionDessiné au-dessus des personnages : feuillages d’arbres, ponts, toits. Tout ce qui doit masquer le joueur.
• Calque collisionAucune illustration. Un tableau booléen de la même taille que la carte, initialisé à partir des indicateurs solides du tileset et modifié à la main pour les exceptions.

Étape 5 : l’autotiling et l’ensemble de 47 tuiles

L’autotiling est la partie qui échoue en silence. Une tuile de terrain avec huit voisins a 2^8, soit 256, configurations de voisinage possibles. Les coins ne comptent que lorsque les deux bords adjacents sont remplis, et cette symétrie réduit les 256 cas à 47 tuiles uniques. C’est pourquoi la plupart des moteurs et des éditeurs consomment un ensemble blob de 47 tuiles par terrain, disposé selon une organisation documentée.

Vous rencontrerez aussi un ensemble de 16 tuiles, qui lit les quatre voisins latéraux et ignore les coins, ainsi qu’un ensemble de minituiles 2x2, où chaque cellule est dessinée à partir de quatre quarts de tuile, si bien que 13 à 16 minituiles couvrent tous les cas. L’ensemble de 16 tuiles est plus simple à dessiner mais produit des coins émoussés. L’approche par minituiles demande moins d’images mais vous oblige à concevoir chaque terrain en quarts, ce qui adoucit le pixel art.

Comment créer une tilemap qui s’autotile sans trous

Le masque est tout le mécanisme. Pour chaque cellule, construisez un entier de 8 bits à partir de ses huit voisins : bit 0 pour le nord, bit 1 pour le nord-est, bit 2 pour l’est, et ainsi de suite dans le sens horaire. Choisissez un ordre, notez-le à côté du code et ne le changez jamais. Un masque décalé d’un bit produit encore un terrain plausible, c’est pourquoi des conventions incompatibles survivent des mois avant que quelqu’un remarque que les coins sont faux.

Convertissez ensuite le masque en indice de tuile. Il y a deux façons : une table de correspondance complète de 256 entrées, triviale à générer et facile à déboguer car vous pouvez imprimer la ligne, ou une table de 47 entrées plus une fonction de symétrie. Prenez la table complète, sauf si la cible est limitée en mémoire. Elle élimine toute une classe de bugs de coins.

Les modes de défaillance de l’autotile à connaître avant d’en câbler un

Les coutures aux bords de la carte viennent d’un traitement incohérent des cellules hors limites. Décidez une fois pour toutes si le monde hors de la carte est vide ou du même terrain, et appliquez cette règle à chaque terrain.

Le deuxième échec courant est l’écrasement. L’autotiling réécrit les cellules qu’il possède, donc toute tuile unique que vous avez peinte à la main pour un rendu précis disparaît à la passe suivante. Verrouillez le calque de terrain après l’autotiling ou stockez les exceptions manuelles dans une liste distincte qui s’exécute en dernier.

Des exemples de tilemap que vous pouvez ouvrir et jouer

Lire une carte qui fonctionne enseigne plus que lire sa description. The Cyclops’ Island est une carte jouable construite sur un seul ensemble de terrain avec un calque collision distinct. Parcourez le littoral et observez où la transition sable-eau change de tuile : ce sont les 47 cas du blob à l’œuvre.

Mini World est l’exemple plus petit. Ouvrez-le pour voir la pile de calques, sol, détail et superposition, et pour voir combien peu de tuiles de détail suffisent pour qu’une carte se lise comme terminée plutôt que vide.

Le constructeur de jeux 3D reprend la même grille et l’extrude. Chaque cellule devient un bloc, le calque collision devient des murs verticaux, et le tri en y devient une profondeur réelle dans une scène Three.js. Si votre carte 2D est cohérente, la version 3D ne vous coûte presque rien ; si les calques sont mélangés, l’extrusion le révèle immédiatement.

• The Cyclops’ IslandUne carte parcourable pour étudier les bords de terrain autotilés à la vitesse de jeu plutôt qu’au zoom de l’éditeur.
• Mini WorldUne petite grille pour inspecter la pile de calques sans faire défiler.
• Le constructeur de jeux 3DLa même tilemap extrudée en blocs, où le calque collision devient de la géométrie et la profondeur devient réelle.

Téléchargement du gabarit de tileset (grille PS / Aseprite)

Le gabarit est une aide au dessin, pas une obligation. C’est un canevas transparent avec des repères à chaque cellule, une marque en retrait d’un pixel pour la zone sûre, et des numéros d’indice le long de la ligne supérieure et de la colonne de gauche afin que vous voyiez où tombe un indice pendant que vous dessinez. Dessinez par-dessus, masquez-le avant l’export.

Adaptez le gabarit au projet. Un canevas de 512 par 512 contient une grille de 16 par 16 cellules de 32 px. Avec des cellules de 16 px, le même fichier contient une grille de 32 par 32, et vous devriez baisser l’opacité des repères, car à cette densité les repères masquent l’illustration.

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