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

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

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

Версия 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.setPath('assets/audio/kyobi/');

        this.load.audioSprite('kyobi', 'kyobi.json');
    }

    create ()
    {
        const music = this.sound.addAudioSprite('kyobi');

        music.play('title');

        // music.play('gameOver');
        // music.play('nextLevel');

        // text.setText('Playing Dafunk - Hardcore Power (We Believe In Goa - Remix)');
    }
}

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

const game = new Phaser.Game(config);

Что такое аудиоспрайт и зачем он нужен

Аудиоспрайт — это один аудиофайл (например, MP3 или OGG), внутри которого записано несколько звуковых дорожек. Отдельный JSON-файл описывает временные метки для каждого звука: его название, начало и длительность.

Использование аудиоспрайтов дает два ключевых преимущества: 1. **Снижение количества HTTP-запросов.** Вместо десятков отдельных файлов загружаются всего два: аудио и JSON. Это критично для производительности, особенно на мобильных устройствах. 2. **Удобство организации.** Все звуки темы или персонажа хранятся вместе. В коде вы обращаетесь к ним по понятным именам (например, 'jump' или 'explosion'), а не по индексам или временным отрезкам.

Загрузка аудиоспрайта в Phaser 3

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

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.setPath('assets/audio/kyobi/');

this.load.audioSprite('kyobi', 'kyobi.json');

Метод this.load.audioSprite() принимает два аргумента: - **Первый ('kyobi'):** Ключ (key), по которому спрайт будет доступен в коде. - **Второй ('kyobi.json'):** Путь к JSON-файлу с описанием спрайта. Phaser автоматически загрузит и связанный с ним аудиофайл, путь к которому указан внутри этого JSON.

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

После загрузки в методе create() мы создаем объект для управления аудиоспрайтом.

const music = this.sound.addAudioSprite('kyobi');

Функция this.sound.addAudioSprite() создает специальный аудиоплеер, связанный с загруженным спрайтом по его ключу.

Чтобы воспроизвести конкретный звук, вызываем метод play() у созданного объекта, передав имя звука из JSON-описания.

music.play('title');
// music.play('gameOver');
// music.play('nextLevel');

Этот код запустит проигрывание фрагмента, который в JSON был обозначен меткой title. Вы можете легко переключаться между звуками, просто меняя строковый идентификатор.

Структура JSON-файла для аудиоспрайта

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

on
{
  "resources": ["kyobi.ogg"],
  "spritemap": {
    "title": {
      "start": 0,
      "end": 3.5,
      "loop": false
    },
    "gameOver": {
      "start": 4,
      "end": 7.2,
      "loop": false
    }
  }
}

- **resources:** Массив с именами аудиофайлов. - **spritemap:** Объект, где ключи — это имена звуков (например, title), а значения — объекты с параметрами: - start: Время начала фрагмента в секундах. - end: Время окончания. - loop: Флаг зацикливания данного конкретного фрагмента.

Именно эти имена из spritemap вы используете в вызове music.play('title').

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

Аудиоспрайты — это мощный и эффективный инструмент для работы со звуком в Phaser 3. Они оптимизируют загрузку и делают код чище. Для экспериментов попробуйте создать свой аудиоспрайт из набора звуковых эффектов для выстрелов или шагов, либо настройте параметры воспроизведения, такие как громкость (volume) или панорамирование (pan), прямо при вызове play().