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

В Phaser 3 загрузка видеофайлов осуществляется через встроенный менеджер загрузки ресурсов — Loader. Видео можно использовать как спрайты, текстуры для объектов или как фоновое медиа. Основная задача — корректно добавить видео в сцену и управлять его воспроизведением.

Регистрация видео в загрузчике

Для начала необходимо использовать метод this.load.video() в контексте сцены:

this.load.video('intro', 'assets/videos/intro.mp4', {
    loadEvent: 'canplaythrough',
    asTexture: true
});

Параметры метода:

  • ‘intro’ — уникальный ключ для идентификации видео.
  • ‘assets/videos/intro.mp4’ — путь к файлу видео.
  • loadEvent — событие, по которому считается, что видео загружено и готово к воспроизведению ('loadeddata', 'canplay', 'canplaythrough').
  • asTexture — если true, видео будет доступно как текстура для спрайтов и изображений.

Использование asTexture: true позволяет работать с видео так же, как с обычными изображениями в Phaser, что особенно полезно для динамических эффектов или применения шейдеров.

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

После загрузки видео его можно добавлять на сцену:

const video = this.add.video(400, 300, 'intro');
video.setOrigin(0.5, 0.5);
video.play(true); // true — воспроизведение по кругу

Методы объекта Video:

  • play(loop = false) — запускает воспроизведение; параметр loop указывает, будет ли видео повторяться.
  • pause() — приостанавливает воспроизведение.
  • stop() — полностью останавливает видео и сбрасывает его позицию на начало.
  • setMute(true/false) — управление звуком.
  • setScale(x, y) — изменение масштаба видео.

Обработка событий видео

Видео в Phaser поддерживает собственные события, которые позволяют реагировать на прогресс загрузки и завершение воспроизведения:

video.on('complete', () => {
    console.log('Видео завершилось');
});

video.on('play', () => {
    console.log('Видео начато');
});

video.on('pause', () => {
    console.log('Видео приостановлено');
});

Для событий загрузки можно использовать this.load.on():

this.load.on('filecomplete-video-intro', () => {
    console.log('Видео intro полностью загружено');
});

Использование видео как текстуры

При указании asTexture: true видео можно использовать для спрайтов:

const sprite = this.add.sprite(400, 300, 'intro');
sprite.setOrigin(0.5, 0.5);

Это позволяет применять стандартные методы Phaser для трансформации, вращения, масштабирования и взаимодействия с другими объектами сцены.

Поддержка форматов и производительность

Phaser поддерживает MP4, WebM и Ogg. Для кроссбраузерной совместимости рекомендуется предоставлять видео в нескольких форматах и указывать их через массив:

this.load.video('cutscene', ['assets/video/cutscene.mp4', 'assets/video/cutscene.webm'], {
    loadEvent: 'canplaythrough'
});

Чтобы снизить нагрузку на память и CPU, стоит использовать небольшие размеры видео и корректно управлять их воспроизведением — останавливать видео вне поля зрения камеры и не использовать asTexture, если видео не требует обработки как текстуры.

Советы по оптимизации

  • Буферизация: использовать loadEvent: 'canplaythrough' для уверенного воспроизведения без подгрузки.
  • Кеширование: при повторном использовании видео рекомендуется сохранять объект и не загружать повторно.
  • Контроль звука: отключать звук для фоновых или повторяющихся видео, чтобы снизить нагрузку на аудиодрайвер.
  • Асинхронная загрузка: для больших видео использовать сцену предзагрузки и события fileprogress, чтобы отображать индикатор загрузки.

Интеграция с другими объектами Phaser

Видео можно интегрировать с игровыми объектами:

  • Маски и шейдеры: видео-текстура может быть частью маски или применять фильтры для эффектов.
  • Фоны: видеоплейбек на фоне сцены с использованием video.setDepth(-1).
  • Интерактивные элементы: кнопки или зоны сцены могут управлять воспроизведением, ставя видео на паузу или меняя видео в ответ на события.

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

Оглавление