AI-Isometrie-Spiel-Ersteller — Baue eine begehbare 2.5D-Welt im Browser

Ein AI-Isometrie-Spiel-Ersteller nimmt eine geschriebene Szenenbeschreibung und gibt eine spielbare 2.5D-Welt zurück: ein Rauten-Kachelgitter, eine Kamera, die auf einen Gierwinkel von 45 Grad fixiert ist, Requisiten, die von hinten nach vorne sortiert werden, und eine Figur, die du mit einem Klick überallhin schicken kannst. Neta Studio macht das im Browser. Du tippst den Satz ein, der Composer platziert Terrain und Requisiten auf dem Gitter, und du drückst Play. Keine Engine-Installation, kein Export-Schritt, keine Build-Pipeline.

Die Teile, die normalerweise ein Wochenende fressen, sind bereits verdrahtet: die 2:1-Projektion, die Tiefensortierung und die inverse Bildschirm-zu-Kachel-Transformation hinter dem Klicken zum Bewegen. Was du wirklich steuerst, sind das Layout, das Tileset, die Figur, die Bewegungsregeln und die Reichweite der Kamerabewegung.

Ein Satz → eine isometrische Welt

Der Composer ist der erste Bildschirm. Ein Textfeld, eine Kartengröße in Kacheln und eine Kachelgröße. Du beschreibst die Szene so, wie du sie einem Level-Designer beschreiben würdest, generierst und landest im Editor mit einer bereits zusammengesetzten Rautengitter-Welt. Der Standard sind 64 mal 64 Kacheln bei 64 mal 32 Pixeln pro Kachel, was einen ganzen Bildschirm Welt in eine einzige orthografische Kamera bringt, ganz ohne Zoom.

Zurück kommen vier Ebenen. Der Boden speichert eine Terrain-ID pro Kachel und wird zu einem einzigen Mesh zusammengeführt, nicht zu einem Mesh pro Kachel. Requisiten sitzen auf registrierten Footprints: ein 1x1-Fass, ein 3x3-Haus, ein 2x4-Dock, das eine Wasserkante berühren muss. Entitäten werden von Requisiten getrennt gehalten, weil sie sich bewegen und Pfadfindungsdaten brauchen. Licht und Nebel liegen darüber und beeinflussen die Sortierreihenfolge nicht.

Die Kamera ist auf einen Gierwinkel von 45 Grad und eine Neigung eingestellt, die exakt zu einem 2:1-Rautengitter passt, also atan(0.5), etwa 26,57 Grad, nicht die 30 Grad, die die meisten Tutorials nennen. Die Projektion ist orthografisch, es gibt also keine Perspektivdivision, und eine Kachel am fernen Kartenrand hat dieselbe Pixelgröße wie eine Kachel am nahen Rand. Die Tiefensortierung ist aktiv, bevor du überhaupt Play drückst.

Er wählt die Terrain-Verteilung, die Requisitendichte pro Biom und eine Palette, die in einem einzigen Atlas bleibt. Wichtiger noch: Er registriert Footprints, und genau das hält die Verdeckung später korrekt. Wenn du eine Hafenstadt verlangst, bekommst du Docks, Kisten und eine Wasserkante, aber er weiß nicht, dass das Dock das Wasser berühren muss, wenn du es nicht sagst.

Übermale Terrain mit dem Pinsel, ziehe Requisiten aus der Bibliothek und setze Spawnpunkte. Alles, an dem eine Regel hängt, wie eine Brücke, die einen Fluss überspannen muss, platzierst du selbst. Der Composer liefert dir ein Startlayout, kein fertiges Level.

Das Rautengitter und die Tiefensortierung, erledigt

Eine isometrische Kachel ist ein Quadrat, das um 45 Grad gedreht und auf halbe Höhe gestaucht ist. Mit tileW = 64 und tileH = 32 ist die Welt-zu-Bildschirm-Transformation sx = (x - y) * 32 und sy = (x + y) * 16. Das ist die gesamte Projektion. Es ist keine echte isometrische Projektion, sondern eine dimetrische bei ungefähr 26,57 Grad, und genau deshalb landen 2:1-Rauten auf ganzen Pixeln und ein echtes isometrisches 30-Grad-Gitter nicht. Das 2:1-Verhältnis wird gewählt, weil es beide Achsen gleich stark verkürzt und es erlaubt, jedes Sprite für einen einzigen Kamerawinkel zu zeichnen.

Die Tiefenreihenfolge unter dieser Projektion ist der Maler-Algorithmus: Zeichne zuerst das Objekt mit dem kleineren tileX + tileY. Das hält, bis zwei Objekte sich eine Diagonale teilen. Ein Zaun bei (5, 3) und eine Figur bei (4, 4) ergeben beide den Schlüssel 8. Welche Reihenfolge die Sortierung zurückgibt, zeichnet obenauf, und wenn die Sortierung nicht stabil ist, kippt die Reihenfolge zwischen den Frames und das Paar flackert an der Naht. Der zweite Bruch ist die Höhe. Ein in seiner Mitte verankertes Sprite wird nach seinem mittleren Pixel sortiert, also zeichnet eine 96 Pixel hohe Laterne über eine Figur, die vor ihrer Basis steht. Anker gehören an die untere Mitte des Sprites, auf die Kachel, die das Objekt belegt.

Der dritte Bruch ist die Größe. Ein 3x3-Gebäude, das als ein Objekt mit dem Schlüssel 20 sortiert wird, zeichnet über eine Figur bei (9, 12), Schlüssel 21, obwohl diese Figur vor der linken Säule des Gebäudes steht. Die Engine liest den registrierten Footprint und zerteilt alles, was größer als 1x1 ist, in Streifen pro Spalte, sodass die Figur vor einer Spalte und hinter der nächsten vorbeigeht. Aus demselben Grund kann eine lange Mauer kein einzelnes Sprite sein.

Klicken zum Bewegen auf einem echten Kachelgitter

Das beginnt mit der Umkehrung der Projektion. Nimm die Zeigerposition, ziehe den Kameraursprung und einen etwaigen Letterbox-Versatz ab und berechne dann tileX = (sx / 32 + sy / 16) / 2 und tileY = (sy / 16 - sx / 32) / 2, und runde beide ab. Setze das Vorzeichen im zweiten Term falsch, und die Figur läuft zur Spiegelkachel über die Mitte der Raute. Das ist der Bug, an dem du einen Nachmittag verbringen wirst.

Wenn die Kamera sich frei drehen oder bewegen kann, cache diese Umkehrung nicht. Wirf einen Strahl von der Kamera durch den Zeiger, schneide ihn mit der Bodenebene und rechne den Trefferpunkt in der Welt mit denselben Formeln in Kacheln um. Die Raycast-Version sind ein paar Zeilen und übersteht jede Kamerafahrt.

Dann validiere. Die angeklickte Kachel kann einen Requisiten-Footprint enthalten, Wasser sein, außerhalb der Karte liegen oder unerreichbar sein. Klammere Koordinaten außerhalb der Grenzen ab, prüfe das Belegungsgitter und führe A* über 8 Nachbarn mit diagonalen Kosten von 1,414 aus, ohne Ecken zwischen zwei blockierten Kacheln zu schneiden. Bewege dich in Kacheln pro Sekunde statt in Pixeln pro Sekunde, damit die Geschwindigkeit konstant bleibt, wenn du die Kachelgröße änderst. Laufe entlang einer geglätteten Spline durch die Kachelzentren, mit einem Ankunftsradius von etwa 0,05 Kacheln, sonst stockt die Figur an jedem Wegpunkt.

Isometrische Genres, die du bauen kannst

Vier Genres decken die meisten isometrischen Projekte ab, und sie unterscheiden sich in den Belegungsregeln und in der Zeit, nicht in der Projektion. Ein Städtebau lebt von Multi-Kachel-Footprints, einem Straßennetz, das sich verbinden muss, und einem Baumodus, der einen Footprint vor dem Platzieren vorschaut. Taktik ist rundenbasiert, die Pfadfindung läuft also für viele Einheiten gleichzeitig und die Reichweitenhervorhebung wird direkt auf das Rautengitter gezeichnet. Ein Dungeon Crawler nutzt kleine Karten und enge Korridore, wo das spaltenweise Aufteilen von Wänden am wichtigsten ist, weil die Kamera sich nie bewegt. Ein Action-RPG ist echtzeitbasiert, daher zählen Steuerung, Angriffszustände und Animations-Blending mehr als elegante Pfadfindung.

Was in allen vier Fällen identisch bleibt: das 2:1-Rautengitter, der Sortierschlüssel, der Fußanker und die inverse Transformation beim Klick. Ein Genre-Wechsel mitten im Projekt ändert die Belegungsregeln und die Update-Schleife, nicht den Renderer.

Spiele es jetzt — im Browser

Jede Welt hier läuft im Browser, ohne Installation und ohne Export. Der Szenengraph ist Three.js, der Renderer ist WebGL2 mit einem WebGL1-Fallback, und die Karte lädt als zusammengeführte Boden-Geometrie plus instanziierte Requisiten. Du drückst Play und läufst los. Teile die Welt, und jemand anderes läuft darin auf seinem eigenen Rechner, beim selben 45-Grad-Gierwinkel.

Auf Smartphones läuft derselbe Klickpfad über Pointer Events, ein Tippen ist also ein Klick. Die Tippziele sind Kacheln, das heißt, ein leicht ungenaues Tippen auf eine einteilige Requisite trifft trotzdem die richtige Kachel. Pinch-Zoom ist standardmäßig bei Karten unter 32 Kacheln Breite aus, weil das 2:1-Rautengitter bei Handybreite bereits lesbar ist. Wenn die Bildrate sinkt, reduziere zuerst die Requisitenzahl und nicht die Kartengröße; Instancing hilft mehr als das Löschen von Terrain.

Mini World ist der Fall der kleinen Karte: eine kompakte Rauteninsel, eine Handvoll Requisiten, eine Figur, Klicken zum Bewegen über das Ganze. Es ist der schnellste Weg, das Verhalten von Bodenzusammenführung und Sortierung pro Kachel zu beobachten, weil du die ganze Karte auf einmal siehst und ein schlechter Sortierschlüssel nirgendwo hin verschwinden kann.

The Cyclops' Island ist der Fall, in dem Verdeckung wirklich zählt: hohe Requisiten, Mauer-Spalten und eine Figur, die dahinter entlangläuft. Beobachte eine Gebäudeecke, während die Figur daran vorbeigeht. Der Streifen davor zeichnet über die Figur, der Streifen dahinter darunter, und an keiner Stelle bricht die Figur durch die Wand.

Agent Sprite Forge erzeugt Character-Sheets, die für den isometrischen Winkel gezeichnet sind, mit dem Pivot bereits unten mittig und der Frame-Höhe passend zu deiner Kachelhöhe. Behalte die Kamera beim Standard-Gierwinkel, dann reicht ein einziges Sheet. Aktiviere die Kamerarotation, und du brauchst ein Sheet pro Gierwinkel-Schritt, weil ein für 45 Grad gezeichnetes Sprite bei 90 Grad falsch wirkt.

Laufe in die Welt hinein, zu der es gehört

Ein Sprite ist eine Figur ohne Ort zum Stehen. Der letzte Schritt ist der, den sonst niemand bietet: Nimm das Sheet, das du gerade gebaut hast, und setze es in eine Welt, in der jemand herumlaufen kann — eine kleine Insel, einen Planeten, eine verregnete Straßenecke. Jede Welt auf dieser Seite wurde aus einer einzigen geschriebenen Beschreibung erstellt und als Seite veröffentlicht, die du spielen kannst.

FAQ