О чем этот пример

При создании игр на Phaser важно понимать, как работает система координат и точка вращения спрайтов. Неправильно заданная точка привязки может привести к неожиданному поведению объектов при их повороте или масштабировании. В этой статье мы разберем, как свойства `origin` и `rotation` влияют на трансформацию игровых объектов, используя наглядный пример из официальной документации. Это знание поможет вам создавать более предсказуемую и плавную анимацию.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код


class Example extends Phaser.Scene
{
    image4;
    image3;
    image2;
    image1;

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('grid', 'assets/pics/debug-grid-1920x1920.png');
        this.load.image('atari', 'assets/sprites/atari130xe.png');
    }

    create ()
    {
        this.add.image(0, 0, 'grid').setOrigin(0);

        this.image1 = this.add.image(200, 320, 'atari'); // default origin is 0.5 = the center
        this.image2 = this.add.image(400, 320, 'atari').setOrigin(0);
        this.image3 = this.add.image(600, 320, 'atari').setOrigin(0.25, 0.75);
        this.image4 = this.add.image(800, 320, 'atari').setOrigin(1);
    }

    update ()
    {
        this.image1.rotation += 0.01;
        this.image2.rotation += 0.01;
        this.image3.rotation += 0.01;
        this.image4.rotation += 0.01;
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Что такое точка привязки (origin)?

Точка привязки, или origin, — это точка внутри спрайта, относительно которой происходят все его трансформации: вращение, масштабирование и позиционирование. Её координаты задаются не в пикселях, а в нормализованных значениях от 0 до 1 относительно размеров текстуры.

* origin (0, 0) — это верхний левый угол спрайта. * origin (0.5, 0.5) — это его центр (значение по умолчанию). * origin (1, 1) — это правый нижний угол.

Установка origin определяет, вокруг какой точки будет вращаться спрайт, и от какого его края отсчитывается позиция `xиy` на сцене.

Создание сцены и загрузка ассетов

В методе preload мы загружаем две текстуры: сетку для визуализации координат и спрайт компьютера Atari. Базовый URL задаётся для удобства.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('grid', 'assets/pics/debug-grid-1920x1920.png');
    this.load.image('atari', 'assets/sprites/atari130xe.png');
}

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

В методе create мы сначала добавляем фоновую сетку с origin в (0,0), чтобы её верхний левый угол совпал с точкой (0,0) мира. Затем создаём четыре одинаковых спрайта atari на одной горизонтальной линии (y=320), но с разными значениями origin. Их позиция `x` указывает, где будет расположена их точка привязки.

create ()
{
    this.add.image(0, 0, 'grid').setOrigin(0);

    this.image1 = this.add.image(200, 320, 'atari'); // default origin is 0.5 = the center
    this.image2 = this.add.image(400, 320, 'atari').setOrigin(0);
    this.image3 = this.add.image(600, 320, 'atari').setOrigin(0.25, 0.75);
    this.image4 = this.add.image(800, 320, 'atari').setOrigin(1);
}

* image1: Точка привязки по умолчанию (0.5). Спрайт будет вращаться вокруг своего центра, расположенного в точке (200, 320). * image2: Точка привязки в левом верхнем углу (0). Спрайт будет вращаться вокруг своего угла, «приколотого» к точке (400, 320). * image3: Пользовательская точка привязки (0.25, 0.75). Вращение будет происходить вокруг точки, расположенной на 25% ширины спрайта слева и 75% его высоты сверху. * image4: Точка привязки в правом нижнем углу (1). Спрайт вращается вокруг этого угла.

Анимация вращения

В методе update, который вызывается каждый кадр, мы увеличиваем угол вращения rotation для каждого спрайта на 0.01 радиана. Это создаёт плавную анимацию непрерывного вращения.

update ()
{
    this.image1.rotation += 0.01;
    this.image2.rotation += 0.01;
    this.image3.rotation += 0.01;
    this.image4.rotation += 0.01;
}

Ключевой момент: все спрайты вращаются с одинаковой скоростью, но из-за разных значений origin их траектории и визуальный эффект совершенно различны. Это наглядно демонстрирует, что rotation всегда выполняется относительно установленной точки origin.

Что попробовать дальше

Точка привязки origin — фундаментальное свойство для контроля над трансформациями в Phaser. Для статичных декораций часто удобен origin (0, 0), для вращающихся объектов — (0.5, 0.5). Экспериментируйте: попробуйте анимировать не только rotation, но и scale, меняя origin во время игры, чтобы создавать сложные эффекты (например, открытие двери на петлях или качание маятника).