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

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

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

Версия 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('desyrel', 'assets/fonts/bitmap/desyrel.png', 'assets/fonts/bitmap/desyrel.xml');
        this.load.bitmapFont('atari', 'assets/fonts/bitmap/atari-smooth.png', 'assets/fonts/bitmap/atari-smooth.xml');
        this.load.bitmapFont('ice', 'assets/fonts/bitmap/iceicebaby.png', 'assets/fonts/bitmap/iceicebaby.xml');
        this.load.bitmapFont('gothic', 'assets/fonts/bitmap/gothic.png', 'assets/fonts/bitmap/gothic.xml');
        this.load.bitmapFont('hyper', 'assets/fonts/bitmap/hyperdrive.png', 'assets/fonts/bitmap/hyperdrive.xml');
    }

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

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

        const fonts = [ 'atari', 'desyrel', 'ice', 'gothic', 'hyper' ];
        let currentFont = 0;

        this.input.on(Phaser.Input.Events.POINTER_DOWN, function () {
            currentFont++;
            text.setFont(fonts[currentFont % fonts.length]);
        }, this);
    }
}

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

const game = new Phaser.Game(config);

Загрузка растровых шрифтов

Перед использованием BitmapText необходимо загрузить файлы шрифтов. Каждый растровый шрифт состоит из двух файлов: изображения (PNG) с глифами и файла данных (XML), описывающего положение каждого символа на этом изображении.

В методе preload мы используем this.load.bitmapFont() для загрузки пяти различных шрифтов. Первый аргумент — это ключ (key), по которому мы будем обращаться к шрифту в коде. Второй и третий аргументы — пути к изображению и файлу данных соответственно.

this.load.bitmapFont('desyrel', 'assets/fonts/bitmap/desyrel.png', 'assets/fonts/bitmap/desyrel.xml');
this.load.bitmapFont('atari', 'assets/fonts/bitmap/atari-smooth.png', 'assets/fonts/bitmap/atari-smooth.xml');
// ... и так для шрифтов 'ice', 'gothic', 'hyper'

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

В методе create мы создаем основной объект текста. Функция this.add.bitmapText() принимает координаты X, Y, ключ начального шрифта, сам текст и размер.

Сразу после создания мы настраиваем объект: делаем его интерактивным с помощью setInteractive(), устанавливаем точку отсчета (origin) в центр для вращения и масштабирования, а также выравнивание текста по центру.

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

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

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

Логика смены шрифта по клику

Для реализации смены шрифта нам нужен список доступных ключей и индекс текущего шрифта. Мы создаем массив fonts и переменную currentFont для отслеживания состояния.

const fonts = [ 'atari', 'desyrel', 'ice', 'gothic', 'hyper' ];
let currentFont = 0;

Далее мы назначаем обработчик события клика (POINTER_DOWN) на игровом инпуте. Внутри обработчика мы увеличиваем индекс currentFont и с помощью метода setFont() меняем шрифт у нашего текстового объекта. Использование операции остатка от деления (`%`) обеспечивает циклическое переключение по массиву.

this.input.on(Phaser.Input.Events.POINTER_DOWN, function () {
    currentFont++;
    text.setFont(fonts[currentFont % fonts.length]);
}, this);

Важно передать контекст this третьим аргументом в on(), чтобы внутри функции-обработчика сохранилась ссылка на сцену, если она потребуется.

Конфигурация и запуск игры

Сцена готова, осталось создать экземпляр игры. В объекте конфигурации мы указываем базовые настройки: тип рендерера (Phaser.AUTO), родительский HTML-элемент, размеры холста и класс нашей сцены.

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

const game = new Phaser.Game(config);

После создания объекта Phaser.Game с этой конфигурацией автоматически запускается жизненный цикл сцены: preload, create, а затем update.

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

Динамическая смена шрифтов BitmapText — простой, но мощный прием для повышения интерактивности вашей игры. Метод setFont() мгновенно обновляет внешний вид текста без пересоздания объекта. Для экспериментов попробуйте: 1. Привязать смену шрифта не к клику, а к таймеру для создания анимации. 2. Изменять не только шрифт, но и размер, цвет или положение текста в обработчике события. 3. Загружать и использовать собственные растровые шрифты, созданные в сторонних редакторах.