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

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

Интеграция живого видео в игру создаёт уникальные механики — от зеркал, показывающих лицо игрока, до AR-элементов. Phaser предоставляет простой API для работы с медиапотоками. В этой статье мы разберём пример загрузки и отображения видео с веб-камеры, управление его размещением и обработку событий. Это полезно для создания интерактивных витрин, игр с распознаванием жестов или просто необычных визуальных эффектов.

Версия 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('bg', 'assets/pics/purple-bars.jpg');
        this.load.image('monitor', 'assets/pics/commodore1084.png');
    }

    create ()
    {
        this.add.image(440, 340, 'bg');

        const text = this.add.text(440, 40, 'Connecting to Webcam ...', { font: '32px Courier', fill: '#00ff00' }).setShadow(1, 1).setDepth(1).setOrigin(0.5);

        const video = this.add.video(82, 76).setOrigin(0).setVisible(false);

        video.on('locked', () => {
            text.setText('Click to unlock video');
        });

        video.on('play', () => {
            text.setVisible(false);
        });

        video.once('created', () => {

            //  Resize the video stream to fit our monitor once the texture has been created
            video.setDisplaySize(716, 504).setVisible(true);

        });

        navigator.mediaDevices.getUserMedia({ video: true, audio: false }).then((stream) => {

            video.loadMediaStream(stream, true);

            video.play();

        })
        .catch((err) => {

            text.setText(`Error: ${err}`);

        });

        this.add.image(440, 340, 'monitor');
    }
}

const config = {
    type: Phaser.AUTO,
    width: 880,
    height: 680,
    backgroundColor: '#000000',
    parent: 'phaser-example',
    scene: Example
};

let game = new Phaser.Game(config);

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

Как и в любом проекте на Phaser, начинаем с подготовки сцены. В методе preload загружаем два изображения: фон и текстуру монитора, на который будем проецировать видео. Важно установить базовый URL для загрузчика, если ресурсы хранятся удалённо.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('bg', 'assets/pics/purple-bars.jpg');
    this.load.image('monitor', 'assets/pics/commodore1084.png');
}

Создание видеообъекта и работа с событиями

В методе create мы сначала добавляем фоновое изображение и текстовую подсказку для пользователя. Затем создаём видеообъект с помощью this.add.video. Изначально он скрыт (setVisible(false)).

Объект видео генерирует несколько полезных событий. Событие 'locked' срабатывает, когда видео требует взаимодействия с пользователем (например, клика для начала воспроизведения в некоторых браузерах). Событие 'play' сообщает, что видео начало воспроизводиться. Самое важное событие — 'created'. Оно возникает однократно после создания текстуры видео, и это идеальный момент для настройки его отображаемых размеров.

const video = this.add.video(82, 76).setOrigin(0).setVisible(false);

video.on('locked', () => {
    text.setText('Click to unlock video');
});

video.on('play', () => {
    text.setVisible(false);
});

video.once('created', () => {
    //  Меняем размер видео под рамку монитора
    video.setDisplaySize(716, 504).setVisible(true);
});

Захват потока с веб-камеры и его загрузка

Для доступа к веб-камере используем Web API navigator.mediaDevices.getUserMedia. Мы запрашиваем только видеопоток (audio: false). После успешного получения потока (stream) загружаем его в видеообъект Phaser с помощью метода loadMediaStream. Второй параметр true указывает, что поток нужно зациклить. Затем вызываем play() для начала воспроизведения. Не забываем обрабатывать возможные ошибки доступа к камере.

navigator.mediaDevices.getUserMedia({ video: true, audio: false }).then((stream) => {
    video.loadMediaStream(stream, true);
    video.play();
})
.catch((err) => {
    text.setText(`Error: ${err}`);
});

После настройки видео добавляем поверх него изображение монитора, которое служит декоративной рамкой. Благодаря правильному порядку добавления в сцену и настройке размеров, видео идеально вписывается в экран монитора.

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

Вы научились захватывать видеопоток с камеры и встраивать его в игровую сцену Phaser. Для экспериментов попробуйте применить к видео фильтры через CSS или WebGL, использовать его как текстуру для 3D-объекта или создать игру, где игрок должен позировать перед камерой, чтобы пройти препятствие. Можно также сохранять кадры из потока с помощью video.snapshot() для создания фото-арта прямо в игре.