Масштабирование игровой карты в Phaser на PC и Mobile

Хочу поделиться с вами решением в плане красивого масштабирования чего-либо (например игровой карты) в Phaser2 как на PC так и на мобильных устройствах.

В данном примере будем масштабировать карту в игре. По сути это будет Sprite, который будет отображать карту.

Особенности данного примера:

  • плавный скроллинг карты с инерцией движения;
  • плавное твиновое масштабирование карты без рывков;
  • масштабирование колесом на PC и двумя пальцами на девайсах;
  • точка под курсором не «убегает» во время масштабирования карты (как в картах гугл, например);
  • карта не уходит за определённые края, если её утащить, то она плавно возвращается к своим границам позиционирования.

За основу я взял свой шаблон Phaser 2 на TypeScript для VSCode.

В результате получилось вот так:

Прямая ссылка на пример, для открытия на девайсах.

Вся основная логика содержится в классе состояния Game:

Код файла Game.ts

Думаю, код должен быть понятен, всё разложено по функциям и прокомментировано в основных местах.

Исходники примера как всегда в репозитории проектов для этого сайта.

Если что непонятно, то пишите в комментах 😉