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

В Phaser можно создавать не только спрайты и графику на Canvas, но и использовать полноценные DOM-лементы, такие как видео. Это открывает возможности для вставки интро, кат-сцен или UI-компонентов, управляемых браузером. В статье разберем, как встроить видео в сцену и запустить игровое действие после его окончания, используя стандартные веб-технологии.

Версия 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('logo', 'assets/sprites/phaser3-logo-x2.png');
    }

    create ()
    {
        const video = document.createElement('video');

        video.playsinline = true;
        video.src = 'assets/video/skull.mp4';
        video.width = 800;
        video.height = 450;
        video.autoplay = true;

        const element = this.add.dom(400, 300, video);

        video.addEventListener('ended', (event) =>
        {

            element.setVisible(false);

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

        });
    }
}

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

const game = new Phaser.Game(config);

Зачем использовать DOM для видео?

Phaser работает преимущественно с Canvas или WebGL, но иногда нужно использовать медиа-элементы, которые браузер обрабатывает эффективнее. Например, для воспроизведения видео с аппаратным ускорением или сложных HTML-интерфейсов.

Включив поддержку DOM в конфигурации, вы получаете доступ к методу this.add.dom(), который позиционирует HTML-элемент поверх игрового поля. Это удобно для видео, так как не требует его конвертации в текстуру.

Настройка конфигурации для DOM

Чтобы использовать DOM-элементы, в конфигурации игры нужно явно указать опцию dom.createContainer: true. Без этого метод this.add.dom() не будет работать.

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    dom: {
        createContainer: true  // Включаем контейнер для DOM-элементов
    },
    scene: Example
};

После этого в сцене появится доступ к DOM-функциям.

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

В методе create() создается стандартный HTML-элемент <video>. Важно задать ему атрибуты для корректного отображения, особенно playsinline для мобильных устройств.

const video = document.createElement('video');

video.playsinline = true; // Воспроизведение без полноэкранного режима на мобильных
video.src = 'assets/video/skull.mp4';
video.width = 800;
video.height = 450;
video.autoplay = true; // Автозапуск

Здесь используется внешний источник видео, но можно загружать его через this.load.video() и получать готовый элемент.

Добавление видео в сцену и обработка событий

Созданный элемент добавляется в сцену через this.add.dom(). Этот метод возвращает объект DOMElement, который можно скрывать, перемещать или анимировать.

const element = this.add.dom(400, 300, video);

Координаты (400, 300) указывают центр элемента. После этого мы подписываемся на событие окончания видео ended.

video.addEventListener('ended', (event) => {
    element.setVisible(false); // Скрываем видео
    this.add.image(400, 300, 'logo'); // Показываем игровой объект
});

Когда видео заканчивается, мы скрываем DOM-элемент и отображаем обычный спрайт Phaser, создавая плавный переход.

Принципы управления и совместимость

Управление видео происходит через стандартный HTMLMediaElement API. Вы можете использовать методы play(), pause(), currentTime и другие.

Важно помнить, что DOM-элементы находятся поверх игрового мира. Они не участвуют в физике или системе камер Phaser, но их можно перемещать через свойства `x,yобъектаDOMElement`.

Для кросс-браузерности убедитесь, что видео закодировано в поддерживаемых форматах (например, MP4 с H.264) и учитывайте политики автовоспроизведения браузеров.

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

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