Phaser.js: всё об играх и разработке

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

Phaser 3 позволяет встраивать обычные HTML-элементы прямо в игровую сцену, открывая доступ к мощным CSS-эффектам. Однако настоящая магия начинается, когда вы комбинируете это с режимами наложения (Blend Modes), влияющими на визуальное взаимодействие с другими игровыми объектами. Эта статья наглядно покажет, как создать анимированные текстовые блоки с CSS-градиентами и применить к ним режим смешивания `HUE`, чтобы они динамически взаимодействовали с фоновым изображением.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('einstein', 'assets/pics/ra-einstein.png');
    }

    create ()
    {
        const element = this.add.dom(400, 100, 'div', 'background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); width: 220px; height: 100px; font: 48px Arial; font-weight: bold; color: white', 'Phaser 3');
        element.setBlendMode('HUE');

        const element2 = this.add.dom(500, 200, 'div', 'background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); width: 220px; height: 100px; font: 48px Arial; font-weight: bold; color: white', 'Phaser 3');
        element2.setBlendMode('HUE');

        this.tweens.add({
            targets: [ element, element2 ],
            y: 500,
            duration: 3000,
            ease: 'Sine.easeInOut',
            loop: -1,
            yoyo: true
        });

        this.add.image(400, 300, 'einstein');
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scale: {
        _mode: Phaser.Scale.FIT,
        parent: 'phaser-example',
        width: 800,
        height: 600
    },
    dom: {
        createContainer: true
    },
    scene: Example
};

const game = new Phaser.Game(config);

Настройка DOM-контейнера и загрузка ресурсов

Первым шагом является активация системы DOM в конфигурации игры. Без этого this.add.dom не будет работать.

const config = {
    // ... другие настройки ...
    dom: {
        createContainer: true
    },
    scene: Example
};

В методе preload мы загружаем фоновое изображение, с которым будут взаимодействовать наши DOM-элементы. Обратите внимание на использование setBaseURL для удобства.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('einstein', 'assets/pics/ra-einstein.png');
}

Создание и стилизация DOM-элементов

Метод this.add.dom создаёт и добавляет в сцену HTML-элемент. Его параметры: позиция (x, y), тип тега, inline-CSS стили и текстовое содержимое.

const element = this.add.dom(400, 100, 'div',
    'background: linear-gradient(...); width: 220px; height: 100px; font: 48px Arial; font-weight: bold; color: white',
    'Phaser 3'
);

Ключевой момент — строка стилей. В примере используется сложный CSS linear-gradient, создающий металлический синий градиент с прозрачными краями. Это демонстрирует мощь CSS для оформления, недоступную стандартным игровым объектам Phaser. Ширина, высота, шрифт и цвет также задаются здесь.

Применение режима наложения (Blend Mode)

После создания элемента мы применяем к нему режим наложения с помощью метода setBlendMode. В примере используется режим 'HUE' (оттенок).

element.setBlendMode('HUE');

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

Анимация элементов с помощью Tween

Чтобы эффект был наглядным, элементы нужно двигать. Мы используем систему анимации Phaser this.tweens.add. Важно передать массив элементов в свойство targets.

this.tweens.add({
    targets: [ element, element2 ], // Анимируем оба элемента
    y: 500,                         // Конечная позиция по Y
    duration: 3000,                 // Длительность анимации в мс
    ease: 'Sine.easeInOut',         // Плавная функция easing
    loop: -1,                       // Бесконечный цикл
    yoyo: true                      // Возврат к начальной позиции
});

Во время движения режим 'HUE' постоянно пересчитывается, так как цвет фона под элементом меняется, что создаёт живую, переливающуюся анимацию.

Добавление фонового изображения

Для работы режима наложения нужен нижний слой. Мы добавляем изображение, которое будет просвечивать сквозь DOM-элементы и взаимодействовать с их blend mode.

this.add.image(400, 300, 'einstein');

Изображение размещается в центре сцены. Поскольку DOM-элементы созданы с прозрачными областями (благодаря градиенту), а их основной цвет смешивается в режиме 'HUE', мы видим не просто текст поверх картинки, а их органичное визуальное слияние.

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

Комбинация DOM-элементов и Blend Modes в Phaser 3 открывает уникальные возможности для UI и визуальных эффектов, используя всю мощь CSS вместе с игровым рендерингом. Вы можете экспериментировать с другими режимами наложения (например, 'ADD', 'MULTIPLY'), создавать более сложные CSS-фильтры (filter: blur()) для DOM-объектов или анимировать не только позицию, но и CSS-свойства через element.setStyle, наблюдая за тем, как динамически меняется их взаимодействие с игровым миром.