Bericht van Command. De sterrenkaart is het hart van X-Wars - en op telefoons begon het meer te voelen alsof je een zwaar schilderij versleepte dan alsof je door de ruimte vloog. Vandaag breng ik een nieuwe standaardrenderer uit die op WebGL is gebouwd (via PixiJS), mist en bezetting zichtbaar houdt wanneer je uitzoomt en de oude aanpak als noodschakelaar behoudt totdat de nieuwe zich in productie heeft bewezen.
Waarom de kaart traag aanvoelde
Een levende sterrenkaart is niet één afbeelding. Het is een bewegende camera boven een groeiende wereld: tegelrasters, verkenningsnevel, bezettingstinten van bakens, zonnen, planeetsprites, vlootmarkeringen, transitsporen, scanringen en voorbeelden van bereikbaarheid. Op een laptop zag de oude aanpak er vaak prima uit. Op Android- en iOS-apparaten uit de middenklasse haperde hij - vooral bij grote bezettingsgebieden of een uitgestrekte verkende regio. Pannen en knijpen reageerden vertraagd. Dat is geen klacht over de content. Dat is de tol van de renderer.
Hoe een enorm universum wordt opgeslagen zonder de browser te laten verzuipen
Het universum is met opzet groot. Commandanten downloaden niet elke tegel als een JSON-rij. De server en client werken samen met sparse structuren - alleen wat je hebt onthuld, ontdekt of nodig hebt voor de huidige weergave.
Verkenningsmist als bitmaps
Oorlogsmist is geen lijst van elke donkere tegel. Onthulde ruimte wordt opgeslagen in bitmaps die in chunks zijn verdeeld - vierkanten van vaste grootte uit het universum, verpakt in bits. Een chunk van 64 bij 64 tegels past in een paar honderd bytes. De browser ontvangt de chunks die de grenzen van je kaart raken, geen roman vol coördinaten. Wanneer een vloot een gebied verkent, stellen we bits in en sturen we patches. Zo blijft mist goedkoop om op te slaan, zelfs na maandenlange verkenning.
Bezetting als gebieden, niet als behangtegels
Bakengebied gebruikt Chebyshev-afstand - het maximum van de absolute dx en dy - waardoor een dekkingsstraal letterlijk een assenuitgelijnd vierkant op het tegelraster is. Niveaus rekken dat vierkant uit van kleine patrouillezones tot enorme claimgebieden (tientallen tegels per zijde, tot ongeveer 100 voor de zwaarste modules). De game hoeft niet elke bezette tegel als een afzonderlijk document op te slaan. Eigendom wordt gereconstrueerd aan de hand van de middelpunten en stralen van actieve bakens, waarbij de tegels van hemellichamen uit de claim worden weggesneden. Overlappingen tussen je eigen bakens blijven één egale tint, geen stapel steeds donkerdere lagen.
Wat de kaart-API daadwerkelijk verstuurt
Een geladen kaart is een prikbord, geen textuuratlas van de kosmos: stelsels die je kent, vloten die je bezit of detecteert, bakens waarvan de dekking je mist of verkenningsgebied raakt, vervalbergingsmateriaal dat je hebt gevonden en grenzen die ruim genoeg zijn voor die ankerpunten. Verkenningschunks worden tegelijk aangeleverd. De client bepaalt vervolgens wat voor de huidige camera moet worden getekend. Die scheiding - sparse wereldstatus via de verbinding, dichte pixels alleen voor de viewport - is de enige manier waarop een sterrenkaart van een browser-MMO op grote schaal eerlijk blijft.
De oude renderer - een eerlijke terugblik
De vorige sterrenkaart was een React DOM-wereld: een enorme laag die met CSS translate en scale werd verplaatst, markeringen als gepositioneerde knoppen en afbeeldingen, en mist en bezetting als SVG-rechthoeken. Dat was de juiste eerste versie voor de alfa - interactief, goed te debuggen en snel om aan te passen. Hij verouderde niet goed toen bezettingsgebieden en verkende mist groter werden.
- Een laag ter grootte van de wereld schalen met CSS dwingt de browser om bij elk panframe een gigantische boom van nodes opnieuw samen te stellen.
- Bezetting tekende één SVG-rechthoek per bezette tegel binnen de viewport, nadat volledige Chebyshev-gebieden in JavaScript waren uitgevouwen - correct en duur.
- Mist gebruikte samengevoegde SVG-rechthoeken boven het geladen canvas - beter dan één node per tegel, maar nog steeds zwaar op SVG naarmate er meer werd onthuld.
- Planeet- en vlootmarkeringen waren echte DOM-elementen met filters, ringen en aanraakdoelen - prima bij tientallen, kostbaar bij honderden onder een transformerend bovenliggend element.
- Bij uitzoomen verdwenen mist en bezetting voorheen volledig, zodat de macroweergave het aankon - waardoor juist de informatie werd verborgen die je het hardst nodig had om het strijdtoneel te overzien.
De nieuwe renderer - WebGL met PixiJS
De sterrenkaart wordt nu via PixiJS op een canvas ter grootte van de viewport getekend, waarbij PixiJS met WebGL communiceert (met een veilig alternatief wanneer dat nodig is). De wereld is niet langer een DOM-vel van een miljard pixels. Het is een cameramatrix boven GPU-vriendelijke tekenaanroepen. HUD-panelen, dialoogvensters en de besturingsinterface blijven React - alleen het levende kaartoppervlak is verplaatst.
Een camera zonder React te straffen
Terwijl je pant of knijpt, wordt de cameratransformatie van de Pixi-stage onmiddellijk bijgewerkt. React wordt nog steeds op een rustiger ritme geïnformeerd over focus- en cullinggrenzen - gekwantiseerde focusstappen en het einde van een gebaar - zodat we het universum niet bij elke pixel van een vingerbeweging opnieuw opbouwen. Bewegende vloten en transitsporen leven in een dynamische laag die kan blijven tikken zonder zonnen en mist opnieuw te koppelen.
Lagen die nuttig blijven wanneer je uitzoomt
Er zijn nog steeds detailniveaus, maar die veranderen de weergavevorm - niet of mist en bezetting bestaan. Ingezoomd krijg je tegelrasters, planeetsprites en scherpe markeringen. Uitgezoomd krijg je grovere rasters, zonclusters en eenvoudigere markeringen - terwijl bezettingsvierkanten en mistnevel zichtbaar blijven, zodat het strategische beeld niet leeg wordt.
- Achtergrond: raster, mist, bezettingstinten, bereikscontouren (bakenverbinding, vlootdetectie, bewegingsbereikbaarheid, scanradar).
- Hemellichamen: zonnen, planeten, bakenmarkeringen, bergingsmarkeringen.
- Dynamisch: vlootmarkeringen, transitroutes, voorbeelden van reisplannen, samenvoegpijlen.
Waarom Chebyshev-gebieden belangrijk zijn voor het tekenen
Omdat een Chebyshev-gebied een vierkant is, kan bezetting als één quad per baken worden getekend in plaats van als duizenden tegelrechthoeken. Mist gebruikt nog steeds samengevoegde onthulde gebieden, maar alleen voor wat de viewport nodig heeft. Dat is het verschil tussen behang schilderen en stempels zetten.
Wat je als commandant zou moeten merken
- Vloeiender pannen en knijpen op telefoons, vooral boven bezette of grondig verkende ruimte.
- Mist en bezetting blijven leesbaar wanneer je uitzoomt om de volgende corridor te plannen.
- Het detectiebereik van de geselecteerde vloot en voorbeelden van bakendekking worden als strakke vierkanten op de kaart getekend.
- Dezelfde spelregels - dit is een wijziging aan de renderer, geen herontwerp van mist, bakens of vloten.
Noodschakelaar en eerlijkheid over de alfa
Pixi is de standaard. Als er in de praktijk iets misgaat, kan ik de live standaard terugzetten naar de oude DOM-aanpak zonder een volledige rebuild. Kaarttabbladen die al openstaan, behouden hun huidige renderer totdat je ze opnieuw laadt. Ik houd de oude aanpak bewust nog even achter de hand tijdens een korte testperiode - ongeveer een week echt spelen - en ben daarna van plan hem te verwijderen zodra ik het nieuwe glas vertrouw.
Als de kaart na een refresh nog steeds hapert op een specifiek apparaat, laat het me dan weten via Command Relay, met je apparaat, browser en ongeveer waar je keek. Het doel is eenvoudig: de sterrenkaart moet weer als ruimte aanvoelen - licht onder je vinger, rijk aan informatie en klaar voor de gevechten die nog komen. - Command