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

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

Запуск видео в Phaser часто требует интерактивного триггера, например, нажатия кнопки. Но что показывать пользователю до воспроизведения? Чёрный экран — плохой вариант. У видеоплеера Phaser есть полезный метод `getFirstFrame()`, который автоматически извлекает и отображает первый кадр загруженного видео, создавая идеальное превью для кнопки Play. Этот приём мгновенно улучшает пользовательский опыт, превращая статичный интерфейс в динамичный и давая игроку понятный визуальный контекст перед запуском ролика. В статье разберём, как это работает на практике.

Версия 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('spaceace', 'assets/video/spaceace.mp4');
        this.load.image('play', 'assets/ui/play-button.png');
    }

    create ()
    {
        const intro = this.add.video(640, 360, 'spaceace');

        //  Get the first frame of the video to display behind our Play button
        intro.getFirstFrame();

        const playButton = this.add.image(640, 360, 'play').setInteractive();

        playButton.once('pointerdown', () => {

            intro.play();

            playButton.setVisible(false);

        });
    }
}

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

let game = new Phaser.Game(config);

Загрузка ресурсов

В методе preload() мы загружаем два ключевых ресурса: видеофайл и изображение кнопки воспроизведения. Обратите внимание, что для видео используется метод this.load.video. Первый аргумент — это ключ ресурса ('spaceace'), по которому мы будем обращаться к видео позже. Второй аргумент — путь к файлу.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.video('spaceace', 'assets/video/spaceace.mp4');
    this.load.image('play', 'assets/ui/play-button.png');
}

Создание видео и извлечение первого кадра

В методе create() мы создаём объект видео с помощью this.add.video, указывая координаты центра и ключ загруженного ресурса. Это создаёт видеоплеер в сцене, но видео по умолчанию не воспроизводится.

Магия происходит в следующей строке. Вызов intro.getFirstFrame() делает именно то, что говорит его название: он захватывает первый кадр видеопотока и немедленно отображает его как статичное изображение на месте видеоплеера. Это изображение и служит превью.

create ()
{
    const intro = this.add.video(640, 360, 'spaceace');

    //  Get the first frame of the video to display behind our Play button
    intro.getFirstFrame();
    ...
}

Добавление интерактивной кнопки Play

Поверх видео (а точнее, поверх его первого кадра) мы размещаем спрайт кнопки воспроизведения. Кнопке сразу же назначается интерактивность с помощью .setInteractive(). Мы используем событие 'pointerdown' с модификатором .once(), которое гарантирует, что обработчик сработает только при первом нажатии.

Внутри обработчика мы, наконец, запускаем настоящее видео методом intro.play(). После этого кнопка Play больше не нужна, поэтому мы скрываем её с помощью playButton.setVisible(false). Пользователь видит плавный переход от статичного превью к движущемуся видео.

const playButton = this.add.image(640, 360, 'play').setInteractive();

    playButton.once('pointerdown', () => {
        intro.play();
        playButton.setVisible(false);
    });

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

Код завершается стандартной конфигурацией игры Phaser. Важные параметры: - width и height задают размер холста. - backgroundColor устанавливает цвет фона ('#2d2d2d' — тёмно-серый). - В свойстве scene передаётся класс нашей сцены Example.

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

let game = new Phaser.Game(config);

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

Метод getFirstFrame() — это простой и эффективный способ создать профессиональное превью для видео в вашей игре. Он решает проблему "мёртвой зоны" перед воспроизведением, используя контент самого видео. Для экспериментов попробуйте: 1. Создать кастомную кнопку, которая не скрывается, а, например, становится полупрозрачной или меняет иконку на паузу. 2. Использовать не первый, а произвольный кадр из видео (это потребует ручного управления видеопотоком). 3. Применить этот приём для создания галереи видео-превью в меню выбора уровней.