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

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

При разработке игр часто возникает необходимость проигрывать один и тот же звук в разных контекстах — например, для фоновой музыки и звукового эффекта. Phaser 3 позволяет создавать несколько независимых объектов Sound из одного загруженного аудиофайла. В этой статье мы разберем, как это работает, и почему это полезно для оптимизации памяти и управления звуком.

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

    create ()
    {
        const sound1 = this.sound.add('synth1', { loop: true });
        const sound2 = this.sound.add('synth1', { loop: true });

        sound1.play();
    }
}

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

const game = new Phaser.Game(config);

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

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

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.audio('synth1', [
        'assets/audio/tech/synth1.ogg',
        'assets/audio/tech/synth1.mp3'
    ]);
}

Здесь мы устанавливаем базовый URL для загрузки и регистрируем аудиоресурс с ключом 'synth1'. Phaser сам выберет подходящий формат в зависимости от браузера. Файл загружается в память только один раз.

Создание независимых звуковых объектов

После загрузки можно создавать экземпляры звука. Каждый объект Sound управляется независимо, но использует общий загруженный аудиобуфер. Это экономит память и позволяет настраивать параметры воспроизведения для каждого экземпляра отдельно.

create ()
{
    const sound1 = this.sound.add('synth1', { loop: true });
    const sound2 = this.sound.add('synth1', { loop: true });

    sound1.play();
}

Метод this.sound.add() принимает ключ загруженного аудио и опциональный объект конфигурации. В данном примере оба звука настроены на зацикливание (loop: true). Однако проигрывается только sound1. Объект sound2 находится в памяти, готовый к использованию.

Управление и практическое применение

Независимые объекты позволяют гибко управлять звуком. Например, можно запустить один экземпляр для фоновой музыки, а другой — для звукового эффекта, который должен накладываться на музыку. Каждый объект имеет свои методы управления.

// Остановка конкретного экземпляра
sound1.stop();

// Изменение громкости только для sound2
sound2.setVolume(0.5);

// Запуск второго экземпляра
sound2.play();

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

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

Использование одного аудиофайла для нескольких объектов Sound в Phaser 3 — это эффективный способ управления звуком без дублирования данных в памяти. Попробуйте создать звуковую систему, где разные игровые события (прыжок, выстрел, фон) используют один файл, но с разной громкостью, частотой или временем начала воспроизведения.