О чем этот пример
Любой спрайт или изображение в Phaser имеет невидимую точку привязки (origin), которая определяет, как объект позиционируется на сцене и вращается вокруг своей оси. Понимание работы `setOrigin()` критически важно для точного выравнивания игровых элементов, создания анимаций и реализации физических взаимодействий. Эта статья на практическом примере разбирает, как меняется положение спрайта при изменении точки привязки. Вы научитесь контролировать положение объектов относительно их координат и предсказуемо управлять их трансформациями.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('ball', 'assets/sprites/shinyball.png');
}
create ()
{
// Graphics background with lines on
const graphics = this.add.graphics();
this.add.image(200, 100, 'ball').setOrigin(0, 0);
this.add.image(400, 100, 'ball').setOrigin(0, 0.5);
this.add.image(600, 100, 'ball').setOrigin(0, 1);
this.add.image(200, 200, 'ball').setOrigin(0, 0);
this.add.image(400, 200, 'ball').setOrigin(0.5, 0);
this.add.image(600, 200, 'ball').setOrigin(1, 0);
this.add.image(200, 300, 'ball').setOrigin(0, 0);
this.add.image(400, 300, 'ball').setOrigin(0.5, 0.5);
this.add.image(600, 300, 'ball').setOrigin(1, 1);
this.add.image(200, 400, 'ball').setOrigin(1, 0);
this.add.image(400, 400, 'ball').setOrigin(1, 0.25);
this.add.image(600, 400, 'ball').setOrigin(1, 0.5);
this.add.image(200, 500, 'ball').setOrigin(0.25, 1);
this.add.image(400, 500, 'ball').setOrigin(0.5, 0.25);
this.add.image(600, 500, 'ball').setOrigin(0.75, 0.5);
// Draw the alignment lines to our Graphics object
graphics.lineStyle(1, 0x00ff00, 1);
graphics.beginPath();
// Vertical lines
graphics.moveTo(200, 0);
graphics.lineTo(200, 600);
graphics.moveTo(400, 0);
graphics.lineTo(400, 600);
graphics.moveTo(600, 0);
graphics.lineTo(600, 600);
// Horizontal lines
graphics.moveTo(0, 100);
graphics.lineTo(800, 100);
graphics.moveTo(0, 200);
graphics.lineTo(800, 200);
graphics.moveTo(0, 300);
graphics.lineTo(800, 300);
graphics.moveTo(0, 400);
graphics.lineTo(800, 400);
graphics.moveTo(0, 500);
graphics.lineTo(800, 500);
graphics.strokePath();
graphics.closePath();
}
}
const config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
scene: Example
};
const game = new Phaser.Game(config);
Что такое точка привязки (origin)?
Точка привязки — это внутренняя точка внутри спрайта, к которой «привязываются» его координаты (x, y) на сцене. По умолчанию в Phaser эта точка находится в центре объекта (значение 0.5, 0.5). Это значит, что когда вы задаете спрайту координаты (400, 300), именно его центр будет расположен в этой позиции.
Значения setOrigin() задаются в нормализованных координатах:
- (0, 0) — левый верхний угол.
- (1, 1) — правый нижний угол.
- (0.5, 0.5) — центр.
this.add.image(400, 300, 'ball').setOrigin(0.5, 0.5);Создание сетки для визуализации
Прежде чем расставлять спрайты, пример создает графический объект для отрисовки сетки. Это помогает увидеть, как координаты (x, y) каждого изображения соотносятся с его точкой привязки.
Объект Graphics создается для отрисовки линий. Метод lineStyle задает толщину, цвет и прозрачность линии. Далее с помощью moveTo и lineTo определяются начальная и конечная точки каждого отрезка.
const graphics = this.add.graphics();
graphics.lineStyle(1, 0x00ff00, 1);
graphics.beginPath();
graphics.moveTo(200, 0);
graphics.lineTo(200, 600);
// ... другие линии
graphics.strokePath();
graphics.closePath();Эксперименты с выравниванием по горизонтали
Первый ряд спрайтов демонстрирует изменение горизонтальной составляющей точки привязки (originX) при фиксированной вертикальной (originY). Координата `yу всех спрайтов одинакова (100), аx` — разная (200, 400, 600).
Обратите внимание: спрайт «привязывается» к линии сетки именно своей точкой origin. Например, при setOrigin(0, 0.5) левый край спрайта выравнивается по вертикальной линии x=200, а его центр — по горизонтальной линии y=100.
this.add.image(200, 100, 'ball').setOrigin(0, 0);
this.add.image(400, 100, 'ball').setOrigin(0, 0.5);
this.add.image(600, 100, 'ball').setOrigin(0, 1);Эксперименты с выравниванием по вертикали
Второй ряд показывает обратную ситуацию: фиксируется горизонтальная составляющая (originX), а меняется вертикальная (originY). Здесь координата `xу всех спрайтов разная, аy` — одинаковая (200).
Спрайт с setOrigin(0.5, 0) будет выровнен так, что его верхний край окажется на линии y=200, а центр по горизонтали — на линии сетки, заданной координатой `x`.
this.add.image(200, 200, 'ball').setOrigin(0, 0);
this.add.image(400, 200, 'ball').setOrigin(0.5, 0);
this.add.image(600, 200, 'ball').setOrigin(1, 0);Стандартные и произвольные точки привязки
Далее пример показывает как классические комбинации (углы, центр), так и произвольные дробные значения. Значения origin могут быть любыми числами, в том числе отрицательными или больше 1, что позволяет «привязывать» точку за пределами видимой области спрайта.
Это особенно полезно для создания качающихся анимаций (маятник, привязанный к точке над спрайтом) или сложных композиций из нескольких элементов.
// Классические точки
this.add.image(200, 300, 'ball').setOrigin(0, 0);
this.add.image(400, 300, 'ball').setOrigin(0.5, 0.5);
this.add.image(600, 300, 'ball').setOrigin(1, 1);
// Произвольные точки
this.add.image(200, 500, 'ball').setOrigin(0.25, 1);
this.add.image(400, 500, 'ball').setOrigin(0.5, 0.25);
this.add.image(600, 500, 'ball').setOrigin(0.75, 0.5);Что попробовать дальше
Точка привязки — фундаментальное свойство любого игрового объекта в Phaser. Умелое управление origin позволяет точно позиционировать UI-элементы, задавать правильные центры вращения для анимаций и корректно обрабатывать столкновения в физическом движке.
Для экспериментов попробуйте:
1. Создать спрайт и анимировать его вращение, меняя origin от (0,0) до (1,1).
2. Построить интерфейс с панелями, которые должны выравниваться по разным краям экрана.
3. Реализовать «маятник», закрепив точку привязки спрайта выше его видимой части.