Пространственный звук: pan

В Phaser 3 аудиосистема предоставляет мощные возможности для работы с пространственным звуком. Одной из ключевых функций является управление панорамированием (pan), которое позволяет создавать эффект позиционирования источника звука в стереополе.

Основы панорамирования

Панорамирование отвечает за распределение звука между левым и правым каналами стереосистемы. Значение pan задаётся в диапазоне от -1 до 1:

-1 — звук полностью слева.
0 — центр, звук одинаково слышен в обоих каналах.
1 — звук полностью справа.

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

Создание аудиофайла и воспроизведение

Для работы с панорамированием сначала создаётся аудио-объект через this.sound.add:

let music = this.sound.add('background_music', {
    loop: true,
    volume: 1,
    detune: 0
});
music.play();

После запуска можно управлять параметром pan:

music.setPan(-0.5);  // смещение влево
music.setPan(0.3);   // смещение вправо

Метод setPan возвращает сам объект Audio, что позволяет использовать цепочки вызовов:

music.setVolume(0.8).setPan(0.5);

Динамическое изменение панорамирования

Для создания эффекта движения источника звука можно изменять значение pan во времени. Например, синусоидальное движение:

this.time.addEvent({
    delay: 16,
    callback: () => {
        let t = this.time.now / 1000;  // текущее время в секундах
        let panValue = Math.sin(t);    // колебание от -1 до 1
        music.setPan(panValue);
    },
    loop: true
});

Такой подход позволяет имитировать объекты, которые перемещаются вокруг игрока.

Панорамирование при 3D-эффекте

Хотя Phaser не поддерживает полноценное 3D-аудио, комбинация pan и изменения громкости создаёт ощущение пространственного звучания. Например, для объекта, который удаляется от слушателя:

let dx = object.x - player.x;
let dy = object.y - player.y;
let distance = Math.sqrt(dx*dx + dy*dy);

let pan = Phaser.Math.Clamp(dx / 400, -1, 1); // нормируем dx в диапазон [-1,1]
let volume = Phaser.Math.Clamp(1 - distance / 500, 0, 1);

music.setPan(pan).setVolume(volume);

Такой код обеспечивает эффект перемещения звука влево/вправо и приглушение с ростом расстояния.

Связь с другими аудио-параметрами

Pan тесно связан с другими свойствами звука:

Volume — уменьшение громкости с расстоянием усиливает эффект панорамирования.
Detune — изменение высоты звука может создавать ощущение движения источника в пространстве.
Rate — ускорение или замедление воспроизведения для эффектов скорости движения.

Ограничения и особенности

Панорамирование работает только для стерео-источников. Для монофонических файлов эффект создаётся искусственно.
Значение pan обновляется мгновенно, поэтому плавные переходы лучше делать через Tween или таймеры.
Некоторые браузеры могут иметь ограниченную поддержку Web Audio API, поэтому важно тестировать на целевых платформах.

Практическое использование

Игровая сцена с врагами: каждый враг имеет звук, смещённый по pan относительно позиции игрока.
Музыкальные эффекты: эффекты удара или выстрела могут смещаться влево/вправо в зависимости от положения камеры.
Интерактивные объекты: объекты, которые игрок собирает или активирует, создают ощущение пространственного присутствия благодаря динамическому панорамированию.

Плавные переходы панорамирования через Tween

Phaser позволяет использовать твинны для плавного изменения pan:

this.tweens.add({
    targets: music,
    pan: { from: -1, to: 1 },
    duration: 2000,
    yoyo: true,
    repeat: -1
});

Твин создаёт бесконечное колебание источника звука между левым и правым каналом, что подходит для имитации движущихся объектов или окружения.