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

Визуальный интерфейс игры — это не только графика, но и текст. Его правильное позиционирование критично для читаемости и общего впечатления. В этом примере мы рассмотрим базовый, но часто упускаемый из виду приём: как быстро и правильно выровнять однострочный текст по правому краю от заданной точки, используя свойство `origin`. Это особенно полезно для интерфейсов, субтитров или любого текста, который должен быть привязан к определённому краю элемента интерфейса.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics();

        graphics.lineStyle(1, 0xffffff, 1);
        graphics.lineBetween(400, 0, 400, 600);

        this.add.text(400, 200, 'His ugliness was the stuff of legend.', { color: '#00ff00' });

        //  To right-align a _single_ line of text, use the origin:
        this.add.text(400, 400, 'His ugliness was the stuff of legend.', { color: '#00ff00' }).setOrigin(1, 0);
    }
}

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

const game = new Phaser.Game(config);

Разбор сцены и базовой разметки

Код создаёт простую сцену с двумя строками текста и вертикальной разделительной линией. Эта линия служит визуальным ориентиром — осью, относительно которой мы будем выравнивать текст.

const graphics = this.add.graphics();
graphics.lineStyle(1, 0xffffff, 1);
graphics.lineBetween(400, 0, 400, 600);

Сначала создаётся объект Graphics. Метод lineStyle задаёт стиль линии: толщина 1 пиксель, белый цвет (0xffffff) и полная непрозрачность. Метод lineBetween рисует линию от точки (400, 0) до точки (400, 600) — это вертикаль по центру экрана (поскольку ширина canvas равна 800).

Стандартное добавление текста

Первая строка текста добавляется классическим способом. Метод this.add.text принимает координаты X и Y, строку с текстом и объект стиля.

this.add.text(400, 200, 'His ugliness was the stuff of legend.', { color: '#00ff00' });

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

Магия метода setOrigin

Вторая строка демонстрирует правильный способ выравнивания по правому краю. После создания текстового объекта мы сразу же вызываем метод .setOrigin().

this.add.text(400, 400, 'His ugliness was the stuff of legend.', { color: '#00ff00' }).setOrigin(1, 0);

Метод setOrigin(x, y) задаёт точку привязки (origin) игрового объекта. Параметры `xиy` — это нормализованные значения от 0 до 1 относительно размеров самого объекта. - x = 0 — левый край объекта. - x = 1 — правый край объекта. - y = 0 — верхний край объекта. - y = 1 — нижний край объекта. Таким образом, setOrigin(1, 0) означает, что точкой привязки становится правый верхний угол текстового блока. Теперь, когда мы задали координаты (400, 400), именно правый верхний угол текста будет находиться в этой точке. Весь текст будет «расти» влево от центральной линии, создавая эффект выравнивания по правому краю.

Конфигурация игры и итог

Остальная часть кода — стандартная конфигурация игры Phaser.

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example
};
const game = new Phaser.Game(config);

Запустив этот пример, вы увидите две зелёные строки. Первая начинается на центральной линии, вторая — заканчивается на ней. Это наглядная демонстрация того, как изменение origin влияет на позиционирование объекта относительно переданных в add.text координат.

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

Использование setOrigin — это ключевой и эффективный способ точного позиционирования не только текста, но и любых игровых объектов (спрайтов, изображений) в Phaser 3. Для экспериментов попробуйте: 1. Изменить второй параметр `yвsetOrigin(1, 0.5)`, чтобы выровнять текст по правому краю, но по вертикальному центру. 2. Применить этот принцип к спрайту, чтобы вращать его вокруг центра, задав setOrigin(0.5, 0.5). 3. Создать элемент интерфейса (например, полосу здоровья), где правый край текста с числом всегда привязан к левому краю шкалы.