Phaser.js: всё об играх и разработке

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

Работа с текстом — неотъемлемая часть игровой разработки. Часто простого переноса строки недостаточно: чтобы текст выглядел аккуратно, его нужно правильно выровнять. В Phaser 3 для этого используется свойство `align` в конфигурации текстового объекта. Эта статья на практическом примере покажет, как управлять выравниванием многострочного текста, делая ваши интерфейсы и внутриигровые сообщения более читабельными и визуально приятными.

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

Живой запуск

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

Исходный код

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

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

        //  Align only works with multi-lined text.

        this.add.text(200, 100, 'Case shrugged.\nThe girl to his right giggled and nudged him.', { color: '#00ff00', align: 'left' });
        this.add.text(200, 200, 'Case shrugged.\nThe girl to his right giggled and nudged him.', { color: '#00ff00', align: 'right' });
        this.add.text(200, 300, 'Case shrugged.\nThe girl to his right giggled and nudged him.', { color: '#00ff00', align: 'center' });
    }
}

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

const game = new Phaser.Game(config);

Как работает свойство `align`

В Phaser 3 текстовый объект создается методом this.add.text(). Третьим аргументом в этот метод передается объект стилей. Свойство align внутри этого объекта определяет горизонтальное выравнивание для текста, состоящего из нескольких строк. Важное уточнение: этот параметр работает **только с многострочным текстом**. Если текст однострочный, свойство align не окажет на него видимого эффекта.

В примере используется один и тот же текст с переносом строки (\n), но с разными значениями выравнивания: 'left', 'right' и 'center'. Для наглядности в сцене также рисуется вертикальная линия, которая служит точкой отсчета (осью X = 200).

Разбор примера: от линии до текста

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

Сначала создается графический объект (Graphics) и настраивается стиль линии. Затем рисуется вертикальная линия, которая поможет визуально оценить выравнивание.

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

Далее создаются три текстовых объекта. Их координата X одинакова (200), и они размещаются на разной высоте (Y: 100, 200, 300). Ключевое отличие — значение свойства align в объекте стилей.

// Текст, выровненный по левому краю относительно точки (200, 100)
this.add.text(200, 100, 'Case shrugged.\nThe girl to his right giggled and nudged him.', { color: '#00ff00', align: 'left' });

// Текст, выровненный по правому краю относительно точки (200, 200)
this.add.text(200, 200, 'Case shrugged.\nThe girl to his right giggled and nudged him.', { color: '#00ff00', align: 'right' });

// Текст, выровненный по центру относительно точки (200, 300)
this.add.text(200, 300, 'Case shrugged.\nThe girl to his right giggled and nudged him.', { color: '#00ff00', align: 'center' });

Практика: точка привязки и выравнивание

Понимание взаимосвязи между точкой привязки текста и свойством align критически важно.

* При align: 'left' левый край текстового блока будет находиться в заданной координате X (в нашем случае — на синей линии). * При align: 'right' в заданной координате X окажется правый край текстового блока. * При align: 'center' координата X будет указывать на центр всего блока текста.

Точка привязки (origin) самого игрового объекта по умолчанию равна (0, 0), то есть его левому верхнему углу. Но свойство align работает именно с внутренним содержимым (строками текста) относительно границ этого объекта. Не путайте align с настройкой origin через setOrigin() — это разные механизмы.

Типичные сценарии использования

Где это может пригодиться в реальной игре?

1. **Диалоговые окна:** Выравнивание 'left' или 'center' для реплик персонажей. 2. **Интерфейс:** Выравнивание 'right' для числовых значений (очки, деньги) в таблицах или статистике. 3. **Описания и лоры:** Центрированный текст ('center') для заголовков или эпиграфов. 4. **Меню:** Комбинирование разных типов выравнивания в одном блоке для создания сложных, но аккуратных интерфейсов.

Помните, что для работы align текст должен быть многострочным. Если у вас одна строка, но вы хотите её сдвинуть, используйте setOrigin() или просто меняйте координату X.

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

Свойство align — простой, но мощный инструмент для контроля над версткой текста в Phaser 3. Его правильное использование сразу повышает качество визуального представления любого текста в игре. Для экспериментов попробуйте: 1. Добавить фоновую панель за текстом и посмотреть, как разные типы выравнивания взаимодействуют с её границами. 2. Создать текстовый объект с динамически меняющимся содержимым и переключать align в runtime. 3. Скомбинировать align с другими свойствами стиля, такими как fixedWidth, чтобы создать колонки текста с четкими границами.