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

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

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

Живой запуск

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

Исходный код


class Demo extends Phaser.Scene
{
    constructor()
    {
        super();
    }

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

    create ()
    {
        const str = `Daisy was a little cow\nWho hid inside all day\nShe didn't like the rain and mud\nThat made her white coat gray`;

        const b = this.add.bitmapText(0, 0, 'shortStack', str);

        console.log(b.getTextBounds());
    }
}

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

const game = new Phaser.Game(config);

Загрузка bitmap-шрифта

В Phaser для использования нестандартных шрифтов, которые отрисовываются из заранее подготовленного набора изображений символов (спрайтшита), используется система Bitmap Fonts. Загрузка происходит в методе preload сцены.

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

Первая строка устанавливает базовый URL для всех последующих загрузок, что позволяет указывать относительные пути. Ключевой метод this.load.bitmapFont() принимает три аргумента: ключ для дальнейшего обращения к шрифту (в нашем случае 'shortStack'), путь к изображению-спрайтшиту (.png) и путь к файлу с данными о символах (.xml). После выполнения этого кода шрифт будет готов к использованию в сцене.

Создание объекта BitmapText

Создание текстового элемента на основе загруженного bitmap-шрифта происходит в методе create. Это точка инициализации всех игровых объектов сцены.

const str = `Daisy was a little cow\nWho hid inside all day\nShe didn't like the rain and mud\nThat made her white coat gray`;
const b = this.add.bitmapText(0, 0, 'shortStack', str);

Метод this.add.bitmapText() создает и сразу добавляет объект на сцену. Мы передаем начальные координаты X и Y (в данном случае 0, 0), ключ ранее загруженного шрифта ('shortStack') и строку для отображения. Обратите внимание, что в строке используются символы переноса \n, которые BitmapText корректно интерпретирует, переводя текст на новую строку. Объект `b— это экземплярPhaser.GameObjects.BitmapText`, с которым можно далее работать.

Получение границ и размеров текста

После создания текстового объекта часто возникает необходимость узнать его фактические размеры на экране. Это критически важно для центрирования текста или размещения других элементов относительно него. Для этого у объекта BitmapText есть метод getTextBounds().

console.log(b.getTextBounds());

Вызов этого метода возвращает объект global с полями `x,y,widthиheight`. Эти значения представляют собой реальные (глобальные) координаты и габариты отрендеренного текстового блока на игровом холсте. В отличие от простых свойств объекта, эти данные учитывают все факторы: межстрочный интервал, выравнивание и само содержимое строки. Результат выводится в консоль для отладки, но на его основе можно, например, вычислить центр объекта для точного позиционирования.

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

Весь код выполняется в контексте игрового экземпляра Phaser, который создается с определенной конфигурацией.

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    backgroundColor: '#000000',
    scene: Demo
};
const game = new Phaser.Game(config);

Объект config определяет основные параметры игры. type: Phaser.AUTO позволяет движку самому выбрать способ рендеринга (WebGL или Canvas). Параметры width и height задают размеры игрового поля. parent указывает ID HTML-элемента, в который будет встроен игровой холст. backgroundColor устанавливает черный цвет фона. Самое важное — поле scene, которое принимает класс нашей сцены Demo. Финальная строка создает новый экземпляр игры, передавая ему эту конфигурацию, что и запускает весь жизненный цикл.

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

Работа с BitmapText в Phaser — это простой и эффективный способ использовать кастомные шрифты в игре. Ключевой вывод: для точного позиционирования всегда используйте метод getTextBounds(), а не предполагаемые размеры. Для экспериментов попробуйте

  1. изменить координаты (x, y) при создании текста и проверить, как меняются глобальные границы
  2. использовать возвращенные методом width и height для автоматического центрирования текста относительно центра сцены
  3. загрузить другой bitmap-шрифт и сравнить, как меняются размеры при том же тексте