Ce que vous allez faire
Un tileset top-down qui fonctionne. Pas une tuile, un set. Deux ou trois tuiles de terrain sans raccord qui partagent une palette, plus les tuiles de transition placées là où un terrain en rencontre un autre. Cette dernière partie fait la différence entre un tas de textures et un tileset avec lequel on peut bâtir une carte.
La plupart des tutoriels sur la création d'un tileset s'arrêtent dès qu'une tuile se répète proprement. Ici, c'est l'étape quatre sur sept.
Tout passe par le générateur de tuiles de Sprite AI et l'éditeur de tuiles, avec les prompts imprimés ci-dessous.
Étape 1 : écrire le prompt
Le prompt décide de l'essentiel du résultat. Il y a une formule qui marche.
pixel art [terrain] tile, seamless, top-down view, [specific details]
| Style | Prompt | Résultat |
|---|---|---|
| Prairie | pixel art grass tile, seamless, top-down view, vibrant green with small scattered wildflowers | Luxuriant et coloré, bon pour les champs du monde principal |
| Simple | pixel art grass tile, seamless, top-down view, short green grass with subtle color variation | Propre et simple, convient à la plupart des RPG |
| Style GBA | pixel art grass tile, seamless, top-down view, flat green with tiny darker grass tufts, GBA era | Rétro, ambiance Advance Wars |
| Forêt sombre | pixel art grass tile, seamless, top-down view, dark green mossy ground with fallen leaves | Sombre, bon pour les forêts et les donjons |
| Savane sèche | pixel art grass tile, seamless, top-down view, yellow-green dry grass with bare dirt patches | Biome aride qui se marie avec le sable |
À éviter
Ne décrivez pas une scène. « Grass with a tree and a character walking » donne une image, pas une surface répétable. Décrivez la surface, rien d'autre.
Ne mettez pas la taille en pixels dans le prompt. Le modèle lit « 32x32 » comme un concept, pas une dimension. Réglez-la dans l'outil.
N'écrivez pas d'instructions d'éclairage négatives. « No borders » et « no darkening » ne fonctionnent pas. Le modèle ajoute quand même un vignettage, et le pipeline le rogne ensuite.
Étape 2 : choisir la taille
| Taille | Quand l'utiliser | Couleurs | Notes |
|---|---|---|---|
| 32x32 | Ambiance SNES et GBA, le choix indé courant | 12-16 | Serré mais faisable. Le détail se suggère plus qu'il ne se dessine |
| 64x64 | Terrain détaillé, pixel art moderne | 16-24 | Le plus facile à répéter. Commencez ici |
| 128x128 | Pixel art HD, grands environnements | 24-32 | Très tolérant sur les bords |
| 256x256 | Arrière-plans et terrain vedette | 32+ | Plus de surface que la plupart des tilemaps n'en demandent |
Commencez à 64x64. Vous avez 64 pixels par bord pour la passe sans raccord, ce qui facilite tout ce qui suit. 32x32 est le plancher ici. En dessous, c'est un travail de pixel à la main, pas de génération.
Mettez la même valeur en largeur et en hauteur. Les tuiles sont carrées.
Étape 3 : générer
Le modèle dessine en haute résolution, puis le pipeline fait quatre choses. Il détecte que le prompt décrit une tuile, rogne le vignettage que les modèles ajoutent sur les bords, quantifie vers votre nombre de couleurs, et réduit avec un redimensionnement au plus proche voisin jusqu'à vos dimensions cibles.
Dix à quinze secondes, et l'éditeur de tuiles s'ouvre avec le résultat.
Étape 4 : la rendre sans raccord
Une tuile peut sembler parfaite seule et s'effondrer dès qu'elle se répète. L'aperçu en mosaïque est le seul test honnête.
Les surfaces chargées pardonnent, les plates non
À savoir avant de choisir un premier terrain. Une surface chargée comme un sol de forêt ou de l'herbe haute cache beaucoup, parce que l'œil a du détail partout à suivre. Essayez les mêmes réglages sur de la terre battue plate et une grille apparaît. La tuile n'a rien de mal. Chaque tuile générée porte une légère baisse de luminosité vers ses bords, et quand elle se répète, deux bords un peu plus foncés se rencontrent et la paire se lit comme une ligne. Sur une surface chargée, c'est invisible. Sur une surface presque plate, il n'y a rien d'autre à regarder.
Commencez donc par un terrain texturé, et si vous avez besoin de sol plat, prévoyez d'égaliser la luminosité des bords à la main dans l'éditeur de pixel art.
L'éditeur de tuiles montre les deux vues en même temps et offre trois contrôles.
Force du fondu (0-100 %) décale la tuile d'une demie et fond les bords entre eux. Commencez à 100 et descendez si vous voyez des artefacts. Les terrains organiques comme l'herbe, le sable et la terre passent en général à 100. Les tuiles structurées comme la brique et la pierre préfèrent souvent 50 à 75.
Grille (2x2 à 6x6) fixe le nombre de copies dans l'aperçu. 3x3 attrape les raccords. Poussez à 5x5 ou 6x6 pour attraper l'autre défaut, un motif qui se répète si visiblement qu'il ressemble à du papier peint.
Décalage X/Y fait glisser toute la grille pour inspecter la jonction à différentes positions. Si une ligne sombre apparaît à un décalage quelconque, la tuile n'est pas encore sans raccord.
Si l'aperçu est propre en 3x3 mais montre un losange répété en 5x5, la force est trop haute. Le fondu utilise une fonction de poids en losange, visible sur les tuiles aux traits marqués. Descendez à 60 ou 75.
Étape 5 : bâtir le reste du set
Une tuile n'est pas un tileset. Un set top-down utilisable, c'est deux ou trois terrains de base, et ce qui les fait ressembler à un seul monde, c'est une palette partagée.
Générez le premier terrain, puis prenez-le comme référence de style pour les autres, afin qu'ils héritent de sa palette plutôt que de l'approximer.
Générez plutôt chaque terrain d'un prompt neuf et vous obtenez des tuiles bonnes une à une et fausses ensemble, parce que rien ne lie la palette de l'une à la suivante. Ajoutez l'eau, la pierre ou le sable de la même façon, en référençant chaque fois le même original, pour que le set ne dérive pas en grandissant.
Étape 6 : tuiles de transition
C'est l'étape qui transforme du terrain en tileset, et celle que la plupart des tutoriels sautent.
Placez deux terrains côte à côte et la frontière est une ligne droite tirée à la règle. Rien dehors ne fait ça, et l'œil le remarque tout de suite.
Une tuile de transition règle le problème. Un terrain en haut, l'autre en bas, et entre les deux un bord irrégulier dessiné à la main qui se poursuit de tuile en tuile. Posez-en une rangée entre les deux champs et la jonction cesse de se lire comme une frontière.
Deux terrains chargés s'en passent parfois, parce que l'œil lit la jonction comme faisant partie du sol. Dès qu'un côté est plat, ou que les palettes sont éloignées, il vous faut la transition.
Générez-la de la même façon, en référençant votre première tuile, et décrivez la frontière explicitement. Quel terrain est en haut, lequel en bas, et que le bord entre les deux soit irrégulier plutôt que droit.
Le nombre de transitions dépend de jusqu'où vous allez.
| Approche | Tuiles par paire de terrains | Quand ça suffit |
|---|---|---|
| Une tuile de bord | 1 | Frontières horizontales droites seulement. Bien pour une première carte ou un jam |
| Quatre bords | 4 | Haut, bas, gauche et droite. Gère les régions rectangulaires |
| Bords et coins | 8 | Ajoute les coins extérieurs. Le set habituel fait à la main |
| Autotiling blob | 47 | Chaque cas de coin et de bord, le moteur choisit tout seul |
Commencez avec une et ajoutez les autres quand une carte en a vraiment besoin. Un set blob de 47 tuiles est la bonne réponse pour un jeu qui sort, et le mauvais endroit pour commencer.
Étape 7 : exporter pour votre moteur
Téléchargez chaque tuile en PNG, puis configurez l'import pour que rien ne soit flouté.
Godot. Importez le PNG, mettez Filter à false dans le dock Import, activez Repeat, puis créez une ressource TileSet. Le guide des sprites Godot couvre tout le processus.
Unity. Sélectionnez le PNG, réglez Filter Mode sur « Point (no filter) » et Wrap Mode sur « Repeat ». Ouvrez Window > 2D > Tile Palette et glissez-y les tuiles.
GameMaker. Ajoutez le PNG comme sprite, puis créez un Tile Set à partir de lui. Voir le guide des sprites GameMaker.
Tiled. File > New Tileset, sélectionnez le PNG, réglez la taille de tuile sur celle que vous avez générée. Si les raccords semblent faux dans Tiled, ils seront faux en jeu.
Erreurs courantes
Générer une scène au lieu d'une surface. Un prompt qui décrit un paysage renvoie un horizon avec un premier plan et un arrière-plan. Ça ne peut pas se répéter. Décrivez à quoi ressemble le sol, rien d'autre.
Laisser la palette dériver. Générer chaque terrain d'un prompt neuf donne des tuiles bonnes une à une et fausses ensemble, parce que les verts et les bruns viennent d'endroits différents. Prenez la première tuile comme référence de style.
Sauter l'aperçu en mosaïque. Une tuile seule ne dit presque rien. La grille 3x3 attrape la plupart des raccords en deux secondes.
S'arrêter au terrain de base. Deux belles tuiles sans raccord sans transition entre elles donnent quand même une carte qui ressemble à un damier. Les bords, c'est là qu'est le travail.
FAQ
Comment créer un tileset?
Générez une tuile de terrain sans raccord, confirmez qu'elle se répète proprement dans l'aperçu en mosaïque, puis prenez-la comme référence de style pour générer les autres terrains, pour que la palette tienne dans tout le set. Terminez avec des tuiles de transition pour chaque paire de terrains qui se touchent. Deux terrains plus une transition, c'est un tileset qui fonctionne.
Quelle est la différence entre une tuile et un tileset?
Une tuile est une image qui se répète. Un tileset est la collection dont une carte est faite. Plusieurs terrains sans raccord plus les pièces de transition là où ils se rencontrent. Les transitions sont ce qui permet à une carte de se lire comme un monde continu plutôt que des blocs de texture.
Combien de tuiles faut-il dans un tileset top-down?
Moins que vous pensez. Deux terrains de base et une transition suffisent pour une carte jouable. Un jeu qui sort veut en général trois à cinq terrains avec des sets de 8 bords entre les paires qui se touchent, soit 40 à 60 tuiles au total.
Quelle taille pour une tuile de tileset?
64x64 pour la génération, parce que la passe sans raccord a plus de bord à travailler et que le modèle exprime mieux le motif à cette taille. 32x32 est le petit format courant et le plancher de génération ici. Réduisez après la passe sans raccord si votre jeu l'exige.
Pourquoi ma tuile a-t-elle des raccords visibles?
Trois causes habituelles. Le prompt décrivait une scène avec un horizon plutôt qu'une surface plate, la tuile a gardé un vignettage et ses bords sont plus sombres que son centre, ou le prompt n'a jamais demandé « seamless ». Le mode tuile gère les trois, et l'aperçu en mosaïque vous dit lequel vous regardez.
Comment rendre une tuile existante sans raccord?
Importez-la dans l'éditeur de tuiles et lancez la passe sans raccord. À la main, c'est la même idée. Décalez l'image de 50 % dans les deux directions pour que les bords originaux tombent au centre, puis peignez par-dessus les raccords qui traversent maintenant le milieu.
Peut-on utiliser des tuiles générées par IA commercialement?
Oui. Les tuiles que vous générez sur Sprite AI sont à vous, à livrer dans des jeux commerciaux.
Articles liés
Pixel art anime : la tradition JRPG qui n'est jamais partie
Du JRPG SNES aux jeux indés modernes, l'évolution du pixel art anime. Techniques pour les yeux, les cheveux, les poses et les palettes à petite échelle.
Comment faire un jeu en pixel art en 6 étapes
Une feuille de route en six étapes pour votre premier jeu en pixel art. Voir petit, choisir un moteur, faire les sprites et finir le jeu.
Pixel art difficile? La réponse honnête pour débutants
La vérité sur la difficulté du pixel art. Ce qui est vraiment dur, ce qui est plus facile que vous pensez, et comment sauter les parties frustrantes.
