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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const t = this.add.text(100, 100, 'Phaser');

        console.log(t);
    }
}

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

const game = new Phaser.Game(config);

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

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

const t = this.add.text(100, 100, 'Phaser');

В этом вызове: * Первый аргумент (100) — это координата X (в пикселях) для позиционирования текста относительно левого края сцены. * Второй аргумент (100) — это координата Y (в пикселях) для позиционирования относительно верхнего края сцены. * Третий аргумент ('Phaser') — сама текстовая строка, которая будет отображена. Это обязательный параметр.

Объект `t, возвращаемый методом, является экземпляромPhaser.GameObjects.Text` и содержит все свойства и методы для управления внешним видом и поведением этого текста (шрифт, цвет, выравнивание и т.д.).

Понимание структуры объекта Text

После создания объекта полезно заглянуть внутрь, чтобы понять, с чем вы работаете. Для этого в примере используется console.log().

console.log(t);

Вывод этой команды в консоль браузера (F12) раскроет полную иерархию свойств созданного текстового объекта. Вы увидите: * **Свойства трансформации:** `x,y,scaleX,scaleY,angle` — отвечают за положение и отображение на сцене. * **Стиль текста:** style — вложенный объект, содержащий fontFamily, fontSize, color, backgroundColor и многие другие параметры оформления. * **Свойства origin:** originX, originY — определяют точку привязки (якорь) объекта, вокруг которой происходят вращение и масштабирование. По умолчанию это (0, 0) — левый верхний угол. * **Прочие флаги и состояния:** visible, active, scrollFactor и другие.

Изучение этого вывода — лучший способ узнать, какие свойства доступны для изменения в следующих шагах разработки.

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

Код примера работает в рамках стандартной конфигурации Phaser. Ключевой момент — регистрация вашего класса сцены в конфиге игры.

const config = {
    type: Phaser.CANVAS,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    scene: Example // Наш класс сцены, содержащий create()
};

const game = new Phaser.Game(config);

* type: Указывает рендерер. Phaser.CANVAS использует Canvas API, Phaser.WEBGL — более производительный WebGL. * width / height: Задают размер игрового поля (viewport). * parent: ID HTML-элемента, в который будет встроен canvas игры. Если элемента с таким ID нет, он будет создан автоматически. * scene: Здесь передаётся класс нашей сцены Example. Именно в его методе create() и выполняется код по созданию текста. Phaser сам создаст экземпляр этого класса и вызовет его методы жизненного цикла (preload, create, update).

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

Вы освоили фундаментальную операцию — создание текстового объекта в Phaser 3. Теперь у вас есть точка входа для отображения любой текстовой информации в игре. Для экспериментов попробуйте изменить координаты `xиyпри создании текста, чтобы переместить его в другой угол экрана. Используйте данные изconsole.log(t), чтобы найти свойствоt.text` и динамически менять содержимое надписи уже после её создания, например, по нажатию клавиши.