Сводка от Command. Звездната карта е сърцето на X-Wars - а на телефони беше започнала да се усеща като влачене на тежка картина вместо полет през космоса. Днес пускам нов визуализатор по подразбиране, изграден върху WebGL (чрез PixiJS), който запазва мъглата и окупацията видими при отдалечаване, а старият подход остава като авариен прекъсвач, докато новият не се докаже в реална среда.
Защо картата се усещаше бавна
Живата звездна карта не е една картина. Тя е движеща се камера над разрастващ се свят: мрежи от клетки, мъгла над изследваните зони, оттенъци за окупацията от маяци, слънца, спрайтове на планети, маркери на флоти, следи от транзит, пръстени за сканиране и предварителни изгледи на обсега. На лаптоп старият подход често изглеждаше добре. На устройства с Android и iOS от среден клас той насичаше - особено при големи окупационни зони или обширен изследван регион. Плъзгането и жестовете с два пръста реагираха със закъснение. Това не е проблем на съдържанието. Това е цената на визуализатора.
Как се съхранява огромна вселена, без да се претоварва браузърът
Вселената е огромна умишлено. Командирите не изтеглят всяка клетка като отделен ред JSON. Сървърът и клиентът работят съвместно с разредени структури - само за това, което сте разкрили, открили или ви е необходимо за текущия изглед.
Мъглата на изследването като растерни битови карти
Мъглата на войната не е списък с всяка тъмна клетка. Разкритото пространство се съхранява в разделени на блокове битови карти - квадрати с фиксиран размер от вселената, пакетирани в битове. Блок от 64 на 64 клетки се побира в няколкостотин байта. Браузърът получава блоковете, които се пресичат с границите на картата ви, а не роман от координати. Когато флот разузнае зона, задаваме съответните битове и изпращаме промените. Така съхраняването на мъглата остава евтино дори след месеци на изследване.
Окупацията като зони, а не клетки от тапет
Територията на маяците използва разстояние на Chebyshev - максималната стойност от абсолютните dx и dy - така че радиусът на покритие буквално представлява подравнен по осите квадрат върху мрежата от клетки. Нивата разширяват този квадрат от малки патрулни зони до огромни области на претенции (десетки клетки на страна, до около 100 при най-тежките модули). Не е необходимо играта да съхранява всяка окупирана клетка като отделен документ. Собствеността се възстановява от центровете и радиусите на активните маяци, като клетките с планетарни тела се изрязват от претенцията. Застъпванията между собствените ви маяци остават един равномерен оттенък, а не купчина от все по-тъмни слоеве.
Какво всъщност изпраща API на картата
Зареждането на картата е табло с маркери, а не текстурен атлас на космоса: познатите ви системи, флотите, които притежавате или засичате, маяците, чието покритие се пресича с мъглата или разузнаването ви, откритите от вас останки от разпад и граници, достатъчно широки, за да поберат тези опорни точки. Блоковете за изследване пристигат заедно с тях. След това клиентът решава какво да нарисува за текущата камера. Това разделение - разредено състояние на света по мрежата и плътни пиксели само за видимата област - е единственият начин звездната карта на браузърна MMO да остане реалистична в голям мащаб.
Старият визуализатор - честен разбор
Предишната звездна карта беше React DOM свят: огромен слой, преместван чрез CSS translate и scale, маркери като позиционирани бутони и изображения, а мъглата и окупацията - като SVG правоъгълници. Това беше правилният първи избор за алфа версията - интерактивен, лесен за отстраняване на грешки и бърз за доработване. Но не остаря добре, когато окупационните зони и изследваните области се разраснаха.
- Мащабирането с CSS на слой с размера на целия свят принуждава браузъра да композира огромно дърво от възли при всеки кадър на преместването.
- Окупацията се рисуваше с по един SVG правоъгълник за всяка окупирана клетка във видимата област, след като пълните зони по Chebyshev се разгъваха в JavaScript - правилно, но скъпо.
- Мъглата използваше обединени SVG правоъгълници върху зареденото платно - по-добре от по един възел на клетка, но все така претоварено със SVG с разрастването на разкритите области.
- Маркерите на планети и флоти бяха реални DOM елементи с филтри, пръстени и зони за взаимодействие - приемливо при десетки, скъпо при стотици под трансформиращ се родителски елемент.
- Преди при отдалечаване мъглата и окупацията изчезваха напълно, за да оцелее общият изглед - което скриваше точно разузнавателната информация, от която най-много се нуждаехте при оглед на театъра на бойните действия.
Новият визуализатор - WebGL с PixiJS
Звездната карта вече се рисува в платно с размера на видимата област чрез PixiJS, който комуникира с WebGL (с безопасен резервен подход при необходимост). Светът вече не е DOM платно с милиарди пиксели. Той е матрица на камерата върху удобни за GPU команди за рисуване. Панелите на HUD, диалоговите прозорци и командният интерфейс остават в React - преместена е само живата повърхност на картата.
Камера без излишно натоварване на React
Докато плъзгате или използвате жест с два пръста, трансформацията на камерата незабавно актуализира сцената на Pixi. React продължава да получава информация за фокуса и границите за отсяване, но с по-спокойна честота - квантувани стъпки на фокуса и край на жеста - така че да не изграждаме вселената наново за всеки пиксел, изминат от пръста. Движещите се флоти и транзитните следи се намират в динамичен слой, който може да се обновява, без да монтира наново слънцата и мъглата.
Слоеве, които остават полезни при отдалечаване
Нивата на детайлност продължават да съществуват, но променят начина на представяне - не това дали мъглата и окупацията съществуват. При приближаване виждате мрежи от клетки, спрайтове на планети и ясни маркери. При отдалечаване виждате по-едри мрежи, групи от слънца и по-прости маркери - докато окупационните квадрати и мъглата остават, за да не изчезва стратегическата картина.
- Фон: мрежа, мъгла, оттенъци на окупацията, очертания на обсега (връзка на маяци, засичане от флоти, обсег за придвижване, сканиращ радар).
- Тела: слънца, планети, маркери на маяци, маркери на останки.
- Динамични елементи: маркери на флоти, транзитни маршрути, предварителни изгледи на плановете за пътуване, стрелки за сливане.
Защо зоните по Chebyshev са важни за рисуването
Тъй като зоната по Chebyshev е квадрат, окупацията може да се нарисува като един четириъгълник на маяк вместо като хиляди правоъгълници за клетки. Мъглата все още използва обединени разкрити области, но само за необходимото във видимата област. Това е разликата между лепене на тапети и поставяне на печати.
Какво трябва да забележите като командир
- По-плавно плъзгане и мащабиране с два пръста на телефони, особено над окупирано или добре изследвано пространство.
- Мъглата и окупацията остават четливи, когато се отдалечите, за да планирате следващия коридор.
- Обсегът за засичане на избрания флот и предварителните изгледи на покритието на маяците се рисуват като ясни квадрати върху картата.
- Същите правила на играта - това е промяна на визуализатора, а не преработка на мъглата, маяците или флотите.
Авариен прекъсвач и честност за алфа версията
Pixi е изборът по подразбиране. Ако нещо се обърка в реална среда, мога да върна активната настройка по подразбиране към стария DOM подход без пълно ново изграждане. Вече отворените раздели с картата запазват текущия си визуализатор, докато не ги презаредите. Умишлено запазвам стария подход за кратък период на изпитване - около седмица реална игра - след което възнамерявам да го премахна, щом се доверя на новата повърхност.
Ако след опресняване картата все още насича на конкретно устройство, уведомете ме чрез Command Relay, като посочите устройството, браузъра и приблизително коя област сте разглеждали. Целта е проста: звездната карта отново трябва да се усеща като космос - лека под пръста, наситена с разузнавателна информация и готова за предстоящите битки. - Command