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

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

Использование HTML и CSS внутри игрового движка открывает новые возможности для создания интерфейсов, меню и визуальных эффектов. Phaser 3 предоставляет встроенную систему DOM-элементов, которая позволяет позиционировать, анимировать и взаимодействовать с обычными HTML-тегами прямо на игровом холсте. Эта статья на практическом примере покажет, как создавать и анимировать DOM-объекты, расширяя арсенал инструментов для разработки игр.

Версия 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, 300, 'div', 'background-color: rgba(255, 255, 0, 0.5); width: 300px; height: 200px; font: 48px Arial; font-weight: bold', 'Phaser 3');

        element.setOrigin(0);

        const marker = this.add.rectangle(400, 300, 16, 16, 0xff00ff);

        this.tweens.add({
            targets: element,
            duration: 3000,
            angle: 360,
            scaleX: 2,
            scaleY: 2,
            ease: 'Sine.easeInOut',
            loop: -1,
            yoyo: true
        });
    }
}

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

const game = new Phaser.Game(config);

Подготовка и загрузка ресурсов

Класс сцены Example наследуется от Phaser.Scene. В методе preload задается базовый URL для загрузки ресурсов и загружается одно изображение. Обратите внимание, что для работы с DOM-элементами загрузка дополнительных игровых ресурсов не требуется.

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

Создание и настройка DOM-элемента

В методе create создается основной объект — DOM-элемент. Метод this.add.dom принимает координаты X и Y, имя тега, строку стилей CSS и текстовое содержимое. В данном случае создается div с полупрозрачным желтым фоном, фиксированными размерами и текстом 'Phaser 3'.

const element = this.add.dom(400, 300, 'div', 'background-color: rgba(255, 255, 0, 0.5); width: 300px; height: 200px; font: 48px Arial; font-weight: bold', 'Phaser 3');

Следующей строкой точка привязки элемента (origin) смещается в его левый верхний угол с помощью element.setOrigin(0). Это важно для корректной анимации, так как по умолчанию привязка находится в центре. Для визуализации исходной точки создается небольшой прямоугольник-маркер.

element.setOrigin(0);
const marker = this.add.rectangle(400, 300, 16, 16, 0xff00ff);

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

Phaser 3 предоставляет мощную систему анимации Tweens. В примере создается твин, который воздействует на созданный DOM-элемент. Анимация длится 3 секунды, непрерывно зациклена (loop: -1) и имеет эффект 'йо-йо' (возврат к начальному состоянию).

this.tweens.add({
    targets: element,
    duration: 3000,
    angle: 360,
    scaleX: 2,
    scaleY: 2,
    ease: 'Sine.easeInOut',
    loop: -1,
    yoyo: true
});

Элемент будет плавно вращаться на 360 градусов и увеличиваться в два раза по обеим осям, используя плавную функцию Sine.easeInOut. Обратите внимание, что DOM-элементы поддерживают те же свойства трансформации, что и обычные игровые объекты.

Конфигурация игры: включение DOM-контейнера

Ключевой момент для работы с DOM — правильная настройка конфигурации игры. В объекте config должен быть включен модуль dom с параметром createContainer: true. Phaser создаст отдельный контейнер для DOM-элементов поверх основного canvas.

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

Также в конфигурации используется масштабирование Phaser.Scale.FIT для адаптации под размер родительского элемента с сохранением пропорций.

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

DOM-элементы в Phaser 3 — это мост между игровым миром и веб-технологиями. Они идеально подходят для создания сложных UI, текстовых блоков или интерактивных форм. Для экспериментов попробуйте добавить обработчики событий (element.addListener), вложить в элемент сложную HTML-разметку или анимировать CSS-свойства, такие как opacity и color. Это откроет путь к созданию гибридных приложений, сочетающих динамику игры и гибкость веб-интерфейсов.