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

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

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('ice', 'assets/fonts/bitmap/iceicebaby.png', 'assets/fonts/bitmap/iceicebaby.xml');
    }

    create ()
    {
        let i = 0;
        const films = [ 'Aliens', 'Terminator', 'Star Wars', 'The Thing', 'Red Dawn', 'Commando', 'Terminator 2', 'Robocop', 'Batman', 'Street Fighter', 'Back to the Future' ];

        const text = this.add.bitmapText(400, 300, 'ice', films[i], 96).setOrigin(0.5);

        this.tweens.add({
            targets: text,
            duration: 2000,
            angle: 360,
            ease: 'Quad.easeInOut',
            repeat: -1,
            yoyo: true
        });

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

            i++;

            if (i === films.length)
            {
                i = 0;
            }

            text.setText(films[i]);

        });
    }
}

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

const game = new Phaser.Game(config);

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

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

В методе preload мы используем this.load.bitmapFont. Первый аргумент — это ключ ('ice'), по которому мы будем обращаться к шрифту в коде. Остальные аргументы — пути к файлам. Метод setBaseURL задаёт базовый URL, чтобы не писать полные пути к ресурсам.

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

Создание и анимация текста

В методе create мы создаём объект BitmapText. Первые два аргумента — координаты X и Y. Третий аргумент — ключ загруженного шрифта. Четвёртый — начальная строка текста, которую мы берём из массива films. Пятый — размер шрифта. Метод setOrigin(0.5) центрирует точку вращения текста.

Затем мы создаём анимацию (твин) с помощью this.tweens.add. Целью (targets) является наш текстовый объект. Мы задаём анимацию непрерывного вращения на 360 градусов с плавным замедлением и повторением. Параметр yoyo: true заставляет анимацию проигрываться в обратном порядке после завершения, создавая колебательный эффект.

const text = this.add.bitmapText(400, 300, 'ice', films[i], 96).setOrigin(0.5);

this.tweens.add({
    targets: text,
    duration: 2000,
    angle: 360,
    ease: 'Quad.easeInOut',
    repeat: -1,
    yoyo: true
});

Динамическая смена текста по клику

Чтобы сделать текст интерактивным, мы добавляем обработчик события клика (pointerdown) на всю игровую область. При каждом клике увеличивается индекс `i`, который указывает на текущее название фильма в массиве. Если индекс достигает длины массива, он сбрасывается в ноль.

Ключевой метод для обновления содержимого BitmapText — setText(). Мы передаём ему новую строку из массива. Важно: сам объект текста и его анимация (в данном случае вращение) не пересоздаются, а просто обновляется его видимое содержимое. Это эффективно с точки зрения производительности.

this.input.on('pointerdown', function () {
    i++;
    if (i === films.length)
    {
        i = 0;
    }
    text.setText(films[i]);
});

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

Конфигурационный объект config определяет основные параметры игры. Важно указать наш класс сцены (Example) в свойстве scene. Это позволяет Phaser создать экземпляр нашей сцены при запуске.

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

const game = new Phaser.Game(config);

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

Вы узнали, как создать анимированный и интерактивный BitmapText в Phaser 3. Сочетание твинов для плавной анимации и обработки ввода для реакции на действия игрока — мощный паттерн для разработки UI. Для экспериментов попробуйте изменить параметры твина (например, duration или ease), добавить анимацию масштабирования вместе с вращением или менять цвет текста (setTint) при клике.