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

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

Текст в играх редко бывает статичным. Названия уровней, счёт, диалоги, подсказки — всё это должно меняться в реальном времени в ответ на действия игрока. Умение динамически обновлять текстовые объекты — базовый, но критически важный навык для создания живой и отзывчивой игровой среды. В этой статье мы разберём, как создать текстовый объект в Phaser 3 и изменить его содержимое после события (например, клика мыши). Вы научитесь использовать прямое присваивание и метод для обновления текста, что позволит вам легко реализовывать счётчики, обновляемые интерфейсы и интерактивные надписи.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const title = this.add.text(100, 200, 'Static Text Object', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' });

        this.input.once('pointerdown', () =>
        {

            //  You can set the text proprety directly like this:
            title.text = 'Hello world';

            //  Or use the setText method if you need method chaining:
            title.setText('Hello world');

        });
    }
}

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

const game = new Phaser.Game(config);

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

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

Метод принимает несколько ключевых аргументов: - Координаты X и Y для позиционирования текста. - Строка с начальным текстом. - Объект стиля, определяющий шрифт, размер и цвет.

const title = this.add.text(100, 200, 'Static Text Object', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' });

В данном примере создаётся зелёная надпись "Static Text Object" шрифтом Arial размером 64 пикселя. Объект сохраняется в константу title для последующего доступа. Это наша отправная точка — статический текст, готовый к изменению.

Ожидание события для изменения

Чтобы текст изменился в ответ на действие игрока, нам нужно подписаться на событие. В Phaser система событий ввода управляется через this.input. Мы используем метод once(), который сработает один раз при первом нажатии указателем (мышь или касание).

this.input.once('pointerdown', () => {
    // Код для изменения текста будет здесь
});

Обратите внимание на использование once вместо on. Это гарантирует, что обработчик выполнится лишь один раз. Переданная стрелочная функция — это колбэк, который выполнится в момент события pointerdown. Всю логику по изменению текста мы размещаем внутри этого колбэка.

Способ 1: Прямое присваивание свойства `text`

Самый простой и прямой способ изменить текст — присвоить новое строковое значение свойству .text нашего объекта. Это похоже на изменение любого другого свойства переменной в JavaScript.

title.text = 'Hello world';

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

Способ 2: Использование метода `setText()`

Альтернативный и более функциональный способ — вызов метода setText() у текстового объекта. Этот метод также принимает новую строку в качестве аргумента.

title.setText('Hello world');

Ключевое преимущество этого метода в том, что он возвращает ссылку на сам текстовый объект. Это позволяет использовать цепочку вызовов (method chaining), что удобно для конфигурации объекта "в одну строку". Например, после изменения текста можно сразу изменить его цвет или положение.

title.setText('Hello world').setTint(0xff0000).setX(400);

Используйте setText(), когда планируете выполнить несколько операций над объектом подряд, или для единообразия кода, если вы часто применяете другие методы set....

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

Весь наш рабочий код находится внутри пользовательского класса сцены Example. Чтобы игра заработала, эту сцену нужно передать в конфигурацию движка Phaser.Game.

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

const game = new Phaser.Game(config);

Объект config определяет основные параметры: type рендерера, размеры холста, ID родительского HTML-элемента и, что самое важное, класс основной сцены. Создание экземпляра new Phaser.Game(config) инициализирует движок и запускает нашу сцену, после чего становится возможным ввод с мыши и отрисовка текста.

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

Вы освоили два основных способа динамического обновления текста в Phaser 3. Прямое присваивание свойства — для простоты, метод setText() — для гибкости и цепочек вызовов. Этот механизм лежит в основе большинства динамических элементов интерфейса. Для экспериментов попробуйте: изменить текст не по клику, а по таймеру this.time.addEvent; создать счётчик очков, который увеличивается при клике и обновляется через setText; или использовать разные события ввода, например pointerup или keydown. Это отличный фундамент для создания интерактивных игровых HUD и диалоговых систем.