Funkspruch von Command. Die Sternenkarte ist das Herz von X-Wars - und auf Handys fühlte sie sich inzwischen eher wie das Schleppen eines schweren Gemäldes an als wie ein Flug durchs All. Heute liefere ich einen neuen Standard-Renderer auf WebGL (über PixiJS), halte Nebel und Besatzung beim Herauszoomen sichtbar und lasse den alten Pfad als Notschalter, bis der neue in Produktion gereift ist.
Warum die Karte sich langsam anfühlte
Eine lebendige Sternenkarte ist kein einzelnes Bild. Sie ist eine bewegte Kamera über einer wachsenden Welt: Kachelraster, Erkundungsnebel, Beacon-Besatzungsfarben, Sonnen, Planetensprites, Flottenpins, Transitspuren, Scan-Ringe und Reichweiten-Vorschauen. Auf einem Laptop wirkte der alte Ansatz oft in Ordnung. Auf mittelklasse Android und iOS ruckelte er - besonders bei großen Besatzungsflächen oder weit erkundenem Raum. Pan und Pinch kamen spät. Das ist keine Content-Beschwerde. Das ist Renderer-Steuer.
Wie ein riesiges Universum gespeichert wird, ohne den Browser zu ertränken
Das Universum ist absichtlich groß. Commander laden nicht jede Kachel als JSON-Zeile. Server und Client arbeiten mit dünnen Strukturen - nur was du enthüllt, entdeckt oder für die aktuelle Ansicht brauchst.
Erkundungsnebel als Bitmaps
Nebel des Krieges ist keine Liste aller dunklen Kacheln. Enthüllter Raum liegt in gechunkten Bitmaps - feste Quadrate des Universums, in Bits gepackt. Ein 64-mal-64-Kachel-Chunk braucht nur wenige hundert Bytes. Der Browser bekommt die Chunks, die deine Kartengrenzen berühren, keinen Roman aus Koordinaten. Wenn eine Flotte eine Scheibe aufklärt, setzen wir Bits und senden Patches. So bleibt Nebel günstig zu speichern, auch nach Monaten Erkundung.
Besatzung als Scheiben, nicht als Tapetenkacheln
Beacon-Territorium nutzt Chebyshev-Distanz - das Maximum aus absolutem dx und dy - deshalb ist ein Abdeckungsradius buchstäblich ein achsenparalleles Quadrat auf dem Kachelraster. Stufen dehnen dieses Quadrat von kleinen Patrol-Flächen bis zu riesigen Claims (zig Kacheln Kantenlänge, bis etwa 100 bei den schwersten Modulen). Das Spiel muss nicht jede besetzte Kachel als eigenes Dokument speichern. Besitz wird aus aktiven Beacon-Zentren und Radien rekonstruiert, Planetkörper-Kacheln werden aus dem Claim ausgeschnitten. Überlappungen zwischen deinen eigenen Beacons bleiben ein flacher Farbton, kein Stapel dunklerer Schichten.
Was die Karten-API wirklich schickt
Ein Kartenladen ist eine Pinnwand, kein Textur-Atlas des Kosmos: Systeme, die du kennst, Flotten, die du besitzt oder erkennst, Beacons, deren Abdeckung deinen Nebel oder deine Aufklärung schneidet, Bergungsreste, die du gefunden hast, und Bounds groß genug für diese Anker. Erkundungs-Chunks kommen dazu. Der Client entscheidet dann, was für die aktuelle Kamera gemalt wird. Diese Trennung - dünner Weltzustand auf der Leitung, dichte Pixel nur für den Viewport - ist der einzige Weg, wie eine Browser-MMO-Sternenkarte in der Größe ehrlich bleibt.
Der alte Renderer - ehrliches Post-Mortem
Die bisherige Sternenkarte war eine React-DOM-Welt: eine riesige Schicht mit CSS-Translate und -Scale, Pins als positionierte Buttons und Bilder, Nebel und Besatzung als SVG-Rechtecke. Das war der richtige erste Schritt für die Alpha - interaktiv, debuggbar, schnell iterierbar. Es alterte schlecht, sobald Besatzungsflächen und erkunder Nebel wuchsen.
- CSS-Skalierung einer weltgroßen Schicht zwingt den Browser, bei jedem Pan-Frame einen riesigen Knotenbaum zu kompositen.
- Besatzung malte ein SVG-Rechteck pro besetzter Kachel im Viewport, nachdem volle Chebyshev-Scheiben in JavaScript expandiert wurden - korrekt und teuer.
- Nebel nutzte zusammengeführte SVG-Rechtecke über der geladenen Canvas - besser als ein Knoten pro Kachel, trotzdem SVG-lastig mit wachsender Enthüllung.
- Planeten- und Flottenpins waren echte DOM-Elemente mit Filtern, Ringen und Hit-Targets - in Dutzenden okay, in Hunderten unter transformierendem Elternteil kostspielig.
- Beim Herauszoomen fielen Nebel und Besatzung früher komplett weg, damit die Makroansicht überlebte - und genau die Intel verschwand, die du beim Überblicken des Theaters brauchst.
Der neue Renderer - WebGL mit PixiJS
Die Sternenkarte zeichnet jetzt in eine viewportgroße Canvas über PixiJS, das mit WebGL spricht (mit sicherem Fallback, wenn nötig). Die Welt ist keine milliardenpixel DOM-Fläche mehr. Sie ist eine Kameramatrix über GPU-freundliche Draw-Calls. HUD-Docks, Dialoge und Command-Chrome bleiben React - nur die lebende Kartenfläche ist umgezogen.
Kamera ohne React zu bestrafen
Während du panst oder pinchst, aktualisiert die Kameratransformation die Pixi-Stage sofort. React erfährt Fokus und Cull-Bounds in ruhigerem Takt - quantisierte Fokus-Schritte und Gestenende - damit wir das Universum nicht bei jedem Fingerpixel neu bauen. Bewegte Flotten und Transitspuren leben in einer dynamischen Schicht, die ticken kann, ohne Sonnen und Nebel neu zu montieren.
Schichten, die beim Herauszoomen nützlich bleiben
Level-of-Detail gibt es weiterhin, aber es ändert die Darstellung - nicht ob Nebel und Besatzung existieren. Herangezoomt: Kachelraster, Planetensprites, scharfe Pins. Herauszoomt: gröbere Raster, Sonnencluster, einfachere Marker - während Besatzungsquadrate und Nebelschleier bleiben, damit das strategische Bild nicht leer wird.
- Hintergrund: Raster, Nebel, Besatzungsfarben, Reichweiten-Umrisse (Beacon-Link, Flottenerkennung, Bewegungsreichweite, Scan-Radar).
- Körper: Sonnen, Planeten, Beacon-Marker, Bergungs-Pins.
- Dynamisch: Flottenmarker, Transitpfade, Reiseplan-Vorschauen, Merge-Pfeile.
Warum Chebyshev-Scheiben fürs Zeichnen zählen
Weil eine Chebyshev-Scheibe ein Quadrat ist, kann Besatzung als ein Quad pro Beacon gezeichnet werden statt tausender Kachel-Rechtecke. Nebel nutzt weiter zusammengeführte enthüllte Regionen, aber nur was der Viewport braucht. Das ist der Unterschied zwischen Tapete streichen und Stempel setzen.
Was du als Commander merken solltest
- Weicheres Pan und Pinch auf Handys, besonders über besetztem oder gut erkundenem Raum.
- Nebel und Besatzung bleiben lesbar, wenn du herauszoomst, um den nächsten Korridor zu planen.
- Erkennungsreichweite der gewählten Flotte und Beacon-Abdeckungsvorschauen als klare Quadrate auf der Karte.
- Gleiche Spielregeln - das ist ein Renderer-Wechsel, kein Redesign von Nebel, Beacons oder Flotten.
Notschalter und Alpha-Ehrlichkeit
Pixi ist der Standard. Wenn in der Wildnis etwas schiefgeht, kann ich den Live-Standard ohne vollständigen Rebuild zurück auf den Legacy-DOM-Pfad legen. Bereits offene Karten-Tabs behalten ihren aktuellen Renderer bis zum Reload. Den alten Pfad halte ich absichtlich für ein kurzes Soak-Fenster - etwa eine Woche echtes Spiel - und plane danach, ihn zu entfernen, sobald ich dem neuen Glas vertraue.
Wenn die Karte nach einem Refresh auf einem bestimmten Gerät immer noch hakt, melde dich über Command Relay mit Gerät, Browser und ungefähr wo du hingeschaut hast. Das Ziel ist einfach: Die Sternenkarte soll sich wieder nach All anfühlen - leicht unter dem Finger, dicht mit Intel, bereit für die Kämpfe, die noch kommen. — Command