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

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

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

Версия 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.audio('theme', [
            'assets/audio/oedipus_wizball_highscore.ogg',
            'assets/audio/oedipus_wizball_highscore.mp3'
        ]);

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

    create ()
    {
        //  Prevent audio being paused when you switch tab
        this.sound.pauseOnBlur = false;

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

        const text = this.add.text(10, 10, 'Click to start audio');

        this.input.once('pointerdown', () => {

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

            music.play();

            text.setText('Music will continue while other tabs are active');

        });
    }
}

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

const game = new Phaser.Game(config);

Проблема паузы при потере фокуса

По умолчанию Phaser, как и большинство веб-платформ, автоматически приостанавливает воспроизведение аудио, когда вкладка браузера теряет фокус (например, пользователь переключился на другую вкладку или свернул окно). Это сделано для улучшения пользовательского опыта и оптимизации производительности в вебе. Однако для некоторых игр, особенно атмосферных или музыкальных, такое поведение нежелательно.

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

Решение: свойство `pauseOnBlur`

Чтобы отключить автоматическую паузу, достаточно установить свойство pauseOnBlur менеджера звуков в false. Обычно это делается в методе create сцены, после загрузки ресурсов, но до начала воспроизведения любого аудио.

create ()
{
    //  Отключаем автоматическую паузу аудио при переключении вкладки
    this.sound.pauseOnBlur = false;
    // ... остальной код создания сцены
}

После установки этого свойства все звуки, созданные и воспроизводимые через менеджер this.sound, больше не будут автоматически ставиться на паузу при blur-событии окна. Это включает в себя как музыку, добавленную через this.sound.add, так и звуковые эффекты.

Полный пример кода

Давайте рассмотрим полный пример, который демонстрирует эту функциональность. В нем загружается аудиофайл и спрайт. При первом клике мыши начинается воспроизведение музыки, и, благодаря отключенному pauseOnBlur, она продолжит играть, даже если вы переключитесь на другую вкладку.

class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    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.sound.pauseOnBlur = false;

        this.add.image(400, 300, 'wizball').setScale(4);
        const text = this.add.text(10, 10, 'Click to start audio');

        this.input.once('pointerdown', () => {
            const music = this.sound.add('theme');
            music.play();
            text.setText('Music will continue while other tabs are active');
        });
    }
}

Обратите внимание на конфигурацию игры: в ней явно отключен WebAudio через audio: { disableWebAudio: true }. Это означает, что Phaser будет использовать HTML5 Audio API. Поведение pauseOnBlur одинаково для обоих аудио-бэкендов.

Важные замечания и ограничения

1.  **Автозапуск (Autoplay Policy)**: Отключение `pauseOnBlur` не обходит политику автозапуска браузеров. Аудио все равно должно быть запущено в результате действия пользователя (например, клика). В нашем примере музыка начинается по `pointerdown`.
2.  **Потребление ресурсов**: Непрерывное воспроизведение аудио в фоновой вкладке может увеличить потребление энергии устройством. Используйте эту настройку обдуманно.
3.  **Глобальный эффект**: Свойство `pauseOnBlur` применяется глобально ко всему менеджеру звуков `this.sound` в данной сцене. Если вам нужно разное поведение для разных звуков, придется управлять их паузой вручную, слушая события фокуса окна.
4.  **Ручное управление**: Даже с `pauseOnBlur = false` вы все еще можете вручную приостановить и возобновить звук, используя методы `pauseAll` и `resumeAll` менеджера `this.sound`.

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

Установка this.sound.pauseOnBlur = false — это простой и эффективный способ сохранить непрерывность звукового сопровождения в вашей игре на Phaser, когда она не находится в активной вкладке. Это критически важно для музыкальных игр, атмосферных проектов или любых случаев, где аудиопоток не должен прерываться. **Идеи для экспериментов:** 1. Попробуйте создать систему, где фоновая музыка продолжается, а звуковые эффекты (выстрелы, прыжки) приостанавливаются при потере фокуса. Для этого вам придется разделять звуки по разным менеджерам или обрабатывать события blur/focus окна вручную. 2. Исследуйте, как сочетается эта настройка с системой пауз самой игры. Создайте меню паузы, которое останавливает геймплей, но оставляет фоновую музыку играющей. 3. Проверьте поведение на разных мобильных браузерах, так как их политики управления ресурсами могут быть строже.