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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        //  Default text with no style settings
        this.add.text(100, 100, 'Phaser');

        //  Pass in a basic style object with the constructor
        this.add.text(100, 200, 'Phaser', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' });

        //  Or chain calls like this:
        this.add.text(100, 400, 'Phaser').setFontFamily('Arial').setFontSize(64).setColor('#ffff00');
    }
}

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

const game = new Phaser.Game(config);

Базовый текст: минимальная конфигурация

Самый простой способ добавить текст на сцену — использовать метод this.add.text(x, y, text). Этот метод создаёт игровой объект (Game Object) типа Text и сразу добавляет его на текущую сцену.

Метод принимает три обязательных аргумента: - `x`: Координата по горизонтали (в пикселях) для отрисовки текста. - `y`: Координата по вертикали (в пикселях). - text: Строка, которая будет отображена.

При таком вызове Phaser использует все стили по умолчанию: стандартный системный шрифт, чёрный цвет и размер 16px.

this.add.text(100, 100, 'Phaser');

Эта строка кода выведет на экран слово "Phaser" чёрным цветом, начиная с координат (100, 100). Это отправная точка для любого текстового элемента.

Стилизация через объект конфигурации

Чаще всего вы захотите сразу задать тексту определённый внешний вид. Для этого третьим аргументом в this.add.text() можно передать объект со стилями.

В этом объекте вы можете определить такие свойства, как семейство шрифтов (fontFamily), размер (fontSize) и цвет (color). Цвет задаётся в виде строки — это может быть HEX-код (как в примере), название цвета (например, 'red') или RGB-значение.

this.add.text(100, 200, 'Phaser', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' });

Этот код создаст текст "Phaser" зелёного цвета (#00ff00), используя шрифт Arial размером 64 пикселя. Этот подход удобен, когда все необходимые стили известны в момент создания объекта, так как позволяет задать их одним действием.

Динамическая настройка через цепочку методов

Phaser предоставляет мощный API для изменения свойств объектов после их создания. Большинство методов-сеттеров (setter) возвращают ссылку на сам объект, что позволяет объединять вызовы в цепочку (chaining).

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

this.add.text(100, 400, 'Phaser').setFontFamily('Arial').setFontSize(64).setColor('#ffff00');

В этом примере мы: 1. Создаём базовый текстовый объект в точке (100, 400). 2. Сразу же вызываем метод .setFontFamily('Arial'), чтобы установить шрифт. 3. Затем метод .setFontSize(64) задаёт размер. 4. И, наконец, .setColor('#ffff00') меняет цвет на жёлтый.

Такой подход делает код более декларативным и читаемым, а также даёт гибкость в управлении объектами.

Структура сцены и конфигурация игры

Весь код по работе с объектами, включая текст, должен находиться внутри методов сцены Phaser. В данном примере вся логика размещена в методе create(), который вызывается один раз при создании сцены и служит для инициализации игровых объектов.

Класс сцены Example расширяет базовый класс Phaser.Scene. Конфигурация самого игрового экземпляра (Phaser.Game) задаётся отдельным объектом config.

class Example extends Phaser.Scene
{
    create ()
    {
        // Код создания текста находится здесь
    }
}

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

const game = new Phaser.Game(config);

Ключевые параметры конфигурации: - type: Рендерер (WebGL или Canvas). Phaser.AUTO позволяет Phaser выбрать лучший из доступных. - width / height: Размер игрового холста. - parent: ID HTML-элемента, в который будет встроен canvas. - scene: Класс главной сцены, которая будет запущена сразу.

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

Вы освоили три ключевых паттерна работы с текстом в Phaser 3: создание с настройками по умолчанию, инициализация со стилями и динамическое изменение через методы. Эти знания — основа для построения любого интерфейса в вашей игре. Для экспериментов попробуйте: 1. Использовать разные форматы цвета: например, 'rgb(255, 0, 128)' или просто 'red'. 2. Комбинировать подходы: создать текст с базовыми стилями в объекте конфигурации, а затем изменить один параметр, например, цвет, с помощью .setColor() уже в игровом цикле update(). 3. Поэкспериментировать с другими свойствами текста, доступными в API Phaser, такими как setStroke (обводка) или setShadow (тень).