О чем этот пример
Динамический BitmapText — это мощный инструмент для отображения текста в играх на Phaser. В отличие от обычного текста, он использует растровые шрифты, что позволяет легко менять содержимое строки во время выполнения, а также применять различные визуальные эффекты. Эта статья покажет, как создавать, позиционировать и анимировать такой текст, что полезно для интерфейсов, счетчиков очков или любых динамических надписей.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
test7;
test6;
test5;
test4;
test3;
test2;
test1;
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('grid', 'assets/pics/debug-grid-1920x1920.png');
this.load.bitmapFont('desyrel', 'assets/fonts/bitmap/desyrel.png', 'assets/fonts/bitmap/desyrel.xml');
}
create ()
{
this.add.image(0, 0, 'grid').setOrigin(0);
// Test 1
// Render object at given coordinates
this.test1 = this.add.dynamicBitmapText(400, 50, 'desyrel', 'PHASER 3', 32).setOrigin(0.5);
// Test 2
// Render object at given coordinates factoring in origin 1
this.test2 = this.add.dynamicBitmapText(400, 150, 'desyrel', 'PHASER 3', 32).setOrigin(1, 0.5);
// Test 3
// Render object at given coordinates factoring in origin 0
this.test3 = this.add.dynamicBitmapText(400, 150, 'desyrel', 'PHASER 3', 32).setOrigin(0, 0.5);
// Test 4
// Render object with scale
this.test4 = this.add.dynamicBitmapText(400, 250, 'desyrel', 'PHASER 3', 32).setOrigin(0.5).setScale(2);
// Test 5
// Render object with rotation
this.test5 = this.add.dynamicBitmapText(400, 350, 'desyrel', 'PHASER 3', 32).setOrigin(0.5);
// Test 6
// Render object with alpha
this.test6 = this.add.dynamicBitmapText(400, 450, 'desyrel', 'PHASER 3', 32).setOrigin(0.5).setAlpha(0.5);
// Test 7
// Render object with blend mode
this.test7 = this.add.dynamicBitmapText(400, 550, 'desyrel', 'PHASER 3', 32).setOrigin(0.5).setBlendMode(1);
}
update ()
{
this.test5.rotation += 0.01;
}
}
const config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
scene: Example
};
const game = new Phaser.Game(config);
Что такое DynamicBitmapText и зачем он нужен
Класс DynamicBitmapText предназначен для отображения текста с использованием предварительно загруженного растрового шрифта (bitmap font). Главное его отличие от статического BitmapText — возможность изменять строку текста (text) непосредственно во время работы игры, без пересоздания объекта.
Это делает его идеальным выбором для элементов, где текст часто обновляется: счетчики FPS, таймеры, количество монет или здоровья. В исходном примере мы создаем семь таких объектов, чтобы продемонстрировать их основные свойства.
Перед использованием необходимо загрузить сам шрифт. Это делается в методе preload() с помощью this.load.bitmapFont().
this.load.bitmapFont('desyrel', 'assets/fonts/bitmap/desyrel.png', 'assets/fonts/bitmap/desyrel.xml');Создание и базовое позиционирование
Объект создается с помощью фабричного метода this.add.dynamicBitmapText(). В метод передаются координаты X и Y, ключ загруженного шрифта, начальная текстовая строка и размер шрифта.
this.test1 = this.add.dynamicBitmapText(400, 50, 'desyrel', 'PHASER 3', 32);Важнейший метод для управления позицией — .setOrigin(). Он устанавливает точку привязки (origin) объекта. По умолчанию она равна (0, 0) — левому верхнему углу текста. Изменяя origin, вы меняете точку, относительно которой рассчитываются координаты, масштаб и поворот.
// Текст будет центрирован относительно точки (400, 150)
this.test2.setOrigin(0.5);
// Текст будет выровнен по правому краю относительно точки (400, 150)
this.test2.setOrigin(1, 0.5);В примере test1, test2 и test3 наглядно показывают разницу в позиционировании при разных значениях origin.
Визуальные трансформации: масштаб, поворот и прозрачность
Как и любой игровой объект в Phaser, DynamicBitmapText поддерживает стандартные трансформации.
Метод .setScale() позволяет увеличить или уменьшить текст. В примере test4 текст увеличен в два раза.
this.test4.setScale(2);Поворот задается через свойство .rotation. В методе update() примера значение rotation для test5 постоянно увеличивается, создавая анимацию вращения.
// В create()
this.test5 = this.add.dynamicBitmapText(400, 350, 'desyrel', 'PHASER 3', 32).setOrigin(0.5);
// В update()
this.test5.rotation += 0.01;Прозрачность регулируется методом .setAlpha(), где 1 — полностью непрозрачный, 0 — полностью прозрачный. Объект test6 имеет полупрозрачность.
this.test6.setAlpha(0.5);Расширенные эффекты: режимы наложения (Blend Modes)
Phaser позволяет применять к объектам различные режимы наложения пикселей (blend modes), которые определяют, как цвет объекта смешивается с цветом фона или объектов под ним.
Установить режим можно с помощью метода .setBlendMode(). В примере для test7 используется режим с кодом `1, который соответствуетPhaser.BlendModes.ADD` (аддитивное наложение). Этот режим часто используется для создания эффектов свечения или света.
this.test7.setBlendMode(1);Номер режима — это числовое значение из перечисления Phaser.BlendModes. Использование режимов наложения — простой способ добавить визуальной сложности тексту без использования шейдеров.
Что попробовать дальше
DynamicBitmapText в Phaser — это гибкий и производительный способ работы с динамическим текстом в играх. Вы научились создавать такие объекты, управлять их точкой привязки для точного позиционирования, применять трансформации и визуальные эффекты.
Для экспериментов попробуйте: анимировать свойство scale для эффекта пульсации, менять текст test1.text в update() в зависимости от игровых событий, или комбинировать несколько эффектов (прозрачность + поворот) на одном объекте. Это откроет путь к созданию живой и отзывчивой текстовой части вашего игрового интерфейса.