Dispaccio dal Comando. La mappa stellare è il cuore di X-Wars - e sugli smartphone aveva iniziato a sembrare più un pesante dipinto da trascinare che un volo nello spazio. Oggi rilascio un nuovo renderer predefinito basato su WebGL (tramite PixiJS), mantenendo visibili nebbia e occupazione quando riduci lo zoom e lasciando il vecchio sistema come interruttore di emergenza finché quello nuovo non avrà superato il rodaggio in produzione.
Perché la mappa sembrava lenta
Una mappa stellare viva non è una singola immagine. È una telecamera in movimento sopra un mondo in espansione: griglie di caselle, foschia dell'esplorazione, tinte dell'occupazione dei radiofari, soli, sprite dei pianeti, indicatori delle flotte, scie di transito, anelli di scansione e anteprime della raggiungibilità. Su un portatile il vecchio approccio spesso sembrava funzionare bene. Sui dispositivi Android e iOS di fascia media procedeva a scatti - soprattutto in presenza di grandi dischi di occupazione o di un'ampia regione esplorata. Panoramica e pinch rispondevano in ritardo. Non è un problema di contenuti. È il prezzo imposto dal renderer.
Come viene memorizzato un universo enorme senza mandare in crisi il browser
L'universo è grande di proposito. I comandanti non scaricano ogni casella come una riga di JSON. Server e client collaborano usando strutture sparse - solo ciò che hai rivelato, scoperto o che serve per la vista corrente.
Nebbia dell'esplorazione sotto forma di bitmap
La nebbia di guerra non è un elenco di tutte le caselle oscure. Lo spazio rivelato viene memorizzato in bitmap suddivise in blocchi - quadrati dell'universo di dimensioni fisse, compressi in bit. Un blocco di 64 per 64 caselle occupa poche centinaia di byte. Il browser riceve i blocchi che intersecano i limiti della tua mappa, non un romanzo di coordinate. Quando una flotta effettua una ricognizione su un disco, impostiamo i bit e inviamo gli aggiornamenti. È così che la nebbia rimane poco costosa da memorizzare anche dopo mesi di esplorazione.
Occupazione sotto forma di dischi, non di caselle da tappezzeria
Il territorio dei radiofari usa la distanza di Chebyshev - il massimo dei valori assoluti di dx e dy - quindi un raggio di copertura è letteralmente un quadrato allineato agli assi sulla griglia delle caselle. I livelli estendono quel quadrato, passando da piccole aree di pattugliamento a enormi dischi di rivendicazione (decine di caselle per lato, fino a circa 100 per i moduli più pesanti). Il gioco non deve memorizzare ogni casella occupata come documento separato. La proprietà viene ricostruita a partire dai centri e dai raggi dei radiofari attivi, escludendo dalla rivendicazione le caselle occupate dai corpi planetari. Le sovrapposizioni tra i tuoi radiofari mantengono un'unica tinta uniforme, anziché diventare una pila di strati più scuri.
Cosa invia davvero l'API della mappa
Il caricamento di una mappa è una bacheca, non un atlante di texture del cosmo: sistemi che conosci, flotte che possiedi o rilevi, radiofari la cui copertura interseca la tua nebbia o le tue ricognizioni, relitti in decadimento che hai trovato e limiti abbastanza ampi da contenere questi punti di riferimento. I blocchi di esplorazione arrivano insieme a questi dati. Il client decide poi cosa disegnare per la telecamera corrente. Questa separazione - stato sparso del mondo trasmesso in rete, pixel densi solo per il viewport - è l'unico modo in cui la mappa stellare di un MMO per browser può restare fedele ai dati su vasta scala.
Il vecchio renderer - un'onesta analisi retrospettiva
La precedente mappa stellare era un mondo React nel DOM: un enorme livello spostato tramite translate e scale in CSS, indicatori realizzati come pulsanti e immagini posizionati, nebbia e occupazione come rettangoli SVG. Era la scelta giusta per il primo lancio dell'alpha - interattiva, facile da sottoporre a debug e rapida da iterare. Non è invecchiata bene con la crescita dei dischi di occupazione e della nebbia esplorata.
- Scalare con CSS un livello grande quanto il mondo obbliga il browser a comporre un gigantesco albero di nodi a ogni fotogramma della panoramica.
- L'occupazione disegnava un rettangolo SVG per ogni casella occupata nel viewport, dopo aver espanso in JavaScript interi dischi di Chebyshev - corretto, ma costoso.
- La nebbia usava rettangoli SVG uniti sopra il canvas caricato - meglio di un nodo per casella, ma comunque troppo dipendente da SVG con l'aumentare dello spazio rivelato.
- Gli indicatori di pianeti e flotte erano veri elementi DOM con filtri, anelli e aree di interazione - accettabili a decine, costosi a centinaia sotto un elemento genitore soggetto a trasformazioni.
- Riducendo lo zoom, nebbia e occupazione scomparivano del tutto per consentire alla vista generale di reggere - nascondendo proprio le informazioni di cui avevi più bisogno per esaminare il teatro operativo.
Il nuovo renderer - WebGL con PixiJS
Ora la mappa stellare viene disegnata in un canvas delle dimensioni del viewport tramite PixiJS, che comunica con WebGL (con un percorso di fallback sicuro quando necessario). Il mondo non è più un foglio DOM da un miliardo di pixel. È una matrice della telecamera applicata a chiamate di disegno ottimizzate per la GPU. Pannelli dell'HUD, finestre di dialogo e interfaccia di comando restano in React - si è spostata solo la superficie viva della mappa.
Una telecamera che non penalizza React
Mentre esegui una panoramica o un pinch, la trasformazione della telecamera aggiorna immediatamente lo stage di Pixi. React continua a ricevere informazioni su punto focale e limiti di culling con una cadenza più tranquilla - passaggi quantizzati del punto focale e fine del gesto - così non ricostruiamo l'universo per ogni pixel percorso dal dito. Le flotte in movimento e le scie di transito si trovano in un livello dinamico che può aggiornarsi senza rimontare soli e nebbia.
Livelli che restano utili quando riduci lo zoom
Il livello di dettaglio esiste ancora, ma cambia la rappresentazione - non determina se nebbia e occupazione esistano o meno. Con lo zoom ravvicinato ottieni griglie di caselle, sprite dei pianeti e indicatori nitidi. Con lo zoom ridotto ottieni griglie più grossolane, gruppi di soli e indicatori più semplici - mentre i quadrati di occupazione e la foschia della nebbia restano visibili, così il quadro strategico non diventa vuoto.
- Sfondo: griglia, nebbia, tinte dell'occupazione, contorni delle gittate (collegamento dei radiofari, rilevamento delle flotte, raggiungibilità degli spostamenti, radar di scansione).
- Corpi: soli, pianeti, indicatori dei radiofari, indicatori dei relitti.
- Dinamico: indicatori delle flotte, percorsi di transito, anteprime dei piani di viaggio, frecce di fusione.
Perché i dischi di Chebyshev sono importanti per il disegno
Poiché un disco di Chebyshev è un quadrato, l'occupazione può essere disegnata come un singolo quadrilatero per radiofaro, anziché come migliaia di rettangoli delle caselle. La nebbia continua a usare regioni rivelate unite, ma solo per ciò che serve al viewport. È la differenza tra tappezzare una parete e imprimere timbri.
Cosa dovresti notare come comandante
- Panoramica e pinch più fluidi sugli smartphone, soprattutto sopra zone occupate o ampiamente esplorate.
- Nebbia e occupazione ancora leggibili quando riduci lo zoom per pianificare il prossimo corridoio.
- Portata di rilevamento della flotta selezionata e anteprime della copertura dei radiofari disegnate come quadrati netti sulla mappa.
- Stesse regole di gioco - è una modifica al renderer, non una riprogettazione di nebbia, radiofari o flotte.
Interruttore di emergenza e onestà da alpha
Pixi è l'impostazione predefinita. Se qualcosa dovesse andare storto nell'uso reale, posso riportare l'impostazione predefinita attiva al vecchio sistema DOM senza una ricompilazione completa. Le schede della mappa già aperte mantengono il renderer corrente fino al ricaricamento. Sto conservando intenzionalmente il vecchio sistema per un breve periodo di rodaggio - circa una settimana di gioco reale - poi intendo rimuoverlo quando mi fiderò del nuovo vetro.
Se dopo un aggiornamento la mappa continua a procedere a scatti su un dispositivo specifico, segnalamelo tramite Command Relay indicando dispositivo, browser e, a grandi linee, la zona che stavi osservando. L'obiettivo è semplice: la mappa stellare deve tornare a sembrare spazio - leggera sotto il dito, ricca di informazioni e pronta per gli scontri che ci attendono. - Command