Hlášení od Command. Hvězdná mapa je srdcem X-Wars - a na telefonech začala působit spíš jako vláčení těžkého obrazu než jako let vesmírem. Dnes nasazuji nový výchozí renderer postavený na WebGL (prostřednictvím PixiJS), který zachovává viditelnost mlhy a obsazení i při oddálení, a starý způsob ponechávám jako nouzový vypínač, dokud se nový neosvědčí v produkci.
Proč mapa působila pomalu
Živá hvězdná mapa není jeden obrázek. Je to pohyblivá kamera nad rostoucím světem: mřížky dlaždic, opar průzkumu, barevné odstíny obsazení majáky, slunce, sprity planet, značky flotil, trasy přeletů, skenovací kruhy a náhledy dosažitelnosti. Na notebooku vypadal starý přístup často dobře. Na telefonech se systémem Android a iOS střední třídy se zadrhával - zvlášť u velkých disků obsazení nebo rozsáhlých prozkoumaných oblastí. Posouvání a přibližování prsty reagovalo se zpožděním. To není problém obsahu. To je daň za renderer.
Jak se ukládá obrovský vesmír, aniž by zahltil prohlížeč
Vesmír je záměrně rozsáhlý. Velitelé nestahují každou dlaždici jako řádek JSON. Server a klient spolupracují pomocí řídkých struktur - pouze s tím, co jste odhalili, objevili nebo potřebujete pro aktuální pohled.
Průzkumná mlha jako bitmapy
Mlha války není seznam všech tmavých dlaždic. Odhalený prostor se ukládá v bitmapách rozdělených do bloků - čtverců vesmíru s pevnou velikostí, zabalených do bitů. Blok o velikosti 64 krát 64 dlaždic se vejde do několika stovek bajtů. Prohlížeč obdrží bloky, které zasahují do hranic vaší mapy, nikoli román plný souřadnic. Když flotila prozkoumá oblast, nastavíme bity a odešleme dílčí aktualizace. Díky tomu zůstává ukládání mlhy levné i po měsících průzkumu.
Obsazení jako disky, ne jako dlaždice tapety
Území majáků používá Chebyshev vzdálenost - maximum absolutních hodnot dx a dy - takže poloměr pokrytí je na mřížce dlaždic doslova čtverec zarovnaný s osami. Úrovně tento čtverec zvětšují od malých hlídkových oblastí až po obrovské disky nároku (desítky dlaždic na každé straně, u nejtěžších modulů až přibližně 100). Hra nemusí ukládat každou obsazenou dlaždici jako samostatný dokument. Vlastnictví se rekonstruuje z center a poloměrů aktivních majáků, přičemž dlaždice planetárních těles jsou z nároku vyříznuty. Překryvy mezi vašimi vlastními majáky zůstávají jedním plochým odstínem, nikoli vrstvami, které se postupně ztmavují.
Co mapové API skutečně odesílá
Načtení mapy je nástěnka se špendlíky, nikoli atlas textur celého kosmu: systémy, které znáte, flotily, které vlastníte nebo detekujete, majáky, jejichž pokrytí se protíná s vaší mlhou nebo průzkumem, nalezené pozůstatky po rozpadu a hranice dostatečně široké, aby tyto kotevní body pojaly. Současně dorazí bloky průzkumu. Klient pak rozhodne, co vykreslit pro aktuální kameru. Toto rozdělení - řídký stav světa přenášený po síti, husté pixely pouze pro výřez - je jediný způsob, jak může hvězdná mapa MMO v prohlížeči poctivě fungovat ve velkém měřítku.
Starý renderer - upřímné ohlédnutí
Předchozí hvězdná mapa byla světem React DOM: obrovská vrstva se pohybovala pomocí CSS translate a scale, značky byly umístěná tlačítka a obrázky a mlhu s obsazením tvořily obdélníky SVG. Pro alfu to byla správná první verze - interaktivní, snadno laditelná a rychlá na úpravy. Jakmile se však zvětšily disky obsazení a prozkoumaná mlha, přestala stačit.
- Škálování vrstvy o velikosti celého světa pomocí CSS nutí prohlížeč při každém snímku posunu skládat obrovský strom uzlů.
- Obsazení vykreslovalo jeden obdélník SVG na každou obsazenou dlaždici ve výřezu poté, co JavaScript rozvinul celé Chebyshev disky - správně, ale draze.
- Mlha používala sloučené obdélníky SVG nad načteným plátnem - lepší než jeden uzel na dlaždici, ale s rostoucím odhaleným územím stále příliš náročné na SVG.
- Značky planet a flotil byly skutečné prvky DOM s filtry, kruhy a oblastmi zásahu - v desítkách bez problémů, ve stovkách pod transformovaným rodičem nákladné.
- Při oddálení se dříve mlha a obsazení úplně skryly, aby makro pohled vůbec přežil - tím se ale zatajily právě ty informace, které jste při průzkumu bojiště potřebovali nejvíc.
Nový renderer - WebGL s PixiJS
Hvězdná mapa se nyní vykresluje na plátno o velikosti výřezu prostřednictvím PixiJS, které komunikuje s WebGL (a v případě potřeby používá bezpečnou záložní cestu). Svět už není list DOM s miliardou pixelů. Je to matice kamery nad vykreslovacími voláními vhodnými pro GPU. Doky HUD, dialogy a ovládací rozhraní zůstávají v React - přesunul se pouze živý povrch mapy.
Kamera bez trestání React
Při posouvání nebo přibližování prsty se transformace kamery okamžitě aktualizuje na scéně Pixi. React se o zaměření a hranicích ořezu stále dozvídá v klidnějším rytmu - při kvantovaných krocích zaměření a na konci gesta - takže nepřestavujeme vesmír s každým pixelem pohybu prstu. Pohybující se flotily a trasy přeletů žijí v dynamické vrstvě, která se může aktualizovat bez opětovného připojování sluncí a mlhy.
Vrstvy, které zůstávají užitečné i při oddálení
Úrovně detailu stále existují, ale mění způsob zobrazení - nikoli to, zda mlha a obsazení existují. Při přiblížení vidíte mřížky dlaždic, sprity planet a ostré značky. Při oddálení dostanete hrubší mřížky, shluky sluncí a jednodušší značky - čtverce obsazení a opar mlhy však zůstávají, takže strategický obraz nezmizí.
- Pozadí: mřížka, mlha, odstíny obsazení, obrysy dosahů (spojení majáků, detekce flotil, dosažitelnost pohybu, skenovací radar).
- Tělesa: slunce, planety, značky majáků, značky pozůstatků.
- Dynamická vrstva: značky flotil, trasy přeletů, náhledy cestovních plánů, šipky sloučení.
Proč jsou Chebyshev disky důležité pro vykreslování
Protože je Chebyshev disk čtverec, lze obsazení vykreslit jako jeden čtyřúhelník na maják namísto tisíců obdélníků dlaždic. Mlha stále používá sloučené odhalené oblasti, ale pouze pro to, co potřebuje výřez. To je rozdíl mezi tapetováním a otiskováním razítek.
Čeho byste si jako velitel měli všimnout
- Plynulejší posouvání a přibližování prsty na telefonech, zvlášť nad obsazeným nebo důkladně prozkoumaným prostorem.
- Mlha a obsazení zůstávají čitelné i při oddálení, když plánujete další koridor.
- Dosah detekce vybrané flotily a náhledy pokrytí majáků jsou na mapě vykresleny jako čisté čtverce.
- Stejná herní pravidla - jde o změnu rendereru, nikoli o přepracování mlhy, majáků nebo flotil.
Nouzový vypínač a upřímnost alfy
Pixi je výchozí. Pokud se v ostrém provozu něco pokazí, mohu živé výchozí nastavení přepnout zpět na starší cestu DOM bez kompletního sestavení. Již otevřené karty s mapou si ponechají aktuální renderer, dokud je znovu nenačtete. Starou cestu záměrně ponechávám po krátkou dobu ověřování - přibližně týden skutečného hraní - a jakmile budu novému sklu důvěřovat, hodlám ji odstranit.
Pokud se mapa i po obnovení na konkrétním zařízení stále zadrhává, dejte mi vědět prostřednictvím Command Relay a uveďte zařízení, prohlížeč a přibližně místo, na které jste se dívali. Cíl je jednoduchý: hvězdná mapa by měla znovu působit jako vesmír - lehká pod prstem, nabitá informacemi a připravená na boje, které nás ještě čekají. — Command