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

Визуальный стиль — ключевой элемент атмосферы игры, особенно в ретро-проектах. Phaser 3 позволяет легко создавать и использовать растровые шрифты (Bitmap Fonts) для отображения текста в пиксельном стиле. Эта статья покажет, как загрузить изображение с символами, конвертировать его в растровый шрифт с помощью `RetroFont` и выводить динамически обновляемый текст на экран. Этот подход незаменим для отображения очков, таймеров, версий игры или любого другого текста, который должен меняться во время выполнения.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
        this.value = 0;
    }

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('knighthawks', 'assets/fonts/retro/knight3.png');
    }

    create ()
    {
        var config = {
            image: 'knighthawks',
            width: 31,
            height: 25,
            chars: Phaser.GameObjects.RetroFont.TEXT_SET6,
            charsPerRow: 10,
            spacing: { x: 1, y: 1 }
        };

        this.cache.bitmapFont.add('knighthawks', Phaser.GameObjects.RetroFont.Parse(this, config));

        this.dynamic = this.add.bitmapText(0, 200, 'knighthawks', 'PHASER 3');

        this.dynamic.setScale(3);
    }

    update ()
    {
        this.dynamic.text = 'PHASER 3\nVER ' + this.value.toFixed(2);
        this.value += 0.01;
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    pixelArt: true,
    scene: Example
};

const game = new Phaser.Game(config);

Подготовка изображения шрифта

Первый шаг — загрузка изображения, содержащего все необходимые символы (спрайтшит шрифта). В примере используется изображение knight3.png из набора ретро-шрифтов Phaser. Важно, чтобы символы на изображении были расположены в сетке и имели одинаковый размер.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('knighthawks', 'assets/fonts/retro/knight3.png');
}

Метод preload загружает изображение и присваивает ему ключ 'knighthawks'. setBaseURL устанавливает базовый URL для упрощения пути к ресурсам.

Создание конфигурации и парсинг шрифта

После загрузки изображения необходимо описать структуру шрифта в конфигурационном объекте и создать из него растровый шрифт с помощью статического метода Phaser.GameObjects.RetroFont.Parse.

var config = {
    image: 'knighthawks', // Ключ загруженного изображения
    width: 31,   // Ширина одного символа в пикселях
    height: 25,  // Высота одного символа в пикселях
    chars: Phaser.GameObjects.RetroFont.TEXT_SET6, // Набор символов
    charsPerRow: 10, // Количество символов в одной строке изображения
    spacing: { x: 1, y: 1 } // Отступы между символами на изображении
};

this.cache.bitmapFont.add('knighthawks', Phaser.GameObjects.RetroFont.Parse(this, config));

Конфиг точно описывает расположение символов на изображении. TEXT_SET6 — это одна из предустановленных строк, содержащая набор символов (например, буквы, цифры, знаки препинания). Метод Parse анализирует изображение на основе конфигурации и создаёт данные шрифта, которые затем сохраняются в кеш bitmapFont под тем же ключом 'knighthawks'. Теперь этот ключ можно использовать для создания текстовых объектов.

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

Объект растрового текста создаётся с помощью this.add.bitmapText. Ему передаются начальные координаты, ключ шрифта из кеша и начальная строка текста.

this.dynamic = this.add.bitmapText(0, 200, 'knighthawks', 'PHASER 3');
this.dynamic.setScale(3);

Созданный объект dynamic является экземпляром BitmapText. Метод setScale(3) увеличивает его размер в три раза, что типично для пиксельной графики, чтобы сохранить чёткость при увеличении. Текст будет отрисован с использованием символов из нашего растрового шрифта.

Динамическое обновление текста

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

update ()
{
    this.dynamic.text = 'PHASER 3\nVER ' + this.value.toFixed(2);
    this.value += 0.01;
}

Здесь формируется строка, состоящая из двух частей: константной 'PHASER 3' и динамической 'VER X.XX', где число увеличивается на 0.01 каждый кадр. \n — символ переноса строки. Свойство text объекта BitmapText можно менять в любой момент — при столкновении, клике или по таймеру.

Конфигурация игры и важность pixelArt

Для корректного отображения пиксельной графики, включая растровые шрифты, в конфиге игры должен быть активирован флаг pixelArt.

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    pixelArt: true, // Ключевая настройка для пиксельной графики
    scene: Example
};

Установка pixelArt: true отключает линейную интерполяцию при масштабировании игровых объектов. Это гарантирует, что каждый пиксель шрифта будет отображаться чётко и без размытия при увеличении с помощью setScale.

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

Использование RetroFont для создания Bitmap Font — это мощный и гибкий способ добавить стилизованный текст в вашу игру на Phaser 3. Вы можете использовать собственные изображения шрифтов, настраивать наборы символов и динамически менять текст без перерисовки текстур. Для экспериментов попробуйте: загрузить своё изображение шрифта и подобрать параметры width, height и charsPerRow; анимировать текст, меняя не только его содержание, но и свойства вроде tint, alpha или angle; использовать разные предустановленные наборы символов (TEXT_SET1-TEXT_SET10) или задать свою строку в параметре chars.