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

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

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

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

    create ()
    {
        const text = this.add.bitmapText(0, 0, 'ice', 'Phaser 3\nBitmap Text\nOrigin and Scale', 48, 1);

        text.setOrigin(0.5, 0.5);
        text.setPosition(400, 300);
        text.setScale(-2, 2);

        const bounds = text.getTextBounds();

        const debug = this.add.graphics();

        debug.lineStyle(1, 0x00ff00);
        debug.strokeRect(bounds.global.x, bounds.global.y, bounds.global.width, bounds.global.height);
    }
}

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

const game = new Phaser.Game(config);

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

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

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

Метод this.load.bitmapFont принимает три аргумента: ключ для дальнейшего использования ('ice'), путь к изображению и путь к XML-файлу. setBaseURL устанавливает базовый URL для всех загружаемых ресурсов в этом методе, что удобно для указания корневой папки.

Создание текста и установка точки отсчета

После загрузки ресурсов мы создаем объект BitmapText в методе create. Ключевая концепция — точка отсчета (origin), которая определяет, какая точка внутри текста будет использоваться для его позиционирования и трансформаций.

const text = this.add.bitmapText(0, 0, 'ice', 'Phaser 3\nBitmap Text\nOrigin and Scale', 48, 1);

text.setOrigin(0.5, 0.5);
text.setPosition(400, 300);

Метод this.add.bitmapText создает объект. Первые два аргумента (0, 0) — это начальные координаты X и Y. Затем указываем ключ загруженного шрифта, сам текст, размер шрифта и выравнивание (1 — выравнивание по левому краю).

Важно: вызов setPosition(400, 300) после setOrigin(0.5, 0.5) означает, что центр текста (origin) будет помещен в точку (400, 300) на сцене. Если origin не менять (по умолчанию 0, 0 — левый верхний угол), то в точке (400, 300) окажется именно левый верхний угол текста.

Масштабирование и отражение

Метод setScale позволяет не только увеличивать или уменьшать объект, но и отражать его по осям, используя отрицательные значения масштаба.

text.setScale(-2, 2);

В данном примере setScale(-2, 2) устанавливает масштаб по оси X равным -2, а по оси Y — 2. Отрицательное значение по X приводит к горизонтальному отражению (зеркалированию) текста. При этом абсолютное значение 2 удваивает размер текста по обеим осям. Отражение происходит относительно точки отсчета (origin), которую мы ранее установили в центр текста.

Визуализация границ текста

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

const bounds = text.getTextBounds();

const debug = this.add.graphics();
debug.lineStyle(1, 0x00ff00);
debug.strokeRect(bounds.global.x, bounds.global.y, bounds.global.width, bounds.global.height);

Метод getTextBounds() возвращает объект с данными о границах. Нас интересуют свойства global, которые содержат координаты и размеры текста уже с учетом всех трансформаций (позиции, масштаба, origin). Мы создаем объект Graphics (debug) и рисуем зеленый (0x00ff00) прямоугольник по полученным координатам. Эта обводка показывает фактическую занимаемую область на сцене.

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

Управление точкой отсчета и масштабом открывает широкие возможности для анимации интерфейсного текста: от простого появления из центра до сложных переворотов и отражений. Визуализация границ — незаменимый инструмент для точной верстки игрового UI. **Идеи для экспериментов:** Попробуйте анимировать свойство scale с помощью твинов, чтобы создать эффект "пульсации" текста. Измените origin на (0, 1) и привяжите текст к нижнему левому углу спрайта персонажа для отображения его имени. Используйте разные значения масштаба по X и Y для создания сжатого или вытянутого стиля текста.