DevLog #02.09. Adventure & Color

Перемещение

Добавил Viewport, который позволяет приближать и отдалять область видимости, перемещаться по карте, а при остановке замедляется и создает эффект скольжения
Сетка на заднем фоне как в Miro, которая двигается и увеличивается / уменьшается при перемещении
Максимальная высота ограничена 10000 пикселями, что позволяет разглядеть интересные формы, которые можно будет выбирать и генерировать
Мир НЕ ОГРАНИЧЕН, и это означает, что при загрузке десятков тысяч нод, можно будет бесконечно листать и исследовать карту. Возможно, кроме нод, добавлю больше интерактивных сущностей, но это только концепт

Полностью выпилил React из всего кода, связанного с PixiJS. Это дало огромную гибкость и отбило привычку делать изменения через хуки (что в нашем случае ухудшает производительность)

В том числе, ноды, которые состояли из контейнера и двух спрайтов, теперь состоят просто из двух спрайтов. А также был выпилен тяжеловесный xstate, который занимал много времени при вызове конструктора, и был заменен на свой стейт

Переписал дерево элементов на модель nodes-edges, где каждая нода является самостоятельным элементом, а не зависит от родителя. Даёт возможность добавлять новые координаты в процессе работы приложения, а не только при генерации мира
Отключение видимости элементов за гранью зоны видимости (culling). Например, при действующих 6000 элементов на сцене, на экране может отображаться всего пара сотен, и вместо 90-100 кадров получим все 120
Генерация (разбиение) чанков и chunk loading. Помимо culling, если всего точек сгенерировано больше 10 тысяч, culling уже не поможет, а вот удаление со сцены позволит держать количество нод в пределах 2000-3000 тысяч. Если мы отдаляемся от ранее прогруженных чанков, кастомный Garbage Collector подчищает ненужные ноды

Сами анимации стали более консистентными, без подергиваний и резких скачков
Добавил анимацию при появлении и прогрузке ноды
При наведении на ноду, все соединяющие её линии с другими нодами, будут подсвечены пурпурно-фиолетовым цветом
При клике на ноду появляются зеленые частицы

Выпилил генерацию из NodeState (теперь просто NodeMap) и сделал несколько стратегий

CircleMapGenerator. Генерирует ноды в форме окружностей разного радиуса
SpiralMapGenerator. Самая красивая стратегия, генерирует ноды в виде спиралей и лучей
WebMapGenerator. Генерирует ноды в виде паутины (по сути сетка с небольшим рандомом)

А на этом у меня всё, скоро ещё увидимся 👋