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

Современные игры — это не только графика и звук, но и полноценные видеовставки: кат-сцены, фоновые заставки, эффекты окружения. Phaser предоставляет простой и мощный инструмент для работы с видео прямо внутри игрового мира. Эта статья покажет, как быстро загрузить и воспроизвести видеофайл, превратив его в полноценный интерактивный объект на сцене, что откроет новые возможности для нарратива и визуальных эффектов.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    create ()
    {
        //  Here we create our video Game Object and then we call `loadURL` to load the video in.
        const video = this.add.video(640, 360);

        video.loadURL('assets/video/tunnel.mp4', true);

        video.play(true);
    }
}

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

let game = new Phaser.Game(config);

Создание видео-геймобъекта

В Phaser видео — это такой же игровой объект (Game Object), как спрайт или текст. Вы создаете его с помощью фабричного метода сцены this.add.video(). Первые два аргумента — это координаты X и Y центра видео на экране. Это позволяет сразу позиционировать ролик в нужном месте.

const video = this.add.video(640, 360);

На этом этапе создается пустой контейнер. Сам видеопоток еще не загружен. Для воспроизведения видео в браузере требуется его предварительная загрузка, о чем позаботится следующий шаг.

Загрузка видеофайла

Чтобы видео начало проигрываться, его необходимо загрузить из источника. Для этого у созданного объекта вызывается метод loadURL(). Первым аргументом передается путь к файлу относительно корня вашего проекта или абсолютный URL. Второй, необязательный, аргумент — булевый флаг noAudio. Если он установлен в true, аудиодорожка видео будет отключена. Это полезно для фоновых роликов, где звук управляется отдельно.

video.loadURL('assets/video/tunnel.mp4', true);

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

Воспроизведение и управление

После того как видео загружено (или даже в процессе, если браузер поддерживает потоковую загрузку), его можно запустить методом play(). Передача true в этот метод означает, что видео должно зациклиться после окончания. Это идеально для создания бесшовных фоновых анимаций или эффектов.

video.play(true);

Созданный объект video — это полноценный игровой объект Phaser. К нему можно применять стандартные трансформации: изменять размер (setScale), прозрачность (setAlpha), добавлять физическое тело через this.physics.add.existing(video). Это открывает путь к созданию интерактивных видео-элементов, которые реагируют на действия игрока.

Конфигурация игры и настройки

Для корректной работы видео важна общая конфигурация игры. Ключевой параметр — backgroundColor. В примере он установлен в черный цвет ('#000000'), что часто используется для полноэкранных видеовставок, чтобы скрыть возможные черные поля вокруг ролика.

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

let game = new Phaser.Game(config);

Убедитесь, что разрешение игры (width, height) соответствует или кратно разрешению вашего видеофайла для достижения наилучшего качества отображения без искажений.

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

Интеграция видео в Phaser — процесс удивительно простой. Всего три метода: add.video(), loadURL() и play() — дают вам мощный инструмент для оживления игрового мира. Для экспериментов попробуйте: привязать к видео физическое тело и сделать его частью игровой механики; использовать несколько видео-слоев с разной прозрачностью для создания сложных композиций; или управлять воспроизведением по событию (например, клику игрока) для создания интерактивных кат-сцен.