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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const content = [
            'The sky above the port was the color of television, tuned to a dead channel.',
            '`It\'s not like I\'m using,\' Case heard someone say, as he shouldered his way ',
            'through the crowd around the door of the Chat. `It\'s like my body\'s developed',
            'this massive drug deficiency.\' It was a Sprawl voice and a Sprawl joke.',
            'The Chatsubo was a bar for professional expatriates; you could drink there for',
            'a week and never hear two words in Japanese.',
            '',
            'Ratz was tending bar, his prosthetic arm jerking monotonously as he filled a tray',
            'of glasses with draft Kirin. He saw Case and smiled, his teeth a webwork of',
            'East European steel and brown decay. Case found a place at the bar, between the',
            'unlikely tan on one of Lonny Zone\'s whores and the crisp naval uniform of a tall',
            'African whose cheekbones were ridged with precise rows of tribal scars. `Wage was',
            'in here early, with two joeboys,\' Ratz said, shoving a draft across the bar with',
            'his good hand. `Maybe some business with you, Case?\'',
            '',
            'Case shrugged. The girl to his right giggled and nudged him.',
            'The bartender\'s smile widened. His ugliness was the stuff of legend. In an age of',
            'affordable beauty, there was something heraldic about his lack of it. The antique',
            'arm whined as he reached for another mug.',
            '',
            '',
            'From Neuromancer by William Gibson'
        ];

        this.add.text(100, 100, content, { fontFamily: 'Arial', color: '#00ff00', align: 'right' });
    }
}

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

const game = new Phaser.Game(config);

Подготовка сцены и данных

Вся логика примера сосредоточена в методе create() класса сцены, который выполняется один раз при ее создании. Первым делом мы подготавливаем контент для отображения.

Текст хранится в виде массива строк content. Каждый элемент этого массива становится новой строкой в итоговом текстовом блоке. Пустые строки (как '') создают вертикальные отступы между абзацами, что улучшает читаемость.

Создание текстового объекта

Основная работа выполняется одним вызовом метода this.add.text(). Этот метод создает игровой объект типа Text и добавляет его на сцену.

this.add.text(100, 100, content, { fontFamily: 'Arial', color: '#00ff00', align: 'right' });

Рассмотрим его параметры:

* **100, 100**: Координаты X и Y для позиционирования текста на сцене. Точка привязки (origin) текстового объекта по умолчанию находится в его левом верхнем углу. * **content**: Массив строк, который мы подготовили ранее. Phaser автоматически соединит их, вставляя символ переноса строки между элементами. * **Объект стиля**: Третий параметр — объект конфигурации, определяющий внешний вид текста.

Настройка стиля и выравнивания

Объект стиля в нашем примере содержит три ключевых свойства:

{ fontFamily: 'Arial', color: '#00ff00', align: 'right' }

* fontFamily: Задает гарнитуру шрифта. Убедитесь, что шрифт 'Arial' доступен в системе или загружен в игру. * color: Определяет цвет текста в HEX-формате (#00ff00 — ярко-зеленый). * align: Самый важный для этого примера параметр. Установка значения 'right' заставляет каждую строку текста выравниваться по правому краю относительно начальной точки координат X (100). Phaser также поддерживает значения 'left' (по умолчанию) и 'center'.

Важно отметить, что выравнивание align работает именно с *отрисовкой* текста, а не меняет его точку привязки (origin). Текст будет "расти" влево от точки (100, 100).

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

Использование массива строк и объекта стиля — эффективный способ управления сложным многострочным текстом в Phaser. Этот подход идеален для статических текстовых блоков, таких как вступительные заставки, цитаты или описания в журнале заданий. **Идеи для экспериментов**: Попробуйте изменить параметр align на 'center' или 'left'. Поэкспериментируйте с другими свойствами стиля, например, fontSize, backgroundColor или padding. Для динамического текста (например, диалога, который появляется по частям) можно использовать метод setText() объекта Text, передавая ему новый массив строк.