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

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

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

Версия 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);

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

Перед тем как проиграть звук, его необходимо загрузить. В Phaser для этого используется система загрузки (Loader), доступная в методе preload() сцены. Это гарантирует, что к моменту создания сцены (create()) все ресурсы будут готовы.

Ключевой метод — this.load.audio(). Он принимает два аргумента: уникальный ключ-идентификатор для последующего доступа к звуку и массив путей к файлам в разных форматах. Предоставление нескольких форматов (например, .ogg и .mp3) повышает кросс-браузерную совместимость, так как разные браузеры поддерживают разные кодеки.

this.load.audio('theme', [
    'assets/audio/oedipus_wizball_highscore.ogg',
    'assets/audio/oedipus_wizball_highscore.mp3'
]);

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

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

Созданный объект содержит методы для управления воспроизведением. Самый простой способ запустить звук — вызвать метод .play() без аргументов. В этом случае музыка начнет играть один раз с настройками по умолчанию.

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

Объект music теперь можно использовать для паузы, остановки, регулировки громкости или прослушивания событий, связанных с его воспроизведением.

Управление звуком при потере фокуса окна

Поведение звука при сворачивании вкладки браузера или переключении на другое приложение — важный аспект пользовательского опыта. По умолчанию Phaser продолжает воспроизведение. Однако часто требуется автоматически ставить звук на паузу, когда игра не активна.

За это отвечает глобальное свойство менеджера звуков this.sound.pauseOnBlur. Установив его в true, вы поручаете Phaser автоматически приостанавливать все звуки при потере фокуса окном и возобновлять их, когда фокус возвращается.

this.sound.pauseOnBlur = true;

Это простое правило значительно улучшает восприятие игры и является хорошим тоном в веб-разработке.

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

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