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

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

Версия 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(400, 300, 'ice', 'Phaser 3\nBitmap Text\nGet Bounds', 48, 1);

        text.setOrigin(0.5, 0.5);
        // text.setAngle(10);
        text.setScale(1.25);

        const bounds = text.getBounds();

        const debug = this.add.graphics();

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

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

const game = new Phaser.Game(config);

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

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

this.load.bitmapFont('ice', 'assets/fonts/bitmap/iceicebaby.png', 'assets/fonts/bitmap/iceicebaby.xml');

В методе create мы создаем сам текстовый объект, передавая координаты X и Y, ключ шрифта, строку текста, размер и выравнивание.

const text = this.add.bitmapText(400, 300, 'ice', 'Phaser 3\nBitmap Text\nGet Bounds', 48, 1);

Далее мы задаем точку привязки (origin) в центр объекта и увеличиваем его масштаб. Эти трансформации напрямую повлияют на итоговые границы.

text.setOrigin(0.5, 0.5);
text.setScale(1.25);

Получение границ с помощью getBounds()

Ключевой метод getBounds() вызывается у экземпляра BitmapText. Он возвращает объект Phaser.Geom.Rectangle, содержащий свойства `x,y,widthиheight`.

const bounds = text.getBounds();

Этот прямоугольник описывает мировые координаты объекта в пикселях с учетом всех примененных к нему трансформаций: позиции, масштаба, поворота (angle) и точки привязки. Если бы мы раскомментировали строку text.setAngle(10);, возвращенный прямоугольник bounds автоматически стал бы описанным (bounding box) вокруг повернутого текста.

Визуализация границ для отладки

Чтобы наглядно увидеть результат работы getBounds(), в примере создается графический объект Graphics.

const debug = this.add.graphics();

Мы настраиваем стиль линии для этого объекта и рисуем прямоугольник, используя данные из bounds. Это позволяет визуально подтвердить корректность расчетов.

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

Зеленый контур, который вы увидите на экране, и есть реальная занимаемая текстом область на игровом холсте (canvas). Этот прием крайне полезен при отладке сложных интерфейсов.

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

Метод getBounds() — это простой и мощный инструмент для работы с пространственными характеристиками BitmapText. Используйте его для точного позиционирования элементов интерфейса относительно друг друга, реализации проверок наведения (hit area) для текстовых кнопок или создания динамических эффектов, зависящих от размеров текстового блока. Попробуйте поэкспериментировать: примените к тексту анимацию масштаба или поворота и понаблюдайте, как меняется возвращаемый прямоугольник границ.