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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.audio('theme', [
            'assets/audio/oedipus_wizball_highscore.ogg',
            'assets/audio/oedipus_wizball_highscore.mp3'
        ]);

        this.load.image('wizball', 'assets/sprites/wizball.png');
    }

    create ()
    {
        this.add.image(400, 300, 'wizball').setScale(4);

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

        music.play();

        this.sound.pauseOnBlur = true;
    }
}

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

const game = new Phaser.Game(config);

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

Как и другие ассеты, аудиофайлы загружаются в методе preload() сцены. Phaser рекомендует предоставлять файлы в нескольких форматах (например, .ogg и .mp3) для кросс-браузерной совместимости.

Ключевые методы:
- `this.load.setBaseURL()` задает базовый URL для всех последующих загрузок.
- `this.load.audio()` регистрирует аудиофайл под заданным ключом. В метод передается массив путей к файлам в разных форматах — движок выберет первый поддерживаемый браузером.
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.audio('theme', [
    'assets/audio/oedipus_wizball_highscore.ogg',
    'assets/audio/oedipus_wizball_highscore.mp3'
]);

Создание и воспроизведение звукового объекта

После загрузки в методе create() можно создать экземпляр звука для управления им. Объект музыки создается через менеджер звуков сцены this.sound.

Процесс: 1. this.sound.add('theme') создает и возвращает объект Sound по ключу, заданному при загрузке. 2. Вызов метода .play() на этом объекте начинает воспроизведение.

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

Важная настройка: пауза при потере фокуса

По умолчанию звук в Phaser продолжает играть, даже если пользователь переключился на другую вкладку браузера. Это часто раздражает игроков. Глобальное свойство this.sound.pauseOnBlur позволяет это исправить.

Установив его в true, вы указываете движку автоматически ставить всю аудиосистему на паузу, когда окно браузера теряет фокус, и возобновлять воспроизведение, когда фокус возвращается.

this.sound.pauseOnBlur = true;

Структура конфигурации игры

Для корректной работы примера необходима базовая конфигурация игры. Обратите внимание на параметр pixelArt: true, который включает сглаживание для пиксельной графики (в данном случае для спрайта wizball).

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    pixelArt: true,
    scene: Example // Указываем наш класс сцены
};

const game = new Phaser.Game(config);

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

Теперь вы знаете, как загружать и запускать фоновую музыку в Phaser 3. Для экспериментов попробуйте: управлять громкостью через music.setVolume(), зациклить трек с помощью music.setLoop(true), или создать несколько звуковых объектов для эффектов и управлять ими независимо. Это откроет путь к созданию полноценной звуковой палитры для вашей игры.