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

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

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

Версия 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('lato', 'assets/fonts/bitmap/lato_0.png', 'assets/fonts/bitmap/lato.xml');
    }

    create ()
    {
        const t1 = this.add.bitmapText(0, 0, 'desyrel', 'The desyrel font');
        const t2 = this.add.bitmapText(0, 100, 'lato', 'The lato font');

        console.log(t1);
        console.log(t2);
    }
}

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

const game = new Phaser.Game(config);

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

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

this.load.bitmapFont('desyrel', 'assets/fonts/bitmap/desyrel.png', 'assets/fonts/bitmap/desyrel.xml');
this.load.bitmapFont('lato', 'assets/fonts/bitmap/lato_0.png', 'assets/fonts/bitmap/lato.xml');

Первый параметр — ключ 'desyrel' или 'lato'. Он будет использоваться для создания текста. Второй и третий параметры — пути к файлам. Phaser загрузит изображение и данные, чтобы знать, как "вырезать" каждый символ из общего атласа.

Создание bitmap текста

После загрузки шрифты можно использовать. В методе create создаются два текстовых объекта с помощью this.add.bitmapText.

const t1 = this.add.bitmapText(0, 0, 'desyrel', 'The desyrel font');
const t2 = this.add.bitmapText(0, 100, 'lato', 'The lato font');

Параметры метода: координаты X и Y (начальная точка текста), ключ загруженного шрифта ('desyrel' или 'lato') и сам текст для отображения. Объекты t1 и t2 — это экземпляры Phaser.GameObjects.BitmapText, которые можно далее трансформировать (двигать, масштабировать).

Конфигурация игры и вывод в консоль

Конфигурация игры стандартная, используется Phaser.CANVAS рендерер. В примере также есть вывод созданных объектов в консоль для изучения их структуры.

console.log(t1);
console.log(t2);

Это полезно для разработчика, чтобы проверить свойства объектов (например, width, height, font) или убедиться, что шрифты загрузились корректно.

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

const game = new Phaser.Game(config);

Конфиг задает базовые параметры игры: тип рендеринга, родительский DOM-элемент, размеры и основной класс сцены.

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

Bitmap text в Phaser — это простой и эффективный инструмент для работы со стилизованным текстом. Вы можете экспериментировать: изменять положение текста динамически, применять трансформации (scale, rotation), использовать разные шрифты для разных элементов интерфейса или создать эффекты переключения шрифтов в зависимости от состояния игры.