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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    i = 0;
    text;

    create ()
    {
        const graphics = this.add.graphics();

        this.text = this.add.text(400, 300, 'Phaser 3 - 0', { fontFamily: 'Arial', fontSize: 64, color: '#ffff00' });

        this.text.setOrigin(0.5);

        //  Draw grid lines

        graphics.lineStyle(2, 0x00ff00, 0.5);

        graphics.beginPath();

        graphics.moveTo(400, 0);
        graphics.lineTo(400, 600);

        graphics.moveTo(0, 300);
        graphics.lineTo(800, 300);

        graphics.strokePath();

        graphics.closePath();
    }

    update ()
    {
        this.i++;
        this.text.setText(`Phaser 3 - ${this.i.toString()}`);
        this.text.rotation += 0.01;
    }
}

const config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example
};

const game = new Phaser.Game(config);

Понимание системы координат и точки привязки (origin)

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

По умолчанию для объекта Text эта точка установлена в координатах (0, 0), что соответствует его левому верхнему углу. Это значит, что если вы зададите позицию текста как (400, 300) и начнёте его вращать, он будет крутиться вокруг своего верхнего левого угла, находящегося в этой точке.

Для наглядности в примере на сцене рисуется перекрестие из зелёных линий, которое показывает центр игрового поля (координаты x=400, y=300). Изначально текст без изменения origin был бы выровнен своим левым верхним углом по этому центру.

Метод setOrigin: меняем точку вращения

Ключевой метод для решения задачи — setOrigin(x, y). Он устанавливает новую точку привязки объекта. Значения `xиy` задаются в диапазоне от 0 до 1, где (0, 0) — левый верхний угол, (1, 1) — правый нижний, а (0.5, 0.5) — центр объекта.

В нашем примере, чтобы текст вращался вокруг своего центра, точка привязки устанавливается в (0.5, 0.5). После этого позиция текста (400, 300) будет указывать уже на его центр, а не на угол.

this.text.setOrigin(0.5);

Эта одна строка кода кардинально меняет поведение объекта. Теперь, когда в методе update() мы увеличиваем свойство rotation, текст будет плавно вращаться вокруг своей центральной оси, которая совпадает с центром экрана, отмеченным перекрестием.

Анализ кода: создание сцены и анимация

Давайте подробно пройдёмся по основным частям кода примера.

В методе create() создаётся объект Text. Его изначальная позиция (400, 300) и строка 'Phaser 3 - 0'.

this.text = this.add.text(400, 300, 'Phaser 3 - 0', { fontFamily: 'Arial', fontSize: 64, color: '#ffff00' });

Затем, как мы уже знаем, точка привязки устанавливается в центр.

this.text.setOrigin(0.5);

Далее, с помощью Graphics, рисуются вспомогательные линии, чтобы визуализировать центр сцены.

Сердце анимации находится в методе update(), который вызывается на каждом кадре игры. Здесь происходит две вещи: обновление текстовой строки и вращение объекта.

update ()
{
    this.i++;
    this.text.setText(`Phaser 3 - ${this.i.toString()}`);
    this.text.rotation += 0.01;
}

Счётчик `iувеличивается, и новое значение подставляется в текст с помощью методаsetText(). Одновременно к свойствуrotationприбавляется небольшое значение (0.01 радиана за кадр), что создаёт эффект плавного непрерывного вращения. БлагодаряsetOrigin(0.5)` это вращение выглядит естественно и ожидаемо.

Конфигурация игры и запуск

Код завершается стандартной для Phaser 3 конфигурацией игры и её инстанцированием. Обратите внимание, что в конфиге указан Phaser.WEBGL для рендеринга.

const config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example
};

const game = new Phaser.Game(config);

Ключевой параметр здесь — scene: Example. Он сообщает движку, что начальной сценой для этой игры должен быть экземпляр нашего класса Example. После создания объекта game Phaser автоматически вызывает методы create(), а затем в игровом цикле — update().

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

Метод setOrigin() — это простой, но мощный инструмент для контроля над трансформациями игровых объектов. Вращение текста вокруг его центра — лишь один из примеров. Попробуйте поэкспериментировать: установите setOrigin(1, 0) для вращения вокруг правого верхнего угла или setOrigin(0, 1) для вращения вокруг левого нижнего. Примените этот же принцип к спрайтам и другим объектам, комбинируя вращение с масштабированием (scaleX, scaleY) — вы получите полный контроль над визуальным представлением элементов вашей игры.