Mesaj de la Command. Harta stelară este inima X-Wars - iar pe telefoane începuse să pară mai degrabă că tragi după tine un tablou greu decât că zbori prin spațiu. Astăzi lansez un nou renderer implicit construit pe WebGL (prin PixiJS), care păstrează ceața și ocupația vizibile când micșorezi imaginea, lăsând totodată vechea abordare ca mecanism de oprire până când cea nouă trece printr-o perioadă de rodaj în producție.
De ce harta părea lentă
O hartă stelară vie nu este o singură imagine. Este o cameră în mișcare deasupra unei lumi în continuă creștere: grile de dale, pâcla explorării, nuanțele ocupației balizelor, sori, sprite-uri de planete, marcaje de flote, trasee de tranzit, inele de scanare și previzualizări ale razei de deplasare. Pe un laptop, vechea abordare arăta adesea bine. Pe dispozitive Android și iOS din gama medie, sacada - mai ales în cazul zonelor mari de ocupație sau al unei regiuni explorate extinse. Glisarea și gestul de apropiere sau depărtare răspundeau cu întârziere. Nu era o problemă de conținut. Era costul rendererului.
Cum este stocat un univers uriaș fără a sufoca browserul
Universul este vast în mod intenționat. Comandanții nu descarcă fiecare dală sub forma unui rând de JSON. Serverul și clientul cooperează folosind structuri rare - doar ceea ce ai dezvăluit, descoperit sau ai nevoie pentru vizualizarea curentă.
Ceața explorării sub formă de bitmapuri
Ceața războiului nu este o listă cu fiecare dală întunecată. Spațiul dezvăluit este stocat în bitmapuri împărțite în blocuri - pătrate de dimensiune fixă ale universului, împachetate în biți. Un bloc de 64 pe 64 de dale încape în câteva sute de octeți. Browserul primește blocurile care ating limitele hărții tale, nu un roman de coordonate. Când o flotă cercetează o zonă, setăm biții și trimitem actualizări parțiale. Așa rămâne ceața ieftin de stocat chiar și după luni de explorare.
Ocupația sub formă de zone, nu dale de tapet
Teritoriul balizelor folosește distanța Chebyshev - maximul valorilor absolute dx și dy - astfel încât o rază de acoperire este literalmente un pătrat aliniat cu axele grilei de dale. Nivelurile extind acel pătrat de la mici perimetre de patrulare la zone de revendicare enorme (cu laturi de zeci de dale, până la aproximativ 100 pentru cele mai grele module). Jocul nu trebuie să stocheze fiecare dală ocupată ca document separat. Proprietatea este reconstruită pe baza centrelor și razelor balizelor active, iar dalele corpurilor planetare sunt decupate din revendicare. Suprapunerile dintre propriile tale balize rămân o singură nuanță uniformă, nu un teanc de straturi tot mai întunecate.
Ce trimite de fapt API-ul hărții
Încărcarea unei hărți este ca un panou cu marcaje, nu un atlas de texturi al cosmosului: sisteme pe care le cunoști, flote pe care le deții sau le detectezi, balize a căror acoperire se intersectează cu ceața sau zona ta de cercetare, materiale recuperabile din degradare pe care le-ai găsit și limite suficient de largi pentru a include aceste repere. Blocurile de explorare sosesc alături de ele. Clientul decide apoi ce să deseneze pentru camera curentă. Această separare - o stare rară a lumii transmisă prin rețea, pixeli denși doar pentru zona vizibilă - este singura cale prin care harta stelară a unui MMO în browser poate rămâne realistă la scară mare.
Vechiul renderer - o retrospectivă sinceră
Vechea hartă stelară era o lume React DOM: un strat uriaș deplasat cu translate și scale din CSS, marcaje sub formă de butoane și imagini poziționate, iar ceața și ocupația sub formă de dreptunghiuri SVG. A fost alegerea potrivită pentru prima versiune alpha - interactivă, ușor de depanat și rapid de iterat. Nu a îmbătrânit bine pe măsură ce zonele de ocupație și ceața explorată au crescut.
- Scalarea prin CSS a unui strat de dimensiunea lumii obligă browserul să compună un arbore uriaș de noduri la fiecare cadru de panoramare.
- Ocupația desena câte un dreptunghi SVG pentru fiecare dală ocupată din zona vizibilă, după extinderea zonelor Chebyshev complete în JavaScript - corect, dar costisitor.
- Ceața folosea dreptunghiuri SVG îmbinate peste suprafața încărcată - mai bine decât un nod pentru fiecare dală, dar tot dependentă masiv de SVG pe măsură ce zona dezvăluită creștea.
- Marcajele planetelor și flotelor erau elemente DOM reale, cu filtre, inele și zone interactive - acceptabile în număr de câteva zeci, costisitoare când deveneau sute sub un părinte aflat în transformare.
- La micșorarea imaginii, ceața și ocupația dispăreau complet pentru ca vizualizarea macro să poată funcționa - ceea ce ascundea exact informațiile de care aveai cea mai mare nevoie când analizai teatrul de operațiuni.
Noul renderer - WebGL cu PixiJS
Harta stelară este acum desenată într-un canvas de dimensiunea zonei vizibile prin PixiJS, care comunică cu WebGL (cu o cale sigură de rezervă atunci când este necesar). Lumea nu mai este o foaie DOM de un miliard de pixeli. Este o matrice a camerei aplicată peste apeluri de desenare optimizate pentru GPU. Panourile HUD, dialogurile și cadrul de comandă rămân în React - doar suprafața vie a hărții a fost mutată.
Camera fără a suprasolicita React
În timp ce glisezi sau folosești gestul de apropiere ori depărtare, transformarea camerei actualizează imediat scena Pixi. React află în continuare despre focalizare și limitele de eliminare într-un ritm mai calm - prin pași de focalizare cuantificați și la finalul gestului - astfel încât să nu reconstruim universul pentru fiecare pixel parcurs de deget. Flotele în mișcare și traseele de tranzit se află într-un strat dinamic care poate fi actualizat fără remontarea sorilor și a ceții.
Straturi care rămân utile când micșorezi imaginea
Nivelurile de detaliu există în continuare, dar schimbă reprezentarea - nu decid dacă ceața și ocupația există. Când mărești imaginea, vezi grile de dale, sprite-uri de planete și marcaje clare. Când o micșorezi, vezi grile mai grosiere, grupuri de sori și marcaje mai simple - în timp ce pătratele ocupației și pâcla ceții rămân vizibile, pentru ca imaginea strategică să nu dispară.
- Fundal: grilă, ceață, nuanțe ale ocupației, contururi ale razelor (legături între balize, detectarea flotelor, raza de deplasare, radarul de scanare).
- Corpuri: sori, planete, marcaje de balize, marcaje de materiale recuperabile.
- Dinamic: marcaje de flote, rute de tranzit, previzualizări ale planurilor de călătorie, săgeți de unire.
De ce contează zonele Chebyshev pentru desenare
Deoarece o zonă Chebyshev este un pătrat, ocupația poate fi desenată ca un singur patrulater pentru fiecare baliză, în locul a mii de dreptunghiuri pentru dale. Ceața folosește în continuare regiuni dezvăluite îmbinate, dar numai pentru ceea ce este necesar în zona vizibilă. Aceasta este diferența dintre a tapeta și a aplica ștampile.
Ce ar trebui să observi în calitate de comandant
- Glisare și gesturi de apropiere sau depărtare mai fluide pe telefoane, mai ales deasupra spațiului ocupat sau intens explorat.
- Ceața și ocupația rămân lizibile când micșorezi imaginea pentru a planifica următorul coridor.
- Raza de detectare a flotei selectate și previzualizările acoperirii balizelor sunt desenate ca pătrate clare pe hartă.
- Aceleași reguli de joc - aceasta este o schimbare de renderer, nu o reproiectare a ceții, balizelor sau flotelor.
Mecanism de oprire și sinceritate de alpha
Pixi este opțiunea implicită. Dacă ceva nu funcționează corect în condiții reale, pot comuta opțiunea implicită live înapoi la vechea abordare DOM fără o reconstrucție completă. Filele de hartă deja deschise își păstrează rendererul curent până când le reîncarci. Păstrez intenționat vechea abordare pentru o scurtă perioadă de rodaj - aproximativ o săptămână de joc real - apoi intenționez să o elimin după ce voi avea încredere în noua suprafață.
Dacă harta încă sacadează pe un anumit dispozitiv după o reîmprospătare, anunță-mă prin Command Relay și menționează dispozitivul, browserul și aproximativ zona spre care priveai. Obiectivul este simplu: harta stelară trebuie să se simtă din nou ca spațiul - ușoară sub deget, densă în informații și pregătită pentru luptele care urmează. - Command