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

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

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

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

    create ()
    {
        const text = this.add.bitmapText(400, 300, 'atari', '', 40).setOrigin(0.5).setRightAlign();

        text.setText([
            'Atari 520 ST',
            'Atari 1040 STE',
            'Atari Falcon 030',
            'Atari Jaguar',
            'Atari Lynx'
        ]);

        // var graphics = this.add.graphics();

        // graphics.fillStyle(0xff0000, 0.5);

        // var bounds = text.getTextBounds();

        // graphics.fillRect(bounds.global.x, bounds.global.y, bounds.global.width, bounds.global.height);

        // graphics.fillRect(0, 0, bounds.lines.lengths[0], 40);
        // graphics.fillRect(0, 41, bounds.lines.lengths[1], 40);
        // graphics.fillRect(0, 82, bounds.lines.lengths[2], 40);
        // graphics.fillRect(0, 123, bounds.lines.lengths[3], 40);
        // graphics.fillRect(0, 164, bounds.lines.lengths[4], 40);
    }

    update ()
    {

    }
}

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

const game = new Phaser.Game(config);

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

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

Метод load.bitmapFont() принимает три аргумента: ключ для последующего обращения, путь к изображению и путь к файлу данных. В примере загружаются два шрифта, но для отображения используется только один — 'atari'.

this.load.bitmapFont('desyrel', 'assets/fonts/bitmap/desyrel.png', 'assets/fonts/bitmap/desyrel.xml');
this.load.bitmapFont('atari', 'assets/fonts/bitmap/atari-smooth.png', 'assets/fonts/bitmap/atari-smooth.xml');

Создание и настройка BitmapText

Объект BitmapText создается с помощью метода this.add.bitmapText(). Его ключевые параметры — начальные координаты `x,y`, ключ загруженного шрифта, исходный текст и размер.

Однако главная магия происходит в цепочке методов после создания. Сначала текст позиционируется в точке (400, 300) — это условный центр сцены размером 800x600.

const text = this.add.bitmapText(400, 300, 'atari', '', 40).setOrigin(0.5).setRightAlign();

Метод setOrigin(0.5) устанавливает точку привязки (origin) объекта в его геометрический центр. Это означает, что координаты (400, 300) теперь будут указывать на центр текстового блока, а не на его левый верхний угол.

Метод setRightAlign() задает выравнивание текста *внутри* этого блока по правому краю. Важно понимать, что это влияет на расположение строк относительно границ объекта, но не меняет его общую позицию на сцене, которая определена точкой привязки.

Задание многострочного содержимого

Изначально объект создается с пустой строкой. Многострочный текст задается с помощью метода setText(), который может принимать массив строк. Каждый элемент массива становится новой строкой.

text.setText([
    'Atari 520 ST',
    'Atari 1040 STE',
    'Atari Falcon 030',
    'Atari Jaguar',
    'Atari Lynx'
]);

Благодаря комбинации setOrigin(0.5) и setRightAlign(), весь этот блок текста будет отцентрирован на сцене (за это отвечает origin), а внутри блока каждая строка будет выровнена по правому краю. Это полезно для создания списков или блоков с текстом, который должен быть аккуратно собран у центральной оси.

Альтернатива: визуализация границ (закомментированный код)

В примере есть закомментированный блок кода, который демонстрирует отладочную технику. Метод getTextBounds() возвращает объект с подробными границами текстового блока, включая глобальные координаты и данные по каждой строке.

var bounds = text.getTextBounds();
graphics.fillRect(bounds.global.x, bounds.global.y, bounds.global.width, bounds.global.height);

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

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

Используя связку setOrigin() для позиционирования всего блока и setLeftAlign()/setCenterAlign()/setRightAlign() для управления строками внутри, вы получаете полный контроль над многострочным текстом в Phaser. Это основа для создания чистых интерфейсов, меню и информационных окон. Поэкспериментируйте: измените setRightAlign() на setCenterAlign(), переместите точку привязки в setOrigin(0, 0) (левый верхний угол) или динамически меняйте текст в методе update(), чтобы создать бегущую строку.