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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    create ()
    {
        this.add.text(10, 10, 'Hello World');
        this.add.text(10, 100, 'Hello World');
        this.add.text(10, 200, 'Hello World');
    }
}

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

let game = new Phaser.Game(config);

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

Основной метод для добавления текста в сцену Phaser — this.add.text(x, y, content). Он создаёт игровой объект (GameObject) типа Text и сразу добавляет его на текущий сцену для отрисовки.

this.add.text(10, 10, 'Hello World');

- `xиy: Координаты левого верхнего угла текста в пикселях относительно начала сцены (точка0, 0` находится в левом верхнем углу игрового окна). - content: Строка с текстом, который будет отображён.

Метод возвращает экземпляр Text, который можно сохранить в переменную для дальнейших манипуляций, например, для изменения его содержимого в процессе игры.

Система координат и позиционирование

В примере три строки текста выводятся на разных вертикальных позициях, но с одинаковым отступом по оси X. Это наглядно демонстрирует работу системы координат.

this.add.text(10, 10, 'Hello World');
this.add.text(10, 100, 'Hello World');
this.add.text(10, 200, 'Hello World');

Первая строка появляется почти у самого края окна (y = 10). Вторая — на 100 пикселей ниже первой, третья — ещё на 100 пикселей ниже второй. Это базовый принцип ручного позиционирования элементов интерфейса: изменяя параметры `xиy`, вы контролируете расположение текста на экране.

**Важно**: Точка привязки (origin) по умолчанию равна (0, 0) — левый верхний угол текстового блока. Это означает, что указанные координаты (x, y) соответствуют именно этой точке.

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

Сам по себе текст не появится. Он должен быть создан внутри метода create сцены (Scene). Этот метод автоматически вызывается движком после инициализации сцены и является основным местом для создания статических игровых объектов.

class Example extends Phaser.Scene
{
    create ()
    {
        // Создание текста происходит здесь
        this.add.text(10, 10, 'Hello World');
    }
}

Чтобы игра запустилась, сцена должна быть передана в конфигурационный объект при создании экземпляра Phaser.Game.

const config = {
    type: Phaser.AUTO, // Автовыбор рендерера (WebGL или Canvas)
    width: 800,
    height: 600,
    backgroundColor: '#000000', // Чёрный фон
    parent: 'phaser-example', // ID HTML-элемента для встраивания
    scene: Example // Наша сцена
};

let game = new Phaser.Game(config);

Ключевые параметры конфига: - width / height: Устанавливают внутреннее разрешение игрового мира. - backgroundColor: Заполняет фон сцены указанным цветом до отрисовки объектов. - scene: Указывает класс сцены, которая будет запущена сразу после инициализации игры.

Следующие шаги: Стилизация и динамика

Метод this.add.text принимает не три, а четыре аргумента. Четвёртый — объект стиля (Phaser.Types.GameObjects.Text.TextStyle), который позволяет полностью изменить внешний вид текста.

this.add.text(400, 300, 'Score: 0', {
    fontSize: '32px',
    fontFamily: 'Arial',
    color: '#ffff00', // Жёлтый цвет
    stroke: '#000000', // Цвет обводки
    strokeThickness: 4 // Толщина обводки
});

Чтобы текст менялся во время игры (например, счёт), нужно сохранить объект в переменную и использовать метод setText.

class GameScene extends Phaser.Scene {
    constructor() {
        super();
        this.score = 0;
    }

    create() {
        // Сохраняем объект текста в свойство сцены
        this.scoreText = this.add.text(10, 10, `Score: ${this.score}`);
    }

    addPoint() {
        this.score += 1;
        // Динамически обновляем отображаемый текст
        this.scoreText.setText(`Score: ${this.score}`);
    }
}

Это основа для создания интерактивных интерфейсов прямо внутри игрового мира.

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

Вывод текста в Phaser с помощью this.add.text — простая, но мощная операция. Вы научились создавать текстовые объекты, позиционировать их на сцене и понимать базовую структуру запуска игры. Отсюда можно двигаться в сторону сложной стилизации, анимации текста или интеграции с системой физики, чтобы надписи могли падать, отскакивать и взаимодействовать с другими объектами. **Идеи для экспериментов:** 1. Создайте счётчик очков, который увеличивается по клику мыши. 2. Используя цикл, выведите столбец из 20 строк текста с разными координатами. 3. Попробуйте изменить точку привязки (origin) текста на (0.5, 0.5) и позиционируйте его по центру экрана (this.scoreText.setOrigin(0.5)).