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