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

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

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

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

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);

Настройка загрузки аудио и изображения

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

Загружаем аудиофайл с ключом 'theme'. Phaser позволяет указать массив путей к одному и тому же аудио в разных форматах (OGG и MP3). Это стандартная практика для кросс-браузерной совместимости, так как разные браузеры поддерживают разные аудиокодеки.

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'
]);

Также для наглядности загружается спрайт 'wizball', который будет отображаться на сцене.

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

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

В методе create() размещаем загруженное изображение и, что самое важное, подготавливаем и запускаем музыку.

Сначала добавляем спрайт в центр экрана и увеличиваем его.

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

Затем создаем аудиообъект, обращаясь к менеджеру звуков this.sound. Метод this.sound.add('theme') создает экземпляр Sound на основе ранее загруженного аудио с ключом 'theme'.

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

Чтобы начать воспроизведение, достаточно вызвать метод play() у созданного объекта. Музыка начнет играть сразу после старта сцены.

music.play();

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

Ключевой момент для понимания этого примера находится в конфигурационном объекте игры. По умолчанию Phaser использует более мощный и современный Web Audio API. Однако в этой конфигурации явно указано использовать HTML5 Audio.

В поле audio объекта config устанавливается свойство disableWebAudio: true. Это заставляет Phaser использовать HTML5 Audio API, что может быть проще, но имеет больше ограничений (например, по микшированию звуков).

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    pixelArt: true,
    scene: Example,
    audio: {
        disableWebAudio: true // Включаем режим HTML5 Audio
    }
};

Инициализация игры стандартная.

const game = new Phaser.Game(config);

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

Вы разобрали базовый паттерн для работы со звуком в Phaser: загрузка в preload(), создание объекта в create() и управление через метод play(). Важно понимать разницу между HTML5 Audio и Web Audio, которую можно контролировать в конфиге. Для экспериментов попробуйте: добавить управление музыкой (пауза, остановка), настроить громкость через setVolume, зациклить трек с помощью параметра loop в методе play() или переключить конфиг на использование Web Audio API, убрав опцию disableWebAudio, чтобы оценить разницу в возможностях.