О чем этот пример
Создание сложных музыкальных композиций или звуковых ландшафтов в играх часто требует точной синхронизации нескольких аудиодорожек. Прямой последовательный запуск может привести к рассинхронизации из-за задержек декодирования. В этом примере из официальной коллекции Phaser демонстрируется профессиональный подход: использование маркеров, параметра `delay` и события `looped` для безупречного последовательного вступления аудио stem'ов (отдельных дорожек) в идеальном ритме. Эта техника незаменима для ритм-игр, динамичных саундтреков или любого случая, где требуется точный контроль над временем воспроизведения нескольких звуков.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
bass;
gui;
bottomSpeaker;
middleSpeaker;
topRightSpeaker;
topLeftSpeaker;
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.bitmapFont('atari-classic', 'assets/fonts/bitmap/atari-classic.png', 'assets/fonts/bitmap/atari-classic.xml');
this.load.image('streets', 'assets/sprites/cyberpunk-street.png');
this.load.atlas('speakers', 'assets/sprites/speakers/speakers.png', 'assets/sprites/speakers/speakers.json');
this.load.audio('bass', [ 'assets/audio/tech/bass.ogg', 'assets/audio/tech/bass.mp3' ]);
this.load.audio('drums', [ 'assets/audio/tech/drums.ogg', 'assets/audio/tech/drums.mp3' ]);
this.load.audio('percussion', [ 'assets/audio/tech/percussion.ogg', 'assets/audio/tech/percussion.mp3' ]);
this.load.audio('synth1', [ 'assets/audio/tech/synth1.ogg', 'assets/audio/tech/synth1.mp3' ]);
this.load.audio('synth2', [ 'assets/audio/tech/synth2.ogg', 'assets/audio/tech/synth2.mp3' ]);
this.load.audio('top1', [ 'assets/audio/tech/top1.ogg', 'assets/audio/tech/top1.mp3' ]);
this.load.audio('top2', [ 'assets/audio/tech/top2.ogg', 'assets/audio/tech/top2.mp3' ]);
}
create ()
{
const streets = this.add.image(0, 0, 'streets');
streets.setScale(600 / 192);
streets.setOrigin(0);
this.topLeftSpeaker = this.add.image(445, 332, 'speakers', 'top-left');
this.topLeftSpeaker.setOrigin(1, 0.46);
this.topRightSpeaker = this.add.image(445, 332, 'speakers', 'top-right');
this.topRightSpeaker.setOrigin(0, 0.975);
this.middleSpeaker = this.add.image(443, 417, 'speakers', 'middle');
this.middleSpeaker.setOrigin(0.5, 1);
this.bottomSpeaker = this.add.image(443, 504, 'speakers', 'bottom');
this.bottomSpeaker.setOrigin(0.5, 1);
this.bass = this.sound.add('bass');
const drums = this.sound.add('drums');
const percussion = this.sound.add('percussion');
const synth1 = this.sound.add('synth1');
const synth2 = this.sound.add('synth2');
const top1 = this.sound.add('top1');
const top2 = this.sound.add('top2');
this.gui = new dat.GUI();
const sm = this.gui.addFolder('Sound Manager');
sm.add(this.sound, 'rate', 0.5, 2).listen();
sm.add(this.sound, 'detune', -1200, 1200).step(50).listen();
const loopMarker = {
name: 'loop',
start: 0,
duration: 7.68,
config: {
loop: true
}
};
if (this.sound.locked)
{
const text = this.add.bitmapText(400, 70, 'atari-classic', 'Tap to start', 40);
text.x -= Math.round(text.width / 2);
text.y -= Math.round(text.height / 2);
this.sound.once('unlocked', function (soundManager)
{
text.visible = false;
this.startStem.call(this, this.bass, 'Bass', this.bottomSpeaker);
}, this);
}
else
{
this.startStem.call(this, this.bass, 'Bass', this.bottomSpeaker);
}
this.bass.addMarker(loopMarker);
// Delay option can only be passed in config
this.bass.play('loop', {
delay: 0
});
// Below won't work
// sound.delay = delay;
// sound.play('loop');
this.bass.once('looped', function (sound)
{
this.startStem.call(this, drums, 'Drums', this.middleSpeaker);
}, this);
drums.addMarker(loopMarker);
drums.play('loop', {
delay: loopMarker.duration
});
drums.once('looped', function (sound)
{
this.startStem.call(this, percussion, 'Percussion', this.middleSpeaker);
}, this);
percussion.addMarker(loopMarker);
percussion.play('loop', {
delay: loopMarker.duration * 2
});
percussion.once('looped', function (sound)
{
this.startStem.call(this, synth1, 'Synth 1', this.topRightSpeaker);
}, this);
synth1.addMarker(loopMarker);
synth1.play('loop', {
delay: loopMarker.duration * 3
});
synth1.once('looped', function (sound)
{
this.startStem.call(this, synth2, 'Synth 2', this.topRightSpeaker);
}, this);
synth2.addMarker(loopMarker);
synth2.play('loop', {
delay: loopMarker.duration * 4
});
synth2.once('looped', function (sound)
{
this.startStem.call(this, top1, 'Top 1', this.topLeftSpeaker);
}, this);
top1.addMarker(loopMarker);
top1.play('loop', {
delay: loopMarker.duration * 5
});
top1.once('looped', function (sound)
{
this.startStem.call(this, top2, 'Top 2', this.topLeftSpeaker);
sm.open();
}, this);
top2.addMarker(loopMarker);
top2.play('loop', {
delay: loopMarker.duration * 6
});
}
update ()
{
this.middleSpeaker.y = this.bottomSpeaker.y - this.bottomSpeaker.height * this.bottomSpeaker.scaleY;
this.topLeftSpeaker.y =
this.topRightSpeaker.y =
this.middleSpeaker.y - this.middleSpeaker.height * this.middleSpeaker.scaleY;
this.tweens.setGlobalTimeScale(this.bass.totalRate);
}
startStem (stem, text, speaker)
{
const s = this.gui.addFolder(text);
s.add(stem, 'seek', 0, stem.duration).step(0.01).listen();
s.add(stem, 'mute').listen();
s.open();
this.tweens.add({
targets: speaker,
scaleX: 1.3,
scaleY: 1.1,
duration: 241,
ease: 'Sine.easeInOut',
repeat: -1,
yoyo: true
});
}
}
/**
* @author Pavle Goloskokovic <pgoloskokovic@gmail.com> (http://prunegames.com)
*
* Cyberpunk Street Environment by Luis Zuno (https://www.patreon.com/posts/8303915) / CC-BY-3.0
*/
const config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
backgroundColor: '#838282',
scene: Example,
pixelArt: true,
audio: {
noAudio: true
}
};
const game = new Phaser.Game(config);
Подготовка сцены и загрузка ресурсов
Класс Example расширяет Phaser.Scene. В методе preload загружаются все необходимые ресурсы: фон, спрайты колонок и набор аудиофайлов в двух форматах (OGG и MP3) для кросс-браузерной совместимости.
this.load.audio('bass', [ 'assets/audio/tech/bass.ogg', 'assets/audio/tech/bass.mp3' ]);Важная деталь конфигурации игры — объект audio с параметром noAudio: true. Это указывает Phaser создать заглушку для аудиосистемы, если Web Audio API отключен или недоступен, что позволяет коду выполняться без ошибок, но без звука.
const config = {
// ... другие настройки
audio: {
noAudio: true
}
};Создание маркера и основная логика синхронизации
В методе create после добавления фона и спрайтов динамиков создаются объекты звуков через this.sound.add(). Ключевой элемент — определение маркера (marker). Маркер именует сегмент аудио и задаёт его свойства, такие как точка начала и длительность.
const loopMarker = {
name: 'loop',
start: 0,
duration: 7.68,
config: {
loop: true
}
};Этот маркер с именем 'loop' определяет сегмент длиной 7.68 секунды, который будет зациклен. Далее этот маркер добавляется к каждому звуковому объекту с помощью метода addMarker.
Основная хитрость синхронизации заключается в использовании параметра delay в конфигурации метода play. Этот параметр можно задать только при вызове play, как показано в комментариях кода. Первый звук (bass) запускается без задержки.
this.bass.play('loop', {
delay: 0
});Каскадное вступление дорожек по событию
Чтобы следующая дорожка вступила ровно после первого завершенного цикла предыдущей, используется событие looped. Оно срабатывает каждый раз, когда зацикленный звук завершает проигрывание своего сегмента и начинает его заново.
this.bass.once('looped', function (sound)
{
this.startStem.call(this, drums, 'Drums', this.middleSpeaker);
}, this);Обратите внимание на использование once, а не on. Это гарантирует, что обработчик сработает только один раз — после первого цикла. Внутри обработчика запускается следующая дорожка (drums), но с задержкой, равной длительности маркера. Таким образом, она начнётся ровно в тот момент, когда бас начнёт свой второй цикл.
drums.play('loop', {
delay: loopMarker.duration
});Каждая последующая дорожка получает задержку, умноженную на свой порядковый номер, создавая эффект постепенного наложения звуков. Это и обеспечивает идеальную синхронизацию.
Визуальная обратная связь и управление
Метод startStem выполняет две задачи. Во-первых, он добавляет для каждого звука панель управления через библиотеку dat.GUI, позволяя в реальном времени контролировать позицию воспроизведения (seek) и отключение звука (mute).
s.add(stem, 'seek', 0, stem.duration).step(0.01).listen();
s.add(stem, 'mute').listen();Во-вторых, он запускает твин (анимацию) для спрайта колонки, связанной с этой дорожкой. Колонка будет плавно пульсировать в такт музыке, создавая визуальную связь.
this.tweens.add({
targets: speaker,
scaleX: 1.3,
scaleY: 1.1,
duration: 241,
ease: 'Sine.easeInOut',
repeat: -1,
yoyo: true
});В методе update происходит выравнивание позиций динамиков относительно друг друга, чтобы они визуально составляли единую колонку. Также здесь задаётся глобальная шкала времени для всех твинов, синхронизированная с общей скоростью (totalRate) основного звука bass. Это значит, что если мы ускорим или замедлим весь звук через панель управления, анимация пульсации также изменит скорость, оставаясь в такт.
this.tweens.setGlobalTimeScale(this.bass.totalRate);Что попробовать дальше
Пример демонстрирует мощный и надежный паттерн для синхронизации зацикленных аудиодорожек в Phaser. Комбинация маркеров, параметра delay и события looped позволяет создавать сложные, точно синхронизированные аудиокомпозиции. Для экспериментов попробуйте изменить длину loopMarker.duration, добавить больше звуковых слоёв или привязать запуск дорожек не к событию looped, а к игровым событиям (например, достижению определенного счета). Также можно модифицировать визуальную обратную связь, заставив спрайты реагировать на громкость (volume) или частотные характеристики звука.