Локальные и мировые координаты

Phaser — это мощная библиотека для разработки 2D-игр на JavaScript, которая оперирует системой координат, включающей локальные (local) и мировые (world) позиции объектов. Понимание разницы между этими системами критически важно для управления объектами, взаимодействия с пользователем и реализации сложных игровых механик.

Система координат в Phaser

Каждый объект в Phaser, будь то спрайт, контейнер или текст, имеет координаты x и y, определяющие его позицию. Существует два уровня координат:

  1. Локальные координаты (local) — позиция объекта относительно его родителя. Например, если спрайт находится внутри контейнера, координаты спрайта показывают, где он расположен внутри контейнера, а не на всей сцене.
  2. Мировые координаты (world) — абсолютная позиция объекта относительно сцены. Эти координаты учитывают позицию всех родителей объекта по цепочке и позволяют точно определить его положение на экране.

Формула преобразования выглядит так:

[ = + ] [ = + ]

Свойства объектов

Основные свойства, связанные с позициями:

  • x и y — локальные координаты объекта.
  • parentContainer — ссылка на родительский контейнер (если есть).
  • getWorldTransformMatrix() — возвращает матрицу трансформации, которая позволяет вычислять мировые координаты, включая масштаб и вращение.
  • getBounds() — возвращает мировой прямоугольник объекта с учетом всех трансформаций.

Пример использования мировых координат:

const worldPoint = sprite.getWorldTransformMatrix().transformPoint(0, 0);
console.log(worldPoint.x, worldPoint.y);

Этот метод позволяет узнать, где конкретная точка спрайта находится в сцене.

Контейнеры и иерархия объектов

Контейнеры (Phaser.GameObjects.Container) позволяют объединять несколько объектов в одну группу. Координаты объектов внутри контейнера локальные относительно контейнера. Это упрощает перемещение группы объектов и их трансформации.

Пример:

const container = this.add.container(100, 50);
const sprite = this.add.sprite(10, 20, 'hero');

container.add(sprite);

console.log(sprite.x); // 10 — локальная позиция внутри контейнера
console.log(sprite.getWorldTransformMatrix().tx); // 110 — мировая позиция

Здесь спрайт имеет локальные координаты (10, 20), но его мировая позиция учитывает смещение контейнера (100, 50).

Преобразование координат

Phaser предоставляет методы для преобразования координат между локальной и мировой системами:

  • container.worldToLocal(x, y) — преобразует мировые координаты в локальные относительно контейнера.
  • container.localToWorld(x, y) — преобразует локальные координаты в мировые.

Пример:

const localPoint = container.worldToLocal(150, 80);
console.log(localPoint.x, localPoint.y); // координаты внутри контейнера

Это полезно при обработке кликов мышью, когда требуется определить, где пользователь нажал относительно объекта в контейнере.

Влияние трансформаций на координаты

Трансформации, такие как масштабирование, вращение и сдвиг, изменяют мировые координаты объектов, но локальные координаты остаются прежними.

Пример с вращением:

sprite.angle = 45; // вращение в градусах
const worldPoint = sprite.getWorldTransformMatrix().transformPoint(0, 0);
console.log(worldPoint); // мировая позиция с учётом вращения

Мировые координаты учитывают все преобразования: позицию родителя, масштаб, угол поворота. Это позволяет точно позиционировать объекты и отслеживать столкновения в игровой сцене.

Практические сценарии

  1. Обработка столкновений: вычисление мировых координат спрайтов для проверки пересечения.
  2. Анимации в контейнерах: анимация группы объектов без изменения их локальных координат.
  3. Взаимодействие с пользователем: преобразование координат мыши в локальную систему объекта для обработки кликов и жестов.
  4. Параллакс и камеры: использование мировых координат при перемещении камеры, чтобы объекты оставались на своих местах относительно сцены.

Советы по работе с координатами

  • Всегда различать локальные и мировые координаты при работе с контейнерами.
  • Для точных вычислений позиционирования использовать getWorldTransformMatrix().
  • При обработке ввода пользователя конвертировать координаты мыши в локальные координаты объекта.
  • В сложных иерархиях объектов проверять, учитывается ли позиция всех родителей, чтобы избежать неожиданных смещений.

Локальные и мировые координаты в Phaser создают мощный инструмент для управления объектами в сцене. Глубокое понимание их взаимодействия и методов преобразования позволяет строить сложные сцены, реализовывать динамическое позиционирование и создавать плавные, масштабируемые игровые механики.

Оглавление