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

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

Управление звуковым сопровождением — ключевая механика в любой игре. Игроки часто хотят быстро отключить музыку, чтобы сосредоточиться, или включить её обратно. В этом примере показано, как реализовать простое и эффективное переключение глобального состояния звука в Phaser с помощью свойства `this.sound.mute`. Это полезно для создания кнопки 'Mute' в меню или для отладки аудио в процессе разработки.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    pixelArt: true,
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function 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');
}

function create ()
{
    this.add.image(400, 300, 'wizball').setScale(2);

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

    music.play();

    var st = this.add.text(0, 50, "Tap to start sound - then tap this to toggle mute").setFontSize(24);

    st.setInteractive();

    st.on("pointerup", () => {
        this.sound.mute = !this.sound.mute;
        st.setText('tap to toggle mute. sound.mute = ' + this.sound.mute);
    });
}

Загрузка звуковых ресурсов

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

function 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.audio(). Первый аргумент — это ключ ('theme'), по которому мы позже получим доступ к звуку. Второй аргумент — массив путей к файлам в разных форматах (OGG и MP3). Phaser автоматически выберет формат, поддерживаемый браузером пользователя.

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

После загрузки ресурсов в методе create мы можем создать экземпляр звука и начать его воспроизведение.

function create ()
{
    var music = this.sound.add('theme');
    music.play();
}

this.sound.add('theme') создаёт объект Sound на основе ранее загруженного ключа 'theme'. Вызов метода .play() запускает его воспроизведение. На этом этапе музыка уже звучит.

Визуальный элемент для взаимодействия

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

function create ()
{
    // ... предыдущий код ...
    var st = this.add.text(0, 50, "Tap to start sound - then tap this to toggle mute").setFontSize(24);
    st.setInteractive();
}

this.add.text() создаёт текстовую метку. setInteractive() делает этот текстовый объект чувствительным к событиям ввода (кликам или касаниям). Теперь по нему можно 'тапать'.

Переключение глобального режима 'Mute'

Самая важная часть — обработка клика для переключения состояния звука. Для этого используется свойство this.sound.mute.

st.on("pointerup", () => {
    this.sound.mute = !this.sound.mute;
    st.setText('tap to toggle mute. sound.mute = ' + this.sound.mute);
});

В обработчике события "pointerup" мы инвертируем текущее значение this.sound.mute. Если оно было false (звук включен), то становится true (звук отключен), и наоборот. Это глобальная настройка, которая мгновенно применяется ко всем звукам, управляемым менеджером this.sound. После переключения мы обновляем текст, чтобы отобразить новое состояние.

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

Использование свойства this.sound.mute — это самый простой способ добавить в игру на Phaser глобальное отключение звука. Для экспериментов попробуйте привязать эту логику не к тексту, а к графической кнопке-спрайту. Также можно изучить другие методы управления звуком, например, this.sound.pause() для паузы или регулировку громкости через this.sound.volume.