Загружаем и воспроизводим музыку в Phaser: практический разбор

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    text;

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.text = this.add.text(10, 10, 'Loading audio ...', { font: '16px Courier', fill: '#00ff00' });

        this.load.audio('dafunk', [
            'assets/audio/Dafunk - Hardcore Power (We Believe In Goa - Remix).ogg',
            'assets/audio/Dafunk - Hardcore Power (We Believe In Goa - Remix).mp3',
            'assets/audio/Dafunk - Hardcore Power (We Believe In Goa - Remix).m4a'
        ]);
    }

    create ()
    {
        this.sound.pauseOnBlur = false;

        const music = this.sound.add('dafunk');

        music.play();

        this.text.setText('Playing Dafunk - Hardcore Power (We Believe In Goa - Remix)');
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Структура сцены и предзагрузка

В Phaser загрузка ресурсов, включая аудио, происходит в методе preload() сцены. Это гарантирует, что к моменту запуска игры все необходимые файлы будут готовы.

В нашем примере класс сцены Example содержит свойство text для отображения статуса. Первым делом в preload() мы указываем базовый URL для загрузки и создаем текстовый объект.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.text = this.add.text(10, 10, 'Loading audio ...', { font: '16px Courier', fill: '#00ff00' });
    // ... загрузка аудио
}

Загрузка аудио с поддержкой нескольких форматов

Разные браузеры поддерживают разные аудиоформаты. Чтобы ваша музыка играла везде, Phaser позволяет указать массив файлов в одном вызове метода this.load.audio(). Движок автоматически выберет первый поддерживаемый браузером формат.

Ключ 'dafunk' — это внутренний идентификатор (asset key), по которому мы позже получим доступ к звуку.

this.load.audio('dafunk', [
    'assets/audio/Dafunk - Hardcore Power (We Believe In Goa - Remix).ogg',
    'assets/audio/Dafunk - Hardcore Power (We Believe In Goa - Remix).mp3',
    'assets/audio/Dafunk - Hardcore Power (We Believe In Goa - Remix).m4a'
]);

Создание и воспроизведение звука

Как только все ресурсы загружены, Phaser автоматически вызывает метод create(). Здесь происходит инициализация игровых объектов и логики.

Перед созданием звукового объекта важно настроить глобальное поведение аудиосистемы. Свойство this.sound.pauseOnBlur = false предотвращает паузу музыки, когда пользователь переключается на другую вкладку браузера.

create ()
{
    this.sound.pauseOnBlur = false;

    const music = this.sound.add('dafunk');
    music.play();

    this.text.setText('Playing Dafunk - Hardcore Power (We Believe In Goa - Remix)');
}

Метод this.sound.add('dafunk') создает и возвращает экземпляр звука на основе ранее загруженного ключа. Вызов music.play() запускает его воспроизведение.

Конфигурация игры и запуск

Код вне класса сцены отвечает за создание экземпляра игры Phaser.Game. В объекте конфигурации config указывается тип рендерера, размеры холста, ID родительского HTML-элемента и класс основной сцены.

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

После создания объекта game Phaser берет на себя управление жизненным циклом сцены, вызывая preload(), create(), а затем update() на каждом кадре.

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

Вы освоили базовый цикл работы со звуком в Phaser: от загрузки нескольких форматов до управления воспроизведением. Для экспериментов попробуйте добавить управление громкостью через music.setVolume(), запустить звук с задержкой или в цикле, используя параметры метода play(). Также изучите другие методы объекта звука, такие как pause(), resume() и stop(), чтобы создать полноценную аудиосистему для своей игры.