Донесення від Командування. Зоряна мапа - серце 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 на полотні розміром із видиму область, а PixiJS взаємодіє з WebGL (із безпечним резервним варіантом за потреби). Світ більше не є DOM-полотном на мільярд пікселів. Тепер це матриця камери над оптимізованими для GPU викликами малювання. Панелі HUD, діалоги й командний інтерфейс залишаються в React - перемістилася лише жива поверхня мапи.
Камера без покарання для React
Поки ви панорамуєте або масштабуєте щипком, трансформація камери негайно оновлює сцену Pixi. React усе ще отримує дані про фокус і межі відсікання, але в спокійнішому темпі - на квантованих кроках фокусу та після завершення жесту, - тому ми не перебудовуємо всесвіт для кожного пікселя руху пальця. Рухомі флоти й маршрути переміщення містяться в динамічному шарі, який може оновлюватися без повторного монтування сонць і туману.
Шари, що залишаються корисними при віддаленні
Рівні деталізації нікуди не зникли, але тепер вони змінюють спосіб представлення, а не сам факт існування туману й зон контролю. При наближенні ви бачите сітки тайлів, спрайти планет і чіткі позначки. При віддаленні - грубіші сітки, скупчення сонць і простіші маркери, а квадрати зон контролю та серпанок туману залишаються, щоб стратегічна картина не зникала.
- Тло: сітка, туман, відтінки зон контролю, контури дальності (зв'язок маяків, виявлення флотів, досяжність переміщення, сканувальний радар).
- Тіла: сонця, планети, маркери маяків, позначки уламків.
- Динаміка: маркери флотів, маршрути переміщення, попередній перегляд планів подорожі, стрілки об'єднання.
Чому диски Chebyshev важливі для малювання
Оскільки диск Chebyshev є квадратом, зону контролю можна намалювати одним чотирикутником на маяк замість тисяч прямокутників тайлів. Для туману й надалі використовуються об'єднані розкриті області, але лише ті, що потрібні видимій області. У цьому й полягає різниця між поклейкою шпалер і проставлянням штампів.
Що ви маєте помітити як командир
- Плавніше панорамування й масштабування щипком на телефонах, особливо над контрольованим або добре розвіданим простором.
- Туман і зони контролю залишаються читабельними при віддаленні для планування наступного коридору.
- Дальність виявлення вибраного флоту й попередній перегляд покриття маяка малюються на мапі як чіткі квадрати.
- Ті самі правила гри - це зміна рендерера, а не переробка туману, маяків чи флотів.
Аварійний вимикач і чесність альфи
Pixi використовується за замовчуванням. Якщо в реальних умовах щось піде не так, я зможу повернути стандартний рендерер до застарілого варіанта DOM без повного перескладання. Уже відкриті вкладки мапи зберігатимуть поточний рендерер до перезавантаження. Я навмисно залишаю старий варіант на короткий період випробувань - приблизно на тиждень реальної гри, - а потім планую видалити його, щойно почну довіряти новому склу.
Якщо після оновлення мапа все ще підгальмовує на певному пристрої, повідомте мені через Command Relay, указавши пристрій, браузер і приблизне місце, яке ви переглядали. Мета проста: зоряна мапа знову має відчуватися як космос - легкою під пальцем, насиченою розвідданими й готовою до майбутніх битв. - Командування