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

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

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

Версия 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',
    audio: {
        disableWebAudio: true
    },
    scene: Example
};

const game = new Phaser.Game(config);

Настройка загрузчика и загрузка аудио

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

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

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
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 попробует загрузить файлы из массива по порядку, пока не найдет формат, который браузер может воспроизвести. Уникальный ключ 'dafunk' используется для доступа к загруженному аудио позже.

Конфигурация игры: выбор HTML5 Audio

Перед созданием экземпляра игры Phaser.Game необходимо определить ее конфигурацию. В этом примере критически важна секция audio.

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

Опция disableWebAudio: true заставляет Phaser использовать HTML5 Audio API вместо более мощного Web Audio API. Это может быть полезно для упрощения логики или для целевых платформ, где Web Audio имеет ограничения. Без этой опции Phaser по умолчанию использует Web Audio API.

Создание сцены и управление воспроизведением

После успешной загрузки всех ресурсов Phaser автоматически вызывает метод create() сцены. Здесь происходит настройка звуковой системы и запуск музыки.

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

1. `this.sound.pauseOnBlur = false;` — это важная настройка глобального менеджера звуков `SoundManager`. По умолчанию Phaser ставит все звуки на паузу, когда окно браузера теряет фокус (пользователь переключился на другую вкладку). Установка значения в `false` отключает это поведение, позволяя музыке играть непрерывно.
2. `this.sound.add('dafunk')` — создает и возвращает объект `Sound`, используя ранее загруженный аудиофайл с ключом `'dafunk'`.
3. `music.play()` — запускает воспроизведение созданного звукового объекта.

Объект Sound и его возможности

Метод this.sound.add() возвращает объект типа Sound. Это не просто ссылка на аудиофайл, а полноценный контроллер для управления воспроизведением.

const music = this.sound.add('dafunk', { volume: 0.5, loop: true });

Вторым аргументом можно передать объект конфигурации. Вот некоторые полезные опции: * volume: Громкость звука от 0 (тишина) до 1 (максимум). * loop: Булево значение. Если true, трек будет зациклен после завершения. * rate: Скорость воспроизведения (питч). 1.0 — нормальная скорость.

Созданный объект music предоставляет методы для контроля: music.pause(), music.resume(), music.stop(). Также можно динамически менять свойства, например, music.setVolume(0.2).

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

Вы освоили базовый паттерн работы со звуком в Phaser: от загрузки нескольких форматов до воспроизведения и управления поведением при потере фокуса. Использование HTML5 Audio может упростить архитектуру в некоторых случаях. Для экспериментов попробуйте: изменить глобальную настройку pauseOnBlur на true и посмотреть на разницу; добавить несколько звуковых объектов с разными настройками громкости и зацикливанием; или использовать событие 'complete' на объекте Sound, чтобы запускать действие после окончания трека.