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

Создание визуально привлекательного интерфейса — ключевая часть игрового дизайна. Статичный текст может казаться скучным и плохо читаться на сложном фоне. Эта статья покажет, как использовать bitmap-текст, режимы наложения (blend modes) и плавные анимации (tweens) в Phaser, чтобы ваш текст стал динамичным, стильным и органично вписался в игровой мир. Вы научитесь управлять визуальным слоем текста и добавлять ему простое, но эффектное движение.

Версия 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.image('z2', 'assets/pics/zero-two.png');
        this.load.bitmapFont('ice', 'assets/fonts/bitmap/iceicebaby.png', 'assets/fonts/bitmap/iceicebaby.xml');
    }

    create ()
    {
        this.add.image(400, 300, 'z2');

        const text = this.add.bitmapText(64, 200, 'ice', 'Zero Two', 32);

        text.setBlendMode(Phaser.BlendModes.ADD);

        this.tweens.add({
            targets: text,
            duration: 4000,
            scaleX: 4,
            ease: 'Quad.easeInOut',
            repeat: -1,
            yoyo: true
        });

        this.tweens.add({
            targets: text,
            duration: 3000,
            scaleY: 8,
            ease: 'Cubic.easeInOut',
            repeat: -1,
            yoyo: true
        });
    }
}

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

const game = new Phaser.Game(config);

Загрузка ресурсов: изображение и bitmap-шрифт

Перед созданием любых объектов в сцене необходимо загрузить ресурсы. В методе preload мы используем this.load для указания базового URL и загрузки двух ключевых элементов: фонового изображения и специального bitmap-шрифта.

Bitmap-шрифт (или растровый шрифт) — это текстура, где каждый символ предварительно отрисован. Это позволяет добиться пиксельного или стилизованного вида текста, который сложно воспроизвести стандартными веб-шрифтами. Загрузка происходит в два этапа: сначала изображение с символами (.png), а затем файл с разметкой (.xml), описывающий положение каждого глифа (символа) внутри этой текстуры.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('z2', 'assets/pics/zero-two.png');
    this.load.bitmapFont('ice', 'assets/fonts/bitmap/iceicebaby.png', 'assets/fonts/bitmap/iceicebaby.xml');
}

Создание сцены: фон, текст и blend mode

В методе create мы размещаем игровые объекты. Сначала добавляется фоновое изображение. Затем создается объект bitmap-текста с помощью this.add.bitmapText. Аргументами являются начальные координаты X и Y, ключ загруженного шрифта, строка текста и размер.

Самая важная строка здесь — text.setBlendMode(Phaser.BlendModes.ADD). Blend mode (режим наложения) определяет, как пиксели объекта будут смешиваться с пикселями объектов под ним. Режим ADD (сложение) ярко освещает области под текстом, создавая эффект свечения или неона, что особенно эффектно на темном фоне.

create ()
{
    this.add.image(400, 300, 'z2');

    const text = this.add.bitmapText(64, 200, 'ice', 'Zero Two', 32);
    text.setBlendMode(Phaser.BlendModes.ADD);
}

Анимация текста с помощью системы Tween

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

В примере создаются два независимых твина, которые воздействуют на один объект text. Первый твин анимирует масштаб по оси X (scaleX), второй — по оси Y (scaleY). Ключевые параметры твина: - targets: объект или массив объектов для анимации. - duration: длительность анимации в миллисекундах. - ease: функция плавности (easing), которая задает характер движения (например, ускорение или замедление). - repeat: -1: анимация повторяется бесконечно. - yoyo: true: после завершения цикла анимация проигрывается в обратном порядке.

this.tweens.add({
    targets: text,
    duration: 4000,
    scaleX: 4,
    ease: 'Quad.easeInOut',
    repeat: -1,
    yoyo: true
});

this.tweens.add({
    targets: text,
    duration: 3000,
    scaleY: 8,
    ease: 'Cubic.easeInOut',
    repeat: -1,
    yoyo: true
});

Разные длительности и функции плавности для осей X и Y создают сложное, «живое» движение, напоминающее пульсацию или дыхание.

Конфигурация и запуск игры

Класс Phaser.Game является ядром приложения. Он принимает объект конфигурации, в котором указываются основные параметры, такие как тип рендерера, размеры холста и стартовая сцена.

Конфигурация в примере стандартна: - type: Phaser.AUTO: Phaser сам выберет оптимальный рендерер (WebGL или Canvas). - parent: ID HTML-элемента, в который будет встроен canvas. - width и height: размеры области отрисовки. - scene: ссылка на класс, реализующий логику стартовой сцены.

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

const game = new Phaser.Game(config);

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

Комбинирование bitmap-текста, режимов наложения и твинов — мощный и простой способ добавить визуальный шарм заголовкам, счетчикам или любым другим текстовым элементам в вашей игре. Для экспериментов попробуйте: 1. Изменить BlendModes.ADD на другие режимы, например, MULTIPLY, SCREEN или OVERLAY, и посмотрите, как текст взаимодействует с фоном. 2. Поиграть с параметрами твинов: изменить длительность, конечные значения масштаба или функции плавности (ease). 3. Анимировать не только scale, но и другие свойства, например, alpha (прозрачность) или угол вращения. 4. Создать несколько текстовых объектов с разными настройками для построения сложных композиций.