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

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

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

Версия 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.video('mountains', 'assets/video/mountains.mp4', true);
    }

    create ()
    {
        const vid1 = this.add.video(0, 0, 'mountains').setOrigin(0).setScale(0.5);
        const vid2 = this.add.video(480, 0, 'mountains').setOrigin(0).setScale(0.5);
        const vid3 = this.add.video(0, 270, 'mountains').setOrigin(0).setScale(0.5);
        const vid4 = this.add.video(480, 270, 'mountains').setOrigin(0).setScale(0.5);

        //  The same video playing at different offsets
        vid1.play(true);
        vid2.play(true, 8.0);
        vid3.play(true, 16.0);
        vid4.play(true, 20.0);
    }
}

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

let game = new Phaser.Game(config);

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

Вся работа начинается с метода preload(). Здесь мы загружаем один видеофайл, который впоследствии будем тиражировать. Ключевой метод — this.load.video(). Последний параметр true указывает, что видео нужно загрузить сразу, а не по требованию.

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.video('mountains', 'assets/video/mountains.mp4', true);

Создание и позиционирование экземпляров

В методе create() мы создаём четыре независимых объекта видео, используя один и тот же загруженный ключ 'mountains'. Каждый экземпляр создаётся с помощью this.add.video(x, y, key). После создания мы сразу настраиваем их свойства: устанавливаем точку отсчёта (setOrigin(0)) в левый верхний угол и масштабируем (setScale(0.5)) до половины оригинального размера. Это позволяет разместить четыре видео в четырех квадрантах экрана.

const vid1 = this.add.video(0, 0, 'mountains').setOrigin(0).setScale(0.5);
const vid2 = this.add.video(480, 0, 'mountains').setOrigin(0).setScale(0.5);
const vid3 = this.add.video(0, 270, 'mountains').setOrigin(0).setScale(0.5);
const vid4 = this.add.video(480, 270, 'mountains').setOrigin(0).setScale(0.5);

Воспроизведение с временным смещением

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

vid1.play(true);
vid2.play(true, 8.0);
vid3.play(true, 16.0);
vid4.play(true, 20.0);

Конфигурация игры и сцены

Пример завершается стандартной конфигурацией игры. Обратите внимание, что размер сцены (960x540) идеально подходит для размещения четырёх видео размером 480x270 каждое (после применения setScale(0.5)). Это гарантирует, что видео займут весь экран без пробелов.

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

let game = new Phaser.Game(config);

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

Использование нескольких экземпляров одного видео — это эффективный способ создания динамичного визуала без излишней нагрузки на память. Для экспериментов попробуйте: анимировать позиции и масштаб каждого экземпляра через Tween; привязать временное смещение к игровым событиям; использовать режим blendMode для видео, чтобы создать эффекты наложения; или управлять громкостью каждого экземпляра отдельно для создания объёмного звукового ландшафта.