Créateur de jeu isométrique par IA — Construisez un monde 2.5D explorable dans votre navigateur

Un créateur de jeu isométrique par IA prend une description écrite de scène et renvoie un monde 2.5D jouable : une grille de tuiles en losange, une caméra verrouillée à 45 degrés de lacet, des accessoires triés de l'arrière vers l'avant et un personnage que vous pouvez envoyer n'importe où d'un clic. Neta Studio fait cela dans le navigateur. Vous tapez la phrase, le composeur place le terrain et les accessoires sur la grille, et vous appuyez sur Play. Pas d'installation de moteur, pas d'étape d'export, pas de pipeline de build.

Les éléments qui prennent normalement tout un week-end sont déjà câblés : la projection 2:1, le tri de profondeur et la transformation inverse écran-vers-tuile derrière le déplacement au clic. Ce que vous contrôlez réellement, c'est la disposition, le jeu de tuiles, le personnage, les règles de déplacement et l'amplitude de déplacement autorisée de la caméra.

Une phrase → un monde isométrique

Le composeur est le premier écran. Un champ de texte, une taille de carte en tuiles et une taille de tuile. Vous décrivez la scène comme vous la décririez à un concepteur de niveaux, vous générez, et vous arrivez dans l'éditeur avec un monde à grille en losange déjà assemblé. La valeur par défaut est 64 par 64 tuiles à 64 par 32 pixels par tuile, ce qui place un écran entier de monde dans une seule caméra orthographique, sans zoom nécessaire.

Ce qui revient, ce sont quatre couches. Le sol stocke un identifiant de terrain par tuile et est fusionné en un seul maillage, et non un maillage par tuile. Les accessoires reposent sur des emprises enregistrées : un tonneau 1x1, une maison 3x3, un quai 2x4 qui doit toucher un bord d'eau. Les entités sont gardées séparées des accessoires parce qu'elles se déplacent et ont besoin de données de recherche de chemin. L'éclairage et le brouillard se superposent et n'affectent pas l'ordre de tri.

La caméra est réglée sur un lacet de 45 degrés et une inclinaison qui correspond exactement à un losange 2:1, soit atan(0.5), environ 26,57 degrés, et non les 30 degrés que citent la plupart des tutoriels. La projection est orthographique, donc il n'y a pas de division perspective et une tuile au bord éloigné de la carte a la même taille en pixels qu'une tuile au bord proche. Le tri de profondeur est actif avant même que vous n'appuyiez sur Play.

Il choisit la répartition du terrain, la densité d'accessoires par biome et une palette qui reste dans un seul atlas. Plus important encore, il enregistre les emprises, ce qui permet de garder une occlusion correcte par la suite. Si vous demandez une ville portuaire, vous obtenez des quais, des caisses et un bord d'eau, mais il ne saura pas que le quai doit toucher l'eau, sauf si vous le précisez.

Repeignez le terrain avec le pinceau, faites glisser les accessoires depuis la bibliothèque et définissez les points d'apparition. Tout ce qui porte une règle, comme un pont qui doit enjamber une rivière, vous le placez vous-même. Le composeur vous donne une disposition de départ, pas un niveau terminé.

La grille en losange et le tri de profondeur, gérés

Une tuile isométrique est un carré pivoté de 45 degrés et écrasé à demi-hauteur. Avec tileW = 64 et tileH = 32, la transformation monde-vers-écran est sx = (x - y) * 32 et sy = (x + y) * 16. C'est toute la projection. Ce n'est pas une véritable projection isométrique, c'est une projection dimétrique à environ 26,57 degrés, et c'est exactement pourquoi les losanges 2:1 tombent sur des pixels entiers alors qu'une vraie grille isométrique à 30 degrés ne le fait pas. Le rapport 2:1 est choisi parce qu'il raccourcit également les deux axes et permet de dessiner chaque sprite pour un seul angle de caméra.

L'ordre de profondeur sous cette projection est l'algorithme du peintre : dessinez d'abord l'objet dont tileX + tileY est le plus petit. Cela tient jusqu'à ce que deux objets partagent une diagonale. Une clôture en (5, 3) et un personnage en (4, 4) produisent tous deux la clé 8. L'ordre que renvoie le tri dessine par-dessus, et si le tri n'est pas stable, l'ordre s'inverse d'une image à l'autre et la paire scintille à la jointure. La deuxième rupture, c'est la hauteur. Un sprite ancré en son centre est trié d'après son pixel médian, donc une lanterne de 96 pixels est dessinée par-dessus un personnage debout devant sa base. Les ancres doivent se trouver au centre inférieur du sprite, sur la tuile qu'occupe l'objet.

La troisième rupture, c'est la taille. Un bâtiment 3x3 trié comme un seul objet avec la clé 20 sera dessiné par-dessus un personnage en (9, 12), clé 21, même si ce personnage se tient devant la colonne gauche du bâtiment. Le moteur lit l'emprise enregistrée et découpe tout ce qui est plus grand que 1x1 en bandes par colonne, de sorte que le personnage passe devant une colonne et derrière la suivante. C'est la même raison pour laquelle un long mur ne peut pas être un seul sprite.

Le déplacement au clic sur une vraie grille de tuiles

Cela commence par l'inverse de la projection. Prenez la position du pointeur, soustrayez l'origine de la caméra et tout décalage de letterbox, puis calculez tileX = (sx / 32 + sy / 16) / 2 et tileY = (sy / 16 - sx / 32) / 2, puis arrondissez les deux à l'entier inférieur. Mettez le mauvais signe sur le second terme et le personnage marche vers la tuile en miroir de l'autre côté du centre du losange. C'est le bug sur lequel vous passerez un après-midi.

Si la caméra peut tourner ou se déplacer librement, ne mettez pas cet inverse en cache. Lancez un rayon depuis la caméra à travers le pointeur, intersectez le plan du sol et convertissez le point d'impact monde en tuiles avec les mêmes formules. La version par lancer de rayon tient en quelques lignes et survit à chaque changement de caméra.

Validez ensuite. La tuile cliquée peut contenir une emprise d'accessoire, être de l'eau, se trouver hors de la carte ou être inaccessible. Bornez les coordonnées hors limites, vérifiez la grille d'occupation et exécutez A* sur 8 voisins avec un coût diagonal de 1,414 et sans couper les angles entre deux tuiles bloquées. Déplacez-vous en tuiles par seconde plutôt qu'en pixels par seconde, pour que la vitesse reste constante quand vous changez la taille des tuiles. Traversez les centres des tuiles le long d'une spline lissée avec un rayon d'arrivée d'environ 0,05 tuile, sinon le personnage saccade à chaque point de passage.

Genres isométriques que vous pouvez créer

Quatre genres couvrent la plupart des projets isométriques, et ils diffèrent par les règles d'occupation et par le temps, pas par la projection. Un jeu de construction de ville repose sur des emprises multi-tuiles, un réseau routier qui doit se connecter et un mode construction qui prévisualise une emprise avant le placement. Le jeu tactique est au tour par tour, donc la recherche de chemin s'exécute pour de nombreuses unités à la fois et la mise en évidence de portée est dessinée directement sur la grille en losange. Le dungeon crawler utilise de petites cartes et des couloirs étroits, où le découpage des murs par colonne compte le plus parce que la caméra ne bouge jamais. L'action-RPG est en temps réel, donc la direction, les états d'attaque et le mélange d'animations comptent plus que l'élégance de la recherche de chemin.

Ce qui reste identique dans les quatre cas : le losange 2:1, la clé de tri, l'ancre aux pieds et la transformation inverse au clic. Changer de genre en cours de projet modifie les règles d'occupation et la boucle de mise à jour, pas le moteur de rendu.

Jouez-y maintenant — dans le navigateur

Chaque monde ici s'exécute dans le navigateur, sans installation ni export. Le graphe de scène est Three.js, le moteur de rendu est WebGL2 avec un repli WebGL1, et la carte se charge sous forme de géométrie de sol fusionnée plus des accessoires instanciés. Vous appuyez sur Play et vous marchez. Partagez le monde et quelqu'un d'autre y marche sur sa propre machine, au même lacet de 45 degrés.

Sur téléphone, le même parcours de clic passe par les pointer events, donc un appui équivaut à un clic. Les cibles tactiles sont des tuiles, ce qui signifie qu'un appui légèrement imprécis sur un accessoire d'une tuile aboutit quand même à la bonne tuile. Le zoom par pincement est désactivé par défaut sur les cartes de moins de 32 tuiles de large, car le losange 2:1 est déjà lisible à la largeur d'un téléphone. Si le taux de rafraîchissement chute, réduisez le nombre d'accessoires avant de réduire la taille de la carte ; l'instanciation aide plus que la suppression de terrain.

Mini World est le cas de la petite carte : une île en losange compacte, une poignée d'accessoires, un personnage, le déplacement au clic sur l'ensemble. C'est le moyen le plus rapide d'observer le comportement de la fusion du sol et du tri par tuile, parce que vous voyez toute la carte d'un coup et qu'une mauvaise clé de tri n'a nulle part où se cacher.

The Cyclops' Island est le cas où l'occlusion compte vraiment : accessoires hauts, colonnes de murs et un personnage qui marche derrière eux. Observez l'angle d'un bâtiment quand le personnage le dépasse. La bande devant est dessinée par-dessus le personnage, la bande derrière est dessinée en dessous, et à aucun moment le personnage ne traverse le mur.

Agent Sprite Forge produit des planches de personnage dessinées pour l'angle isométrique, avec le pivot déjà au centre inférieur et la hauteur des images alignée sur la hauteur de vos tuiles. Gardez la caméra au lacet par défaut et une seule planche suffit. Activez la rotation de la caméra et il vous faut une planche par pas de lacet, parce qu'un sprite dessiné pour 45 degrés se lit mal à 90.

Entrez dans le monde auquel il 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 mettez-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é sous forme de page jouable.

FAQ