Jelentés a Commandtól. A csillagtérkép az X-Wars szíve - telefonokon azonban már kezdett inkább egy súlyos festmény vonszolásának érződni, mint űrutazásnak. Ma egy új, WebGL-re épülő alapértelmezett renderelőt teszek közzé a PixiJS közvetítésével, amely kicsinyítéskor is láthatóan tartja a ködöt és a területfoglalást. A régi megoldást vészkapcsolóként egyelőre megtartom, amíg az új kellően be nem válik éles környezetben.
Miért érződött lassúnak a térkép
Egy élő csillagtérkép nem egyetlen kép. Egy mozgó kamera egy folyamatosan növekvő világ felett: csemperácsok, felderítési fátyol, jeladók területfoglalási árnyalatai, napok, bolygósprite-ok, flottajelölők, áthaladási útvonalak, pásztázási gyűrűk és elérhetőségi előnézetek. Laptopon a régi megoldás gyakran megfelelőnek tűnt. Középkategóriás Android- és iOS-eszközökön azonban akadozott - különösen nagy területfoglalási korongok vagy széles felderített régiók esetén. A pásztázás és a csippentés késve reagált. Ez nem tartalmi probléma. Ez a renderelés ára.
Hogyan tárolunk egy hatalmas univerzumot a böngésző túlterhelése nélkül
Az univerzum szándékosan nagy. A parancsnokok nem töltenek le minden egyes csempét külön JSON-sorként. A szerver és a kliens ritka adatszerkezeteken osztozik - csak azon, amit már felfedtél, felfedeztél, vagy amire az aktuális nézethez szükség van.
Felderítési köd bitképek formájában
A háborús köd nem minden egyes sötét csempe felsorolása. A felfedett űrt darabokra bontott bitképekben tároljuk - az univerzum rögzített méretű négyzeteit bitekbe csomagolva. Egy 64-szer 64 csempés darab elfér néhány száz bájtban. A böngésző csak a térkép határaival érintkező darabokat kapja meg, nem egy koordinátákból álló regényt. Amikor egy flotta kör alakú területet derít fel, beállítjuk a biteket, és módosításokat küldünk. Így marad olcsón tárolható a köd még több hónapnyi felderítés után is.
Területfoglalás korongokként, nem tapétacsempékként
A jeladók területe Chebyshev-távolságot használ - az abszolút dx és dy közül a nagyobbat -, így a lefedettségi sugár a csemperácson szó szerint egy tengelyekhez igazított négyzet. A szintek ezt a négyzetet a kis járőrözési területektől az óriási foglalási korongokig nyújtják - oldalanként több tíz csempére, a legnehezebb modulok esetében akár körülbelül 100-ra. A játéknak nem kell minden elfoglalt csempét külön dokumentumként tárolnia. A tulajdonjogot az aktív jeladók középpontjából és sugarából állítjuk vissza, a bolygótestek csempéit pedig kivágjuk a foglalt területből. A saját jeladóid átfedései egységes árnyalatúak maradnak, nem egymásra rakódó, egyre sötétebb rétegek.
Mit küld valójában a térkép API-ja
Egy térképbetöltés inkább kitűzőtábla, mint a kozmosz textúraatlasza: az általad ismert rendszerek, a birtokolt vagy észlelt flották, a ködöddel vagy felderítéseddel érintkező lefedettségű jeladók, a megtalált bomlási roncsanyag és az ezek befogadásához elég tág határok. A felderítési darabok ezekkel együtt érkeznek. Ezután a kliens dönti el, mit rajzoljon ki az aktuális kamerához. Ez a felosztás - ritka világállapot az adatkapcsolaton, sűrű képpontok csak a nézetben - az egyetlen módja annak, hogy egy böngészős MMO csillagtérképe nagy léptékben is tisztességesen működjön.
A régi renderelő - őszinte utólagos elemzés
Az előző csillagtérkép egy React DOM-világ volt: egy hatalmas réteget mozgatott a CSS translate és scale, a jelölők pozicionált gombok és képek voltak, a ködöt és a területfoglalást pedig SVG-téglalapok alkották. Ez volt a megfelelő első hajó az alfához - interaktív, könnyen hibakereshető és gyorsan továbbfejleszthető. A területfoglalási korongok és a felderített köd növekedésével azonban nem öregedett jól.
- Egy világméretű réteg CSS-es skálázása arra kényszeríti a böngészőt, hogy a pásztázás minden képkockáján újrakomponáljon egy óriási elemfát.
- A területfoglalás minden elfoglalt csempéhez egy SVG-téglalapot rajzolt a nézetben, miután JavaScriptben kibontotta a teljes Chebyshev-korongokat - helyes volt, de költséges.
- A köd összevont SVG-téglalapokat használt a betöltött vászon fölött - jobb, mint csempénként egy elem, de a felfedett terület növekedésével továbbra is túlságosan SVG-igényes.
- A bolygó- és flottajelölők valódi DOM-elemek voltak szűrőkkel, gyűrűkkel és interakciós célterületekkel - néhány tucatnál rendben, több száznál viszont költségesek egy folyamatosan átalakuló szülőelem alatt.
- Kicsinyítéskor korábban teljesen eltűnt a köd és a területfoglalás, hogy a makronézet működőképes maradjon - így viszont éppen azt a hírszerzési információt rejtette el, amelyre a hadszíntér áttekintésekor a legnagyobb szükséged volt.
Az új renderelő - WebGL PixiJS használatával
A csillagtérkép mostantól egy nézetméretű vászonra rajzol a PixiJS segítségével, amely a WebGL-lel kommunikál, és szükség esetén biztonságos tartalék útvonalat használ. A világ többé nem egy milliárd képpontos DOM-lap. Egy kameramátrix a GPU számára kedvező rajzolási hívások felett. A HUD dokkjai, párbeszédablakai és parancsnoki kezelőfelülete továbbra is React marad - csak az élő térképfelület költözött át.
Kamera a React túlterhelése nélkül
Pásztázás vagy csippentés közben a kamera transzformációja azonnal frissíti a Pixi színpadát. A React továbbra is értesül a fókuszról és a levágási határokról, de nyugodtabb ütemben - kvantált fókuszlépésekben és a gesztus végén -, így nem építjük újra az univerzumot az ujj minden egyes képpontnyi elmozdulásakor. A mozgó flották és áthaladási útvonalak egy dinamikus rétegen élnek, amely úgy frissülhet, hogy közben nem kell újracsatolni a napokat és a ködöt.
Rétegek, amelyek kicsinyítéskor is hasznosak maradnak
Továbbra is van részletességi szint, de ez a megjelenítést változtatja meg - nem azt, hogy létezik-e a köd és a területfoglalás. Közelről csemperácsokat, bolygósprite-okat és éles jelölőket kapsz. Távolabbról durvább rácsokat, napcsoportokat és egyszerűbb jelölőket látsz - miközben a területfoglalási négyzetek és a ködfátyol megmarad, így a stratégiai kép nem válik üressé.
- Háttér: rács, köd, területfoglalási árnyalatok, hatótávolság-körvonalak (jeladókapcsolat, flottaészlelés, mozgási elérhetőség, pásztázóradar).
- Égitestek: napok, bolygók, jeladójelölők, roncsanyag-jelölők.
- Dinamikus elemek: flottajelölők, áthaladási útvonalak, útiterv-előnézetek, egyesítési nyilak.
Miért számítanak a Chebyshev-korongok a rajzolásnál
Mivel egy Chebyshev-korong négyzet, a területfoglalás jeladónként egyetlen négyszögként rajzolható ki több ezer csempetéglalap helyett. A köd továbbra is összevont felfedett régiókat használ, de csak annyit, amennyire a nézetnek szüksége van. Ez a különbség a tapétázás és a pecsétek lenyomása között.
Mit kellene észrevenned parancsnokként
- Simább pásztázás és csippentés telefonokon, különösen elfoglalt vagy alaposan felderített űr felett.
- A köd és a területfoglalás akkor is olvasható marad, amikor kicsinyítesz a következő folyosó megtervezéséhez.
- A kiválasztott flotta észlelési tartománya és a jeladók lefedettségi előnézete tiszta négyzetekként jelenik meg a térképen.
- Ugyanazok a játékszabályok - ez a renderelő megváltoztatása, nem pedig a köd, a jeladók vagy a flották újratervezése.
Vészkapcsoló és őszinteség az alfában
A Pixi az alapértelmezett. Ha élesben valami félremegy, teljes újraépítés nélkül visszakapcsolhatom az alapértelmezett megoldást a régi DOM-útvonalra. A már megnyitott térképlapok az újratöltésig megtartják a jelenlegi renderelőjüket. Szándékosan megtartom rövid ideig a régi útvonalat, amíg az új megoldás bizonyít - körülbelül egy hét valódi játékidőre -, majd el szeretném távolítani, amint megbízom az új felszínben.
Ha frissítés után a térkép továbbra is megakad egy adott eszközön, jelezd nekem a Command Relayen keresztül, és írd meg az eszközt, a böngészőt, valamint nagyjából azt, hogy merre néztél. A cél egyszerű: a csillagtérkép érződjön ismét űrnek - legyen könnyed az ujjad alatt, hírszerzési információkban gazdag, és álljon készen az előttünk álló összecsapásokra. - Command