О чем этот пример
Работа с текстом — неотъемлемая часть разработки игр. Phaser предлагает мощный инструмент — Bitmap Fonts, для создания стилизованных текстовых элементов с высокой производительностью. В этой статье мы разберём, как правильно позиционировать и масштабировать такой текст, используя свойства `origin` и `scale`. Понимание этих принципов позволит вам точно размещать надписи на экране, анимировать их изменение размера и создавать сложные визуальные эффекты, что критически важно для интерфейсов, титров или игровых сообщений.
Версия 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 text1 = this.add.bitmapText(400, 100, 'desyrel', 'Hello World', 70);
text1.setOrigin(0.5);
text1.setScale(1, 1);
const text2 = this.add.bitmapText(400, 300, 'desyrel', 'Hello World', 70);
text2.setOrigin(0.5);
text2.setScale(0.5, 0.5);
const text3 = this.add.bitmapText(400, 500, 'desyrel', 'Hello World', 70);
text3.setOrigin(0.5);
text3.setScale(0.25, 0.25);
}
}
const config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
scene: Example
};
const game = new Phaser.Game(config);
Что такое Bitmap Font и зачем он нужен
В отличие от системных шрифтов, Bitmap Font (растровый шрифт) — это заранее отрисованное изображение всех глифов (символов) определённого размера и стиля. Phaser загружает его как текстуру.
Основное преимущество — полная визуальная идентичность на всех устройствах и высокая скорость отрисовки, так как не требуется растеризация шрифта "на лету". Это идеальный выбор для стилизованных заголовков, цифр счёта или любого текста, который должен выглядеть точно так, как задумал художник.
В примере используется шрифт 'Desyrel', который загружается из двух файлов: PNG-изображения с символами и XML-файла с их разметкой.
this.load.bitmapFont('desyrel', 'assets/fonts/bitmap/desyrel.png', 'assets/fonts/bitmap/desyrel.xml');Создание и позиционирование текста
Объект Bitmap Text создаётся с помощью метода this.add.bitmapText(). Важно понимать, что изначально точка привязки (origin) объекта находится в его левом верхнем углу.
Метод принимает несколько ключевых аргументов: координаты X и Y на сцене, ключ загруженного шрифта, сам текст и размер шрифта в пикселях (тот, для которого был создан bitmap-файл).
const text1 = this.add.bitmapText(400, 100, 'desyrel', 'Hello World', 70);После создания объект text1 будет помещён так, что его левый верхний угол окажется в точке (400, 100) на сцене. Это часто неудобно для центрирования или вращения.
Меняем точку отсчёта (Origin)
Свойство origin определяет точку внутри игрового объекта, которая будет совмещена с его координатами (X, Y) на сцене. Это внутренняя точка привязки.
Значения от 0 до 1 представляют собой долю от ширины и высоты объекта. Установка origin в (0.5, 0.5) означает центр объекта. Теперь координаты (400, 100) будут указывать не на левый верхний угол, а на центр текстового блока, что значительно упрощает выравнивание.
text1.setOrigin(0.5);Метод setOrigin(0.5) устанавливает и X, и Y компоненты origin в 0.5. Это эквивалентно setOrigin(0.5, 0.5).
Управление масштабом (Scale)
Свойство scale позволяет пропорционально или непропорционально изменять размер отображаемого объекта. Это преобразование применяется после всех расчётов с origin.
Значение по умолчанию — (1, 1), что означает исходный размер. Уменьшение масштаба, как в примере, делает объект визуально меньше, но его *логическая* точка origin и координаты (X, Y) остаются прежними. Это мощный инструмент для анимаций "появления", "пульсации" или создания текста разного размера из одного базового шрифта.
text2.setScale(0.5, 0.5);
text3.setScale(0.25, 0.25);В примере text2 отрисовывается в два раза меньше исходного размера, а text3 — в четыре раза. При этом все три строки текста отцентрированы по горизонтали относительно X=400, потому что их origin установлен в центр.
Порядок операций и практический смысл
Критически важно понимать последовательность, в которой Phaser применяет эти трансформации к объекту:
1. **Создание:** Объект создаётся в своей «родной» системе координат с origin в (0, 0).
2. **Установка Origin:** Система координат объекта смещается так, что выбранная точка origin становится его новой "локальной нулевой точкой".
3. **Позиционирование:** Эта новая нулевая точка (origin) помещается в заданные мировые координаты (например, 400, 300).
4. **Масштабирование:** К уже позиционированному объекту применяется масштаб, "растягивая" или "сжимая" его относительно точки origin.
Именно поэтому в финальной сцене все три текстовых блока разного размера выровнены по центру экрана по вертикали — их центры (origin=0.5) зафиксированы на разных координатах Y (100, 300, 500), и масштабирование происходит симметрично относительно этого центра.
Что попробовать дальше
Контроль над origin и scale — это фундамент для точного размещения и трансформации любых игровых объектов в Phaser, и Bitmap Text не исключение. Используйте origin для выравнивания (например, setOrigin(0, 0.5) для выравнивания по левому краю и центру по вертикали), а scale — для динамических изменений. Для экспериментов попробуйте: анимировать свойство scale с помощью твинов для эффекта "всплывающего" текста; использовать разные значения scale.x и scale.y для создания сжатого или растянутого текста; привязать scale к игровой статистике (например, чтобы счет "пульсировал" при изменении).