Начало координат объекта: origin и setOrigin

В библиотеке Phaser каждый игровой объект, будь то спрайт, изображение или текст, имеет собственную систему координат, которая определяет точку привязки объекта. Эта точка известна как origin — начало координат объекта. От неё зависит, где именно объект будет располагаться относительно указанных координат x и y на сцене, а также как он будет вращаться, масштабироваться и позиционироваться при различных трансформациях.

Свойство origin

Свойство origin задаёт нормализованную точку привязки в пределах объекта. Нормализованная точка означает, что значения координат находятся в диапазоне от 0 до 1, где:

  • 0 соответствует левому или верхнему краю объекта.
  • 1 соответствует правому или нижнему краю объекта.
  • 0.5 — центр объекта (значение по умолчанию для спрайтов в Phaser 3).

Например, если объект имеет размеры width = 100 и height = 50, то:

  • origin.set(0, 0) — начало координат в левом верхнем углу.
  • origin.set(0.5, 0.5) — центр объекта.
  • origin.set(1, 1) — правый нижний угол.

Использование origin критически важно при вращении и масштабировании, так как эти операции всегда происходят вокруг текущей точки origin.

Метод setOrigin

Метод setOrigin(x, y) позволяет программно изменить точку привязки объекта после его создания. Синтаксис:

object.setOrigin(x, y);

Где:

  • x — нормализованная горизонтальная координата начала (от 0 до 1)
  • y — нормализованная вертикальная координата начала (от 0 до 1)

Примеры применения:

let sprite = this.add.sprite(400, 300, 'player');

// Привязка к центру
sprite.setOrigin(0.5, 0.5);

// Привязка к левому верхнему углу
sprite.setOrigin(0, 0);

// Привязка к правому нижнему углу
sprite.setOrigin(1, 1);

После вызова setOrigin координаты sprite.x и sprite.y остаются теми же, но визуальное положение объекта на сцене изменяется, так как точка отсчёта смещается.

Практические сценарии использования origin и setOrigin

  1. Центрирование объектов

    Для точного центрирования спрайтов на сцене часто используется origin (0.5, 0.5). Без этого центрирование по координатам x и y будет смещено, так как координаты по умолчанию указывают на левый верхний угол.

    this.add.image(400, 300, 'background').setOrigin(0.5, 0.5);

  2. Ротация вокруг определённой точки

    При вращении объекта важно, где находится точка origin. Например, если требуется вращать объект вокруг нижнего края:

    sprite.setOrigin(0.5, 1);
sprite.angle = 45; // объект вращается вокруг нижней середины

  3. Анимация масштабирования и движения

    Изменение origin позволяет добиться интересных эффектов. Например, рост объекта из центра или из нижнего края:

    sprite.setOrigin(0.5, 1);
sprite.setScale(1, 0);
this.tweens.add({
    targets: sprite,
    scaleY: 1,
    duration: 500
});

  4. Составные объекты и контейнеры

    При работе с Phaser.GameObjects.Container origin объектов внутри контейнера влияет на позиционирование внутри него. Корректная установка origin позволяет выравнивать дочерние объекты относительно контейнера или друг друга.

Отличие origin от displayOrigin

Phaser 3 различает:

  • origin — нормализованная точка привязки (от 0 до 1).
  • displayOrigin — фактические пиксельные смещения в координатах объекта. После установки setOrigin(x, y) Phaser автоматически пересчитывает displayOrigin как width * x и height * y.

Например:

sprite.setOrigin(0.25, 0.75);
console.log(sprite.displayOriginX); // 25% от ширины спрайта
console.log(sprite.displayOriginY); // 75% от высоты спрайта

displayOrigin полезно для точного позиционирования объектов относительно других элементов на сцене, когда известны размеры в пикселях.

Важные нюансы

  • При создании текстовых объектов (Phaser.GameObjects.Text) origin по умолчанию (0, 0). Для центрирования текста нужно использовать setOrigin(0.5, 0.5).
  • Изменение origin не меняет координаты x и y объекта, но визуально объект смещается.
  • Для спрайтов с анимациями origin должен учитываться при настройке рамок (frame) в спрайтшите, чтобы анимация выглядела корректно.

Использование origin и setOrigin позволяет гибко управлять точкой привязки объектов, влияя на поведение вращения, масштабирования и позиционирования, что делает их фундаментальными инструментами для создания динамичных и визуально корректных игровых сцен в Phaser.

Оглавление