О чем этот пример
Работа с текстом — неотъемлемая часть разработки игр. Phaser 3 предлагает мощный инструмент `BitmapText`, который использует заранее отрендеренные растровые шрифты для максимальной производительности и полного контроля над стилем. Эта статья на практическом примере покажет, как создавать статичный текст, управлять его точкой вращения (origin), применять трансформации, эффекты прозрачности и режимы наложения. Вы научитесь использовать `BitmapText` не только для вывода надписей, но и как полноценный анимированный игровой объект.
Версия 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.bitmapText(400, 50, 'desyrel', 'PHASER 3', 32).setOrigin(0.5);
// Test 2
// Render object at given coordinates factoring in origin 1
this.test2 = this.add.bitmapText(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.bitmapText(400, 150, 'desyrel', 'PHASER 3', 32).setOrigin(0, 0.5);
// Test 4
// Render object with scale
this.test4 = this.add.bitmapText(400, 250, 'desyrel', 'PHASER 3', 32).setOrigin(0.5).setScale(2);
// Test 5
// Render object with rotation
this.test5 = this.add.bitmapText(400, 350, 'desyrel', 'PHASER 3', 32).setOrigin(0.5);
// Test 6
// Render object with alpha
this.test6 = this.add.bitmapText(400, 450, 'desyrel', 'PHASER 3', 32).setOrigin(0.5).setAlpha(0.5);
// Test 7
// Render object with blend mode
this.test7 = this.add.bitmapText(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);
Загрузка ресурсов и основа сцены
Перед созданием текста необходимо загрузить необходимые ресурсы. В методе preload() загружается фоновая текстура сетки для удобства позиционирования и сам растровый шрифт desyrel. Шрифт загружается из двух файлов: изображения (.png) с глифами и файла описания (.xml), который содержит данные о положении каждого символа.
В create() первым делом добавляется фоновая сетка с координатами (0,0) и установленным в (0,0) origin (точкой привязки), чтобы она точно заполнила левый верхний угол.
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);
// ... создание текстовых объектов
}Создание текста и управление точкой привязки (Origin)
Объект BitmapText создается с помощью метода this.add.bitmapText(x, y, font, text, size). Ключевой параметр для позиционирования и вращения — origin. Это точка внутри объекта (нормализованная от 0 до 1), относительно которой происходят все трансформации. По умолчанию origin равен (0, 0) — левый верхний угол.
**Test 1:** Текст создается в точке (400, 50) с origin в центре (0.5, 0.5). Координаты (400,50) указывают на центр текстового блока.
**Test 2 & 3:** Наглядно демонстрируют разницу. Оба текста создаются в одной точке (400, 150). test2 имеет origin в (1, 0.5) — правый центр, поэтому его правая сторона «прикреплена» к координате X=400. test3 имеет origin в (0, 0.5) — левый центр, поэтому к X=400 привязана его левая сторона.
// Test 1
this.test1 = this.add.bitmapText(400, 50, 'desyrel', 'PHASER 3', 32).setOrigin(0.5);
// Test 2
this.test2 = this.add.bitmapText(400, 150, 'desyrel', 'PHASER 3', 32).setOrigin(1, 0.5);
// Test 3
this.test3 = this.add.bitmapText(400, 150, 'desyrel', 'PHASER 3', 32).setOrigin(0, 0.5);Масштабирование, прозрачность и режимы наложения
Как и любой игровой объект в Phaser, BitmapText поддерживает стандартные свойства трансформации и визуальные эффекты через методы-сеттеры (setters).
**Test 4:** Метод .setScale(2) равномерно увеличивает текст в два раза. Масштабирование происходит относительно установленного ранее origin (в данном случае — центра).
**Test 6:** Метод .setAlpha(0.5) устанавливает прозрачность объекта на 50%. Это полезно для эффектов появления, исчезновения или выделения неактивных элементов интерфейса.
**Test 7:** Метод .setBlendMode(1) применяет режим наложения пикселей. Аргумент `1соответствует константеPhaser.BlendModes.ADD`. Режимы наложения определяют, как цвет объекта смешивается с цветами под ним, что позволяет создавать эффекты свечения, затемнения и другие визуальные комбинации.
// Test 4
this.test4 = this.add.bitmapText(400, 250, 'desyrel', 'PHASER 3', 32).setOrigin(0.5).setScale(2);
// Test 6
this.test6 = this.add.bitmapText(400, 450, 'desyrel', 'PHASER 3', 32).setOrigin(0.5).setAlpha(0.5);
// Test 7
this.test7 = this.add.bitmapText(400, 550, 'desyrel', 'PHASER 3', 32).setOrigin(0.5).setBlendMode(1);Анимация: вращение текста
Чтобы оживить статичный текст, достаточно обновлять его свойства в методе update(), который вызывается на каждом кадре игры. В примере test5 создается как обычный текст с центральным origin. Это критически важно для корректного вращения вокруг своей оси, а не вокруг угла.
В update() к свойству rotation объекта this.test5 каждый кадр прибавляется 0.01 радиана. Это создает плавную непрерывную анимацию вращения. Изменяя величину приращения, можно контролировать скорость вращения.
// Test 5 (создание в create())
this.test5 = this.add.bitmapText(400, 350, 'desyrel', 'PHASER 3', 32).setOrigin(0.5);
// Анимация вращения (в update())
update ()
{
this.test5.rotation += 0.01;
}Что попробовать дальше
BitmapText в Phaser 3 — это не просто способ вывести надпись на экран, а полноценный, производительный и гибкий игровой объект. Управляя origin, вы получаете точный контроль над позиционированием и анимацией. Применяя масштаб, вращение, прозрачность и режимы наложения, можно создавать динамические элементы интерфейса, эффектные заглавия или даже использовать текст как часть игрового мира (например, вращающиеся логи).
**Идеи для экспериментов:**
1. Анимируйте alpha или scale для эффекта пульсации текста.
2. Измените origin у вращающегося текста и посмотрите, как меняется траектория его движения.
3. Свяжите изменение свойства `y` текста с физикой или вводом пользователя.
4. Используйте разные режимы наложения (BlendModes) на тексте, расположенном поверх текстуры, чтобы увидеть визуальные эффекты.