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

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

Работа с текстом — важная часть игрового интерфейса. Phaser 3 предлагает BitmapText — быстрый и гибкий способ отображения текста, особенно для игр. В отличие от обычного текста, BitmapText использует заранее подготовленное растровое изображение символов (bitmap font), что обеспечивает точный пиксельный контроль и высокую производительность. В этой статье мы разберем, как можно динамически менять размер такого текста во время выполнения игры. Этот прием полезен для создания анимированных интерфейсов, визуальных эффектов или интерактивных элементов, реагирующих на действия игрока.

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

Живой запуск

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

Исходный код

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

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.bitmapFont('atari', 'assets/fonts/bitmap/gem.png', 'assets/fonts/bitmap/gem.xml');
    }

    create ()
    {
        const text = this.add.bitmapText(400, 300, 'atari', '', 16)
            .setOrigin(0.5)
            .setCenterAlign()
            .setInteractive();

        text.setText([
            'Phaser 3',
            'BitmapText',
            'Click to change size'
        ]);

        this.input.on('pointerup', function () {

            text.setFontSize(text.fontSize + 2);
            text.setOrigin(0.5);

        });
    }
}

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

const game = new Phaser.Game(config);

Загрузка bitmap-шрифта

Перед использованием BitmapText необходимо загрузить bitmap-шрифт. Он состоит из двух файлов: изображения (.png) со всеми символами и файла описания (.xml или .fnt), который содержит данные о расположении каждого символа на изображении.

В методе preload мы загружаем шрифт с ключом 'atari'. Метод this.load.bitmapFont принимает три аргумента: ключ для последующего обращения, путь к изображению и путь к файлу описания.

this.load.bitmapFont('atari', 'assets/fonts/bitmap/gem.png', 'assets/fonts/bitmap/gem.xml');

Создание и настройка текста

В методе create мы создаем объект BitmapText. Метод this.add.bitmapText принимает несколько аргументов: координаты X и Y, ключ загруженного шрифта, начальный текст и исходный размер шрифта.

Сразу после создания мы настраиваем объект цепочкой методов: - setOrigin(0.5) устанавливает точку привязки (anchor) в центр текста. Это важно для корректного масштабирования и выравнивания. - setCenterAlign() выравнивает текст по центру относительно точки привязки. - setInteractive() делает текстовый объект интерактивным, чтобы он мог реагировать на события ввода, такие как клик.

Затем мы устанавливаем многострочный текст с помощью метода setText.

const text = this.add.bitmapText(400, 300, 'atari', '', 16)
    .setOrigin(0.5)
    .setCenterAlign()
    .setInteractive();

text.setText([
    'Phaser 3',
    'BitmapText',
    'Click to change size'
]);

Обработка клика и изменение размера

Мы добавляем обработчик события клика (или касания) на всю сцену с помощью this.input.on('pointerup', ...). Когда игрок кликает по любому месту на сцене, выполняется переданная функция.

Внутри этой функции мы вызываем метод text.setFontSize(), который увеличивает текущий размер шрифта на 2 пикселя. Мы получаем текущее значение через свойство объекта text.fontSize. После изменения размера мы заново устанавливаем точку привязки в центр с помощью setOrigin(0.5). Это необходимо, потому что при изменении размера геометрия объекта меняется, и точка привязки может "съехать", что приведет к смещению текста.

this.input.on('pointerup', function () {
    text.setFontSize(text.fontSize + 2);
    text.setOrigin(0.5);
});

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

Динамическое изменение размера BitmapText — простой, но мощный инструмент для создания живой обратной связи в игре. Вы можете привязать это изменение не только к клику, но и к другим событиям: сбору бонуса, получению урона, наведению курсора. Поэкспериментируйте, меняя размер не на фиксированное значение, а по сложной формуле, добавляя плавную анимацию через tweens или меняя цвет текста одновременно с размером для усиления эффекта.