О чем этот пример
Работа с текстом — базовая, но критически важная задача в разработке игр. Phaser 3 предлагает мощный и гибкий API для создания текстовых объектов, управления их внешним видом, положением и поведением. В этой статье мы разберем практический пример, который демонстрирует ключевые возможности объекта `Text`: от установки точки вращения (origin) до применения масштаба, прозрачности и режимов наложения. Понимание этих принципов — залог точного позиционирования интерфейса и динамических текстовых эффектов в вашей игре.
Версия 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');
}
create ()
{
this.add.image(0, 0, 'grid').setOrigin(0);
// Test 1
// Render object at given coordinates
this.test1 = this.add.text(400, 50, 'Phaser 3', { fontSize: 32 }).setOrigin(0.5);
// Test 2
// Render object at given coordinates factoring in origin 1
this.test2 = this.add.text(400, 150, 'Phaser 3', { fontSize: 32 }).setOrigin(1, 0.5);
// Test 3
// Render object at given coordinates factoring in origin 0
this.test3 = this.add.text(400, 150, 'Phaser 3', { fontSize: 32 }).setOrigin(0, 0.5);
// Test 4
// Render object with scale
this.test4 = this.add.text(400, 250, 'Phaser 3', { fontSize: 32 }).setOrigin(0.5).setScale(2);
// Test 5
// Render object with rotation
this.test5 = this.add.text(400, 350, 'Phaser 3', { fontSize: 32 }).setOrigin(0.5);
// Test 6
// Render object with alpha
this.test6 = this.add.text(400, 450, 'Phaser 3', { fontSize: 32 }).setOrigin(0.5).setAlpha(0.5);
// Test 7
// Render object with blend mode
this.test7 = this.add.text(400, 550, 'Phaser 3', { fontSize: 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);
Основа: Создание сцены и загрузка ресурсов
Каждый пример в Phaser начинается со сцены (Scene). В методе preload мы загружаем ресурсы, а в create — создаём игровые объекты. В данном случае загружается фоновая текстура-сетка для наглядности.
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('grid', 'assets/pics/debug-grid-1920x1920.png');
}
create ()
{
this.add.image(0, 0, 'grid').setOrigin(0);
// ... создание текстовых объектов
}Метод this.add.image добавляет фоновое изображение, а setOrigin(0) выставляет точку отсчёта (origin) в его левый верхний угол, что удобно для выравнивания по краю экрана.
Точка отсчёта (Origin): Ключ к точному позиционированию
Свойство origin определяет точку внутри объекта, которая будет совмещена с его координатами (x, y). По умолчанию у текста origin равен 0.5 (центр). Этот параметр критически важен для выравнивания и вращения.
// Origin = 0.5 (по умолчанию). Текст центрируется вокруг точки (400, 50).
this.test1 = this.add.text(400, 50, 'Phaser 3', { fontSize: 32 }).setOrigin(0.5);
// Origin = 1 по X, 0.5 по Y. Правая сторона текста привязана к X=400.
this.test2 = this.add.text(400, 150, 'Phaser 3', { fontSize: 32 }).setOrigin(1, 0.5);
// Origin = 0 по X, 0.5 по Y. Левая сторона текста привязана к X=400.
this.test3 = this.add.text(400, 150, 'Phaser 3', { fontSize: 32 }).setOrigin(0, 0.5);В примере test2 и test3 имеют одинаковые координаты Y=150, но из-за разного origin по оси X они отображаются по разные стороны от вертикальной линии X=400.
Трансформации: Масштаб и непрерывное вращение
Phaser позволяет легко трансформировать объекты. Метод setScale изменяет размер, а свойство rotation — угол поворота в радианах.
// Увеличение текста в 2 раза.
this.test4 = this.add.text(400, 250, 'Phaser 3', { fontSize: 32 }).setOrigin(0.5).setScale(2);
// Создание объекта для последующего вращения.
this.test5 = this.add.text(400, 350, 'Phaser 3', { fontSize: 32 }).setOrigin(0.5);Важно: setScale применяется после setOrigin, что гарантирует масштабирование относительно центра текста. Вращение происходит в методе update, который вызывается каждый кадр.
update ()
{
this.test5.rotation += 0.01;
}Изменяя свойство rotation на небольшое значение каждому кадру, мы получаем плавную анимацию вращения. Поскольку origin установлен в 0.5, объект вращается вокруг своего центра.
Визуальные эффекты: Прозрачность и режимы наложения
Помимо трансформаций, можно управлять визуальным стилем текста. Метод setAlpha задаёт уровень прозрачности (от 0 — полностью прозрачный, до 1 — полностью непрозрачный). Метод setBlendMode изменяет способ смешивания пикселей объекта с фоном.
// Полупрозрачный текст (alpha = 0.5).
this.test6 = this.add.text(400, 450, 'Phaser 3', { fontSize: 32 }).setOrigin(0.5).setAlpha(0.5);
// Текст с режимом наложения ADD (значение 1).
this.test7 = this.add.text(400, 550, 'Phaser 3', { fontSize: 32 }).setOrigin(0.5).setBlendMode(1);Режим наложения ADD (значение 1) складывает цвета текста и фона, создавая эффект «свечения». Это особенно полезно для создания неоновых надписей или частиц. Значения blendMode соответствуют константам Canvas и WebGL.
Что попробовать дальше
Объект Text в Phaser 3 — это не просто строка на экране, а полноценный игровой объект с поддержкой трансформаций, эффектов и физики. Освоив управление origin, вы получите полный контроль над позиционированием. Используя scale, rotation, alpha и blendMode, можно создавать динамичные заголовки, элементы HUD и спецэффекты. Для экспериментов попробуйте: анимировать scale для эффекта пульсации, менять blendMode в реальном времени или привязать текст к физическому телу (this.physics.add.text), чтобы он сталкивался с другими объектами.