Miu2D: Eine 2D-ARPG-Engine in rohem WebGL mit drei Wuxia-Nachbauten

Rohes WebGL statt PixiJS, Phaser oder WASM-Unity

Miu2D ist eine 2D-ARPG-Engine für die Web-Plattform, die laut README rund 176.000 Zeilen TypeScript und Rust umfasst und bewusst ohne Unity, Godot, Phaser, PixiJS oder jedes andere Game-Framework auskommt. Die gesamte Rendering-Pipeline spricht direkt WebGLRenderingContext an; Sprite-Batching, A*-Pfadfindung, Binärformat-Decoder, Skript-VM, Wetterpartikel und Bildschirmeffekte sind aus den Grundprinzipien implementiert. Das Projekt trägt das Etikett Vibe Coding und erklärt, von Anfang an mit KI-unterstützter Programmierung entwickelt worden zu sein. Was der Verzicht auf Frameworks konkret einbringt, führt das README in drei Punkten auf: volle Kontrolle über die Render-Schleife, keine Abstraktionssteuer durch ungenutzte Szenengraphen oder 3D-Mathematik, und Rust-Geschwindigkeit genau dort, wo sie zählt. Der Nachbau dreier klassischer Kingsoft-Wuxia-RPGs dient als Machbarkeitsnachweis; alle drei sind laut README in jedem modernen Browser vollständig spielbar. Metadaten: MIT-Lizenz, TypeScript als Hauptsprache, 449 Sterne, Projektseite miu2d.com mit Live-Demo.

Drei Xishanju-Klassiker als Machbarkeitsnachweis

Als Beweis baut Miu2D drei Action-RPGs von Xishanju (Kingsoft) nach. Legend of Yue Ying aus dem Jahr 2001 gilt laut README als die bis dahin größte Produktion des Studios: sieben oder mehr Enden, über 100 Story-Events, ein 30-köpfiges Team mit mehr als 20 Künstlern und 14 Monate Produktionszeit, mit einer 3D-plus-2D-Mischtechnik für die Szenen. Swords of Legends 2 von 1998 wagte den Sprung von rundenbasiertem zu Diablo-artigem Echtzeitkampf, brachte über 200 NPCs, 640x480 mit 16-Bit-Farben und ein Titellied von Xie Yuxin mit; drei Jahre Entwicklung bei fast drei Millionen Yuan Budget. New Swords of Legends von 2001 ist das Remake des Debüts von 1997, übernimmt die Echtzeitkampf-Engine des zweiten Teils, erweitert auf über 110 Karten und führt übergangslose Wechsel zwischen Innen- und Außenbereichen ein. Diese Titel erklären zugleich, wofür die Engine gebaut wurde: Karten, Zonen, Magie-Systeme, Partys und Dialogbäume im Stil der späten Neunziger, nicht generische Plattformer.

Elf Pakete im pnpm-Monorepo von @miu2d/game bis dashboard

Das Repository ist ein pnpm-Workspace mit 11 Paketen. Die Engine @miu2d/engine ist reines TypeScript, 215 Dateien in 19 Modulen, ohne React-Abhängigkeit; die Laufzeit @miu2d/game nutzt React 19 mit drei Themes namens Classic, Modern und Mobile und 84 Komponenten. Das WASM-Paket @miu2d/engine-wasm kompiliert Rust zu WebAssembly und enthält A*-Pfadfindung, Decoder, SpatialHash und zstd. Das Backend @miu2d/server setzt auf Hono, tRPC und Prisma ORM mit 21 PostgreSQL-Tabellen und 19 Routern, Daten liegen in PostgreSQL 16 plus MinIO oder S3. Das Editor-Paket @miu2d/dashboard bietet ein VS-Code-ähnliches Layout mit 13 Bearbeitungsmodulen. Der Werkzeugstapel listet TypeScript 5.9 im Strict-Modus, Vite 8 mit Rolldown, Tailwind CSS 4, Zod 4 mit geteilten Schemas zwischen Client und Server, Biome für Lint und Format, Web Audio API für OGG-Vorbis-Klang und GLSL für Filter. Gemeinsame Typen, Konverter, Viewer, UI-Komponenten und i18n-Kontext füllen die restlichen Pakete.

SpriteBatcher: 4.800 Tiles in ein bis fünf Draw-Calls

Der Renderer komprimiert die Zeichenlast durch zwei Batcher: Ein SpriteBatcher sammelt Vertexdaten von rund 4.800 Kartentiles und spült sie erst bei Texturwechseln, sodass typischerweise ein bis fünf WebGL-Draw-Calls pro Frame entstehen; ein RectBatcher bündelt etwa 300 Wetterpartikel und UI-Rechtecke in einem einzigen Aufruf. Texturen werden über ImageData in WebGLTexture überführt, mit WeakMap gecacht und über FinalizationRegistry automatisch freigegeben. GLSL-Fragmentshader liefern Farbfilter für Gift, Einfrieren und Versteinern, die Schleife komponiert Ein- und Ausblenden, Blitze und Wasserwellen. Eine Echtzeit-Beleuchtung kombiniert additive Glow-Masken leuchtender Entitäten mit SHD-basiertem Schattenrendering und entspricht laut README der C++-Referenz im Projekt JxqyHD, mit eigenen Lichtmustern für Unterprojektile je Magiebewegungstyp. Für Geräte ohne WebGL existiert ein Canvas-2D-Fallback, der dasselbe Renderer-Interface mit voller Funktionsparität implementiert. Ein 17 Systeme umfassender Subsystem-Katalog, darunter 22 MoveKind-Trajektorien mal 10 SpecialKind-Effekte im Magie-Modul, beschreibt den Funktionsumfang im Detail.

Skript-VM mit 218 DSL-Befehlen und Lua 5.4 über wasmoon

Die Skriptebene bietet zwei Modi, die dieselbe GameAPI teilen. Der DSL-Modus parst .txt- und .npc-Dateien mit einem eigenen Parser und führt sie über einen asynchronen Executor aus; das README zählt 218 Befehle in neun Kategorien von Dialog über Spieler, NPC, Spielzustand, Audio, Effekte und Objekte bis Items. Der Lua-Modus bettet über wasmoon eine vollständige Lua-5.4-Laufzeit ein, die Lua nach WASM kompiliert. Alle 170 GameAPI-Funktionen stehen als PascalCase-Globals bereit; wasmoons Proxy-System brückt asynchrone JavaScript-Funktionen zu Lua-Koroutinen, sodass Aufrufe wie PlayerWalkTo() oder Talk() ohne explizites await blockierend wirken. Der gemeinsame ScriptExecutor leitet nach Dateiendung weiter: .lua an den Lua-Executor, .txt und .npc an den DSL-Executor. Ein Beispielskript im README zeigt den Ablauf kompakt: Karte laden, Spielerposition setzen, Dialog abspielen und bei Questannahme Magie plus Erfahrung vergeben. Wer Original-Skripte der Spiele analysieren will, findet damit beide Formate in einer Laufzeit.

A* in Rust mit 0,2 ms und acht Binärformat-Decoder

Der A*-Pfadfinder läuft in Rust kompiliert zu WebAssembly. Hindernis-Bitmaps werden direkt über Uint8Array-Sichten in den linearen WASM-Speicher geschrieben, A* dort ausgeführt und das Ergebnis über Int32Array-Zeigersichten gelesen, ganz ohne Serialisierung oder FFI-Kopien. Das README nennt fünf Pfadstrategien von gierig bis vollständigem A* mit konfigurierbarer maximaler Iterationszahl und beziffert typische Anfragen auf etwa 0,2 ms, rund zehnmal schneller als die äquivalente TypeScript-Implementierung; zu den Testhardwareangaben schweigt das Dokument. Dazu kommen Decoder für acht Binärformate der Originalspiele: ASF, MPC, MAP, SHD, XNB, MSF, MMF und INI/OBJ, wobei MSF und MMF eine eigene zstd-Kompression verwenden. Das Wettersystem simuliert windgetriebenen Regen mit Spritzern und Blitzen, einen Linseneffekt für Wassertropfen auf dem Bildschirm und Schneeflocken mit Wackeln, Drehung, Drift und allmählichem Schmelzen. Charaktere erben über eine achsstufige Kette von Sprite bis Player, mit Werten, Statusflaggen, Bezier-Bewegung, Treffererkennung, Rückstoß und Fraktionslogik.

Editor, mobile Steuerung und Betrieb via Vercel oder Docker Compose

Der eingebaute Editor imitiert das VS-Code-Layout und deckt 13 Module ab: Magie, NPC, Szene, Item, Shop, Dialog, Spieler, Level, Spielkonfiguration, Dateimanager, Ressourcen und Statistik. Auf dem Desktop steuert Linksklick Bewegung und Interaktion, Rechtsklick die alternative Interaktion, Strg+Linksklick den Angriff auf der Stelle, Q und E das nächste Objekt, A/S/D/F/G die Magie-Slots, Z/X/C die Item-Schnellslots und V Sitzen beziehungsweise Meditieren. Auf Mobilgeräten übernimmt ein virtueller Joystick die Bewegung, Tippen interagiert. Für den Betrieb beschreibt das README Vercel für das Frontend als statische SPA sowie Docker Compose mit PostgreSQL, MinIO, Hono und Nginx für den vollen Stapel. Die Entwicklung verlangt Node.js 18 oder neuer und pnpm 9 oder neuer; die Befehle lauten pnpm dev, make dev, make tsc, pnpm lint, make test und make convert. Rechtlich trennt das Projekt scharf: Der Engine-Code steht unter MIT, während Bilder, Audio, Karten und Skripte der Nachbauten Eigentum von Kingsoft (Xishanju) bleiben und als Fan-Lernprojekt ohne eigene Ressourcenverbreitung zu verstehen sind.

Redaktionelles Fazit

Miu2D eignet sich für Entwickler, die nachvollziehen wollen, wie eine komplette 2D-ARPG-Engine aufgebaut ist, und für Fans der Xishanju-Klassiker; Produktteams, die auf Unity oder Godot setzen, finden hier keinen Ersatz. Vor dem eigenen Start lohnt ein Blick auf die Live-Demo auf miu2d.com und den Befehl pnpm dev im geklonten Monorepo.

Offizielle Quellen

1. Official documentation
2. Official README
3. Project repository