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

Отображение текста — базовая задача в любой игре, будь то интерфейс, диалоги или игровые сообщения. Phaser предлагает эффективный способ работы со шрифтами через систему 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');
    }

    create ()
    {
        const dynamic1 = this.add.bitmapText(0, 0, 'desyrel', 'welcome to the jungle\nwe got fun and games');
    }
}

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

const game = new Phaser.Game(config);

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

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

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

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');
}

Метод setBaseURL устанавливает базовый путь для загрузки, что позволяет указывать относительные пути для ресурсов.

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

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

create ()
{
    const dynamic1 = this.add.bitmapText(0, 0, 'desyrel', 'welcome to the jungle\nwe got fun and games');
}

Для разбиения текста на несколько строк используется символ перевода строки \n. Объект dynamic1 автоматически станет дочерним для сцены и будет отрендерен. По умолчанию точка привязки (origin) текста находится в его левом верхнем углу (0, 0).

Настройка отображения и позиционирования

Созданный объект BitmapText наследует свойства от GameObject, что позволяет управлять его позицией, масштабом, видимостью и другими атрибутами. Например, чтобы изменить положение текста после создания, можно напрямую менять его свойства.

// Перемещение текста в центр экрана
dynamic1.x = 400;
dynamic1.y = 300;

// Изменение масштаба
dynamic1.setScale(2);

Кроме того, у BitmapText есть специфические свойства, такие как fontSize, которое определяет размер шрифта в пикселях. Изменение этого свойства не требует перезагрузки шрифта и происходит мгновенно.

// Установка размера шрифта в 24 пикселя
dynamic1.setFontSize(24);

Конфигурация игры

Для запуска примера необходимо создать конфигурационный объект игры и передать его в конструктор Phaser.Game. В конфигурации указывается тип рендерера и класс сцены.

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

const game = new Phaser.Game(config);

Ключ parent должен соответствовать id HTML-элемента на странице, в который будет встроен canvas игры. В данном примере используется рендерер CANVAS, но также доступен WEBGL для аппаратного ускорения, если это поддерживается браузером.

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

Использование BitmapText в Phaser — это производительный и гибкий способ добавления текста в вашу игру. Вы можете легко управлять содержимым, позицией и внешним видом текстовых блоков. Для экспериментов попробуйте анимировать текст, изменяя его свойства в методе update, или создайте систему диалогов, динамически подставляя строки с помощью символов \n. Также стоит изучить выравнивание текста с помощью свойства setAlign.