Meldunek od Command. Mapa gwiezdna jest sercem X-Wars - a na telefonach zaczynała przypominać przeciąganie ciężkiego obrazu zamiast lotu przez kosmos. Dziś wdrażam nowy domyślny mechanizm renderowania oparty na WebGL (za pośrednictwem PixiJS), dzięki któremu mgła i obszary wpływów pozostają widoczne po oddaleniu widoku. Zachowuję też starą ścieżkę jako wyłącznik awaryjny, dopóki nowa nie przejdzie próby w środowisku produkcyjnym.
Dlaczego mapa wydawała się powolna
Żywa mapa gwiezdna nie jest pojedynczym obrazem. To ruchoma kamera nad rozrastającym się światem: siatki pól, mgła eksploracji, zabarwienia obszarów wpływów nadajników, słońca, sprite'y planet, znaczniki flot, trasy przelotów, pierścienie skanowania i podglądy zasięgu ruchu. Na laptopie stare rozwiązanie często działało dobrze. Na urządzeniach z Androidem i iOS ze średniej półki zacinało się - zwłaszcza przy dużych obszarach wpływów lub rozległym odkrytym regionie. Przesuwanie i gest szczypania reagowały z opóźnieniem. To nie problem z zawartością. To koszt mechanizmu renderowania.
Jak przechowywać ogromny wszechświat bez przeciążania przeglądarki
Wszechświat jest ogromny celowo. Dowódcy nie pobierają każdego pola jako osobnego wiersza JSON. Serwer i klient współpracują przy użyciu rzadkich struktur danych - obejmujących tylko to, co zostało przez ciebie odsłonięte, odkryte lub jest potrzebne w bieżącym widoku.
Mgła eksploracji jako mapy bitowe
Mgła wojny nie jest listą wszystkich ciemnych pól. Odkryta przestrzeń jest przechowywana w podzielonych na fragmenty mapach bitowych - kwadratach wszechświata o stałym rozmiarze, upakowanych w bitach. Fragment o wymiarach 64 na 64 pola mieści się w kilkuset bajtach. Przeglądarka otrzymuje fragmenty stykające się z granicami twojej mapy, a nie powieść złożoną ze współrzędnych. Gdy flota przeprowadza rozpoznanie na danym obszarze, ustawiamy bity i wysyłamy poprawki. Dzięki temu przechowywanie mgły pozostaje tanie nawet po wielu miesiącach eksploracji.
Obszary wpływów jako dyski, a nie pola tapety
Terytorium nadajnika wykorzystuje odległość Chebyshev - maksimum bezwzględnych wartości dx i dy - więc promień zasięgu jest dosłownie kwadratem wyrównanym do osi siatki pól. Poziomy rozszerzają ten kwadrat od małych obszarów patrolowych po ogromne strefy roszczeń terytorialnych (dziesiątki pól na bok, do około 100 w przypadku najcięższych modułów). Gra nie musi przechowywać każdego zajętego pola jako osobnego dokumentu. Własność jest odtwarzana na podstawie środków i promieni aktywnych nadajników, z wyłączeniem pól zajętych przez planety. Nakładające się obszary twoich nadajników zachowują jednolite zabarwienie, zamiast tworzyć stos coraz ciemniejszych warstw.
Co naprawdę wysyła API mapy
Wczytana mapa jest tablicą znaczników, a nie atlasem tekstur całego kosmosu: zawiera znane ci systemy, posiadane lub wykryte floty, nadajniki, których zasięg przecina twoją mgłę lub obszar rozpoznania, odnalezione pozostałości po rozpadzie oraz granice wystarczająco szerokie, aby pomieścić te punkty odniesienia. Wraz z nimi docierają fragmenty danych eksploracji. Następnie klient decyduje, co narysować dla bieżącego położenia kamery. Ten podział - rzadki stan świata przesyłany przez sieć i gęste piksele generowane tylko dla obszaru widoku - jest jedynym sposobem, by mapa gwiezdna w przeglądarkowym MMO działała uczciwie w dużej skali.
Stary mechanizm renderowania - uczciwe podsumowanie
Poprzednia mapa gwiezdna była światem React DOM: ogromna warstwa przesuwana przez CSS translate i scale, znaczniki jako pozycjonowane przyciski i obrazy, a mgła oraz obszary wpływów jako prostokąty SVG. Był to właściwy pierwszy statek na etap alfa - interaktywny, łatwy do debugowania i pozwalający na szybkie iteracje. Nie zniósł jednak dobrze wzrostu obszarów wpływów i odkrytej przestrzeni.
- Skalowanie warstwy wielkości świata za pomocą CSS zmusza przeglądarkę do składania ogromnego drzewa węzłów w każdej klatce przesuwania.
- Obszary wpływów były rysowane jako jeden prostokąt SVG na każde zajęte pole w obszarze widoku, po rozwinięciu w JavaScript pełnych dysków Chebyshev - poprawnie, ale kosztownie.
- Mgła korzystała z połączonych prostokątów SVG na wczytanym płótnie - lepiej niż jeden węzeł na pole, ale wraz z postępem odkrywania nadal wymagało to zbyt wielu elementów SVG.
- Znaczniki planet i flot były prawdziwymi elementami DOM z filtrami, pierścieniami i obszarami interakcji - działało dobrze przy dziesiątkach, lecz stawało się kosztowne przy setkach elementów pod transformowanym rodzicem.
- Po oddaleniu widoku mgła i obszary wpływów znikały całkowicie, aby widok makro mógł przetrwać - ukrywało to jednak informacje wywiadowcze najbardziej potrzebne podczas oceny teatru działań.
Nowy mechanizm renderowania - WebGL z PixiJS
Mapa gwiezdna jest teraz rysowana na płótnie wielkości obszaru widoku za pośrednictwem PixiJS, które komunikuje się z WebGL (z bezpieczną ścieżką zapasową, gdy jest potrzebna). Świat nie jest już arkuszem DOM o miliardzie pikseli. To macierz kamery działająca na wywołaniach rysowania przyjaznych dla GPU. Panele HUD, okna dialogowe i interfejs dowodzenia pozostają w React - przeniesiona została tylko żywa powierzchnia mapy.
Kamera bez karania React
Podczas przesuwania lub używania gestu szczypania transformacja kamery natychmiast aktualizuje scenę Pixi. React nadal otrzymuje informacje o punkcie skupienia i granicach odrzucania, ale w spokojniejszym rytmie - przy skwantowanych krokach punktu skupienia i po zakończeniu gestu - dzięki czemu nie przebudowujemy wszechświata przy każdym pikselu ruchu palca. Poruszające się floty i trasy przelotów znajdują się w dynamicznej warstwie, która może być aktualizowana bez ponownego montowania słońc i mgły.
Warstwy, które pozostają użyteczne po oddaleniu widoku
Poziom szczegółowości nadal istnieje, ale zmienia sposób przedstawienia - nie decyduje o tym, czy mgła i obszary wpływów w ogóle istnieją. W zbliżeniu widzisz siatki pól, sprite'y planet i wyraźne znaczniki. Po oddaleniu otrzymujesz rzadsze siatki, skupiska słońc i prostsze znaczniki - a kwadraty obszarów wpływów i mgła pozostają widoczne, dzięki czemu obraz strategiczny nie znika.
- Tło: siatka, mgła, zabarwienia obszarów wpływów, obrysy zasięgów (połączenie nadajnika, wykrywanie flot, zasięg ruchu, radar skanowania).
- Ciała: słońca, planety, znaczniki nadajników, znaczniki pozostałości.
- Warstwa dynamiczna: znaczniki flot, trasy przelotów, podglądy planów podróży, strzałki łączenia.
Dlaczego dyski Chebyshev mają znaczenie przy rysowaniu
Ponieważ dysk Chebyshev jest kwadratem, obszar wpływów można narysować jako jeden czworokąt na nadajnik zamiast tysięcy prostokątów pól. Mgła nadal korzysta z połączonych odkrytych regionów, ale tylko w zakresie potrzebnym dla obszaru widoku. To różnica między tapetowaniem a przybijaniem pieczątek.
Co powinieneś zauważyć jako dowódca
- Płynniejsze przesuwanie i gest szczypania na telefonach, zwłaszcza nad zajętą lub dobrze odkrytą przestrzenią.
- Mgła i obszary wpływów pozostają czytelne po oddaleniu widoku w celu zaplanowania kolejnego korytarza.
- Zasięg wykrywania wybranej floty i podglądy zasięgu nadajników są rysowane na mapie jako wyraźne kwadraty.
- Te same zasady rozgrywki - to zmiana mechanizmu renderowania, a nie przeprojektowanie mgły, nadajników czy flot.
Wyłącznik awaryjny i uczciwość etapu alfa
Pixi jest rozwiązaniem domyślnym. Jeśli coś pójdzie nie tak w prawdziwych warunkach, mogę przełączyć domyślną wersję na żywo z powrotem na starszą ścieżkę DOM bez pełnej przebudowy. Otwarte już karty mapy zachowają bieżący mechanizm renderowania do czasu ich przeładowania. Celowo pozostawiam starą ścieżkę na krótki okres próbny - około tygodnia prawdziwej gry - a następnie zamierzam ją usunąć, gdy nabiorę zaufania do nowej powierzchni.
Jeśli po odświeżeniu mapa nadal zacina się na konkretnym urządzeniu, daj mi znać przez Command Relay, podając urządzenie, przeglądarkę i przybliżone miejsce, na które patrzyłeś. Cel jest prosty: mapa gwiezdna powinna znów przypominać kosmos - lekka pod palcem, pełna informacji wywiadowczych i gotowa na walki, które wciąż są przed nami. — Command