О чем этот пример
Работа со звуком — ключевой элемент создания атмосферы и геймплейной обратной связи в играх. Phaser предоставляет мощный и гибкий API для загрузки, управления и обработки аудио. Эта статья на примере официального демо покажет, как использовать основные события и методы аудиосистемы: от базового воспроизведения и паузы до работы с глобальными настройками, аудиоспрайтами и плавными переходами. Вы научитесь создавать сложные аудиопоследовательности и реагировать на изменения состояния звука.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
/**
* @author Pavle Goloskokovic <pgoloskokovic@gmail.com> (http://prunegames.com)
*
* Prometheus Brings Fire To Mankind - Painting by Heinrich Füger, 1817, Public Domain
* The Creatures of Prometheus, Op. 43, Overture - Music by Ludwig van Beethoven, 1801, Public Domain
*/
var text;
var first;
var second;
var audioSprite;
class Example extends Phaser.Scene
{
constructor ()
{
super();
}
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
const head = document.getElementsByTagName('head')[0];
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy';
head.appendChild(link);
this.load.image('prometheus', 'assets/pics/Prometheus Brings Fire To Mankind.jpg');
this.load.audio('overture', [
'assets/audio/Ludwig van Beethoven - The Creatures of Prometheus, Op. 43/Overture.ogg',
'assets/audio/Ludwig van Beethoven - The Creatures of Prometheus, Op. 43/Overture.mp3'
],{
instances: 2
});
this.load.audioSprite('creatures', 'assets/audio/Ludwig van Beethoven - The Creatures of Prometheus, Op. 43/sprites.json', [
'assets/audio/Ludwig van Beethoven - The Creatures of Prometheus, Op. 43/sprites.ogg',
'assets/audio/Ludwig van Beethoven - The Creatures of Prometheus, Op. 43/sprites.mp3'
]);
}
create ()
{
this.sound.pauseOnBlur = false;
var prometheus = this.add.image(400, 300, 'prometheus');
prometheus.setScale(600/prometheus.height);
text = this.add.text(400, 300, 'Loading...', {
fontFamily: '\'Sorts Mill Goudy\', serif',
fontSize: 80,
color: '#fff',
align: 'center'
});
text.setOrigin(0.5);
text.setShadow(0, 1, "#888", 2);
first = this.sound.add('overture', { loop: true });
second = this.sound.add('overture', { loop: true });
audioSprite = this.sound.addAudioSprite('creatures');
this.enableInput();
}
chain(i)
{
return function()
{
if (tests[i])
{
tests[i].call(this, this.chain(++i));
}
else
{
text.setText('Complete!');
this.time.addEvent({
delay: 5000,
callback: this.enableInput,
callbackScope: this
});
}
}.bind(this);
}
enableInput()
{
text.setText('Click to start');
this.input.once('pointerdown', function (pointer)
{
tests[0].call(this, this.chain(1));
}, this);
}
}
const config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
scene: Example,
audio: {
disableWebAudio: true
}
};
const game = new Phaser.Game(config);
var tests = [
function (fn)
{
first.once('play', function (sound)
{
text.setText('Playing');
this.time.addEvent({
delay: 2000,
callback: fn,
callbackScope: this
});
}, this);
first.play();
},
function (fn)
{
first.once('pause', function (sound)
{
text.setText('Paused');
this.time.addEvent({
delay: 1500,
callback: fn,
callbackScope: this
});
}, this);
first.pause();
},
function(fn)
{
first.once('resume', function (sound)
{
text.setText('Resuming');
this.time.addEvent({
delay: 2000,
callback: fn,
callbackScope: this
});
}, this);
first.resume();
},
function(fn)
{
first.once('stop', function (sound)
{
text.setText('Stopped');
this.time.addEvent({
delay: 1500,
callback: fn,
callbackScope: this
});
}, this);
first.stop();
},
function(fn)
{
first.once('play', function (sound)
{
text.setText('Play from start');
this.time.addEvent({
delay: 2000,
callback: fn,
callbackScope: this
});
}, this);
first.play();
},
function(fn)
{
first.once('rate', function (sound, value)
{
text.setText('Speed up rate');
this.time.addEvent({
delay: 2000,
callback: fn,
callbackScope: this
});
}, this);
first.rate = 1.5;
},
function(fn)
{
first.once('detune', function (sound, value)
{
text.setText('Speed up detune');
this.time.addEvent({
delay: 2000,
callback: fn,
callbackScope: this
});
}, this);
first.detune = 600;
},
function(fn)
{
first.once('rate', function (sound, value)
{
text.setText('Slow down rate');
this.time.addEvent({
delay: 2000,
callback: fn,
callbackScope: this
});
}, this);
first.rate = 1;
},
function(fn)
{
first.once('detune', function (sound, value)
{
text.setText('Slow down detune');
this.time.addEvent({
delay: 2000,
callback: fn,
callbackScope: this
});
}, this);
first.detune = 0;
},
function(fn)
{
this.tweens.add({
onStart: function ()
{
text.setText('Fade out');
},
targets: first,
volume: 0,
ease: 'Linear',
duration: 2000,
onComplete: fn
});
},
function(fn)
{
this.tweens.add({
onStart: function ()
{
text.setText('Fade in');
},
targets: first,
volume: 1,
ease: 'Linear',
duration: 2000,
onComplete: fn
});
},
function(fn)
{
first.once('mute', function()
{
text.setText('Mute');
this.time.addEvent({
delay: 1500,
callback: fn,
callbackScope: this
});
}, this);
first.mute = true;
},
function(fn)
{
first.once('mute', function()
{
text.setText('Unmute');
this.time.addEvent({
delay: 2000,
callback: fn,
callbackScope: this
});
}, this);
first.mute = false;
},
function(fn)
{
first.once('volume', function()
{
text.setText('Half volume');
this.time.addEvent({
delay: 2000,
callback: fn,
callbackScope: this
});
}, this);
first.volume = 0.5;
},
function(fn)
{
first.once('volume', function()
{
text.setText('Full volume');
this.time.addEvent({
delay: 2000,
callback: fn,
callbackScope: this
});
}, this);
first.volume = 1;
},
function(fn)
{
first.once('seek', function()
{
text.setText('Seek to start');
this.time.addEvent({
delay: 2000,
callback: fn,
callbackScope: this
});
}, this);
first.seek = 0;
},
function(fn)
{
second.once('play', function()
{
text.setText('Play 2nd');
this.time.addEvent({
delay: 2000,
callback: fn,
callbackScope: this
});
}, this);
second.play();
},
function(fn)
{
this.sound.once('mute', function (soundManager, value)
{
text.setText('Mute global');
this.time.addEvent({
delay: 1500,
callback: fn,
callbackScope: this
});
}, this);
this.sound.mute = true;
},
function(fn)
{
this.sound.once('mute', function (soundManager, value)
{
text.setText('Unmute global');
this.time.addEvent({
delay: 2000,
callback: fn,
callbackScope: this
});
}, this);
this.sound.mute = false;
},
function(fn)
{
this.sound.once('volume', function (soundManager, value)
{
text.setText('Half volume global');
this.time.addEvent({
delay: 2000,
callback: fn,
callbackScope: this
});
}, this);
this.sound.volume = 0.5;
},
function(fn)
{
this.tweens.add({
onStart: function ()
{
text.setText('Fade out global');
},
targets: this.sound,
volume: 0,
ease: 'Linear',
duration: 2000,
onComplete: fn
});
},
function(fn)
{
this.tweens.add({
onStart: function ()
{
text.setText('Fade in global');
},
targets: this.sound,
volume: 1,
ease: 'Linear',
duration: 2000,
onComplete: fn
});
},
function(fn)
{
this.sound.once('pauseall', function (soundManager)
{
text.setText('Pause all');
this.time.addEvent({
delay: 1500,
callback: fn,
callbackScope: this
});
}, this);
this.sound.pauseAll();
},
function(fn)
{
this.sound.once('resumeall', function (soundManager)
{
text.setText('Resume all');
this.time.addEvent({
delay: 2000,
callback: fn,
callbackScope: this
});
}, this);
this.sound.resumeAll();
},
function(fn)
{
this.sound.once('stopall', function (soundManager)
{
text.setText('Stop all');
this.time.addEvent({
delay: 1500,
callback: fn,
callbackScope: this
});
}, this);
this.sound.stopAll();
},
function(fn)
{
audioSprite.once('play', function (sound)
{
text.setText('Play sprite');
this.time.addEvent({
delay: 1500,
callback: fn,
callbackScope: this
});
}, this);
audioSprite.play('07');
},
function(fn)
{
audioSprite.once('pause', function (sound)
{
text.setText('Pause sprite');
this.time.addEvent({
delay: 1000,
callback: fn,
callbackScope: this
});
}, this);
audioSprite.pause();
},
function(fn)
{
audioSprite.once('resume', function (sound)
{
text.setText('Resume sprite');
this.time.addEvent({
delay: 1500,
callback: fn,
callbackScope: this
});
}, this);
audioSprite.resume();
},
function(fn)
{
audioSprite.once('play', function (sound)
{
text.setText('Multiple sprites');
this.time.addEvent({
delay: 10000,
callback: fn,
callbackScope: this
});
}, this);
var sounds = ['01', '02', '03', '03', '05'];
for (var i=0; i<sounds.length; i++)
{
this.time.addEvent({
delay: i * 2000,
callback: audioSprite.play.bind(audioSprite, sounds[i]),
callbackScope: audioSprite
});
}
},
function(fn)
{
audioSprite.once('play', function (sound)
{
text.setText('Loop sprite');
this.time.addEvent({
delay: 4000,
callback: fn,
callbackScope: this
});
}, this);
audioSprite.play('06', {
loop: true
});
},
function(fn)
{
this.tweens.add({
onStart: function ()
{
text.setText('Fade out sprite');
},
targets: audioSprite,
volume: 0,
ease: 'Linear',
duration: 4000,
onComplete: function()
{
audioSprite.volume = 1;
audioSprite.stop();
fn();
}
});
}
];
Настройка сцены и загрузка ресурсов
Первым шагом является загрузка всех необходимых аудиоресурсов в методе preload() сцены. В примере загружаются два типа аудио: обычный звуковой файл и аудиоспрайт. Важно отметить настройку instances: 2 для загружаемого трека, которая позволяет создать несколько независимых экземпляров воспроизведения.
Также в конфигурации игры отключается WebAudio (disableWebAudio: true), что заставляет Phaser использовать HTML5 Audio. Это может быть полезно для специфических случаев совместимости.
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('prometheus', 'assets/pics/Prometheus Brings Fire To Mankind.jpg');
this.load.audio('overture', [
'assets/audio/Ludwig van Beethoven - The Creatures of Prometheus, Op. 43/Overture.ogg',
'assets/audio/Ludwig van Beethoven - The Creatures of Prometheus, Op. 43/Overture.mp3'
],{
instances: 2
});
this.load.audioSprite('creatures', 'assets/audio/Ludwig van Beethoven - The Creatures of Prometheus, Op. 43/sprites.json', [
'assets/audio/Ludwig van Beethoven - The Creatures of Prometheus, Op. 43/sprites.ogg',
'assets/audio/Ludwig van Beethoven - The Creatures of Prometheus, Op. 43/sprites.mp3'
]);
}const config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
scene: Example,
audio: {
disableWebAudio: true
}
};Создание звуковых объектов и цепочка событий
В методе create() создаются экземпляры звуков и настраивается управление. Ключевая особенность данного примера — использование цепочки (chain) функций-тестов из массива tests. Каждая функция демонстрирует определённое действие со звуком (воспроизведение, пауза, изменение параметров) и по событию onComplete или через таймер запускает следующую функцию в цепочке.
Создаются два экземпляра одного и того же звука overture и один экземпляр аудиоспрайта creatures. Это позволяет управлять ими независимо.
create ()
{
this.sound.pauseOnBlur = false;
first = this.sound.add('overture', { loop: true });
second = this.sound.add('overture', { loop: true });
audioSprite = this.sound.addAudioSprite('creatures');
this.enableInput();
}chain(i)
{
return function()
{
if (tests[i])
{
tests[i].call(this, this.chain(++i));
}
else
{
text.setText('Complete!');
this.time.addEvent({
delay: 5000,
callback: this.enableInput,
callbackScope: this
});
}
}.bind(this);
}Управление отдельным звуковым экземпляром
Основные операции с объектом Sound (экземпляром first или second) включают управление воспроизведением и свойствами. Phaser генерирует события при изменении состояния, на которые можно подписаться через once. Это полезно для синхронизации логики игры со звуком.
- play(), pause(), resume(), stop(): контроль воспроизведения.
- rate и detune: изменение скорости и высоты тона звука.
- volume и mute: управление громкостью и заглушением.
- seek: перемотка к определённой временной метке.
first.once('play', function (sound)
{
text.setText('Playing');
this.time.addEvent({
delay: 2000,
callback: fn,
callbackScope: this
});
}, this);
first.play();first.rate = 1.5;
first.detune = 600;first.volume = 0.5;
first.mute = true;Глобальное управление звуком и твины
Менеджер звуков this.sound позволяет применять настройки ко всем звукам в игре одновременно. Это удобно для реализации опций в меню (общая громкость, заглушение).
- this.sound.mute, this.sound.volume: глобальные настройки.
- pauseAll(), resumeAll(), stopAll(): массовое управление воспроизведением.
Плавные изменения параметров, такие как затухание (fade), легко реализуются с помощью системы Tween. Можно анимировать свойства как отдельных звуков (first.volume), так и глобального менеджера (this.sound.volume).
this.sound.once('mute', function (soundManager, value)
{
text.setText('Mute global');
this.time.addEvent({
delay: 1500,
callback: fn,
callbackScope: this
});
}, this);
this.sound.mute = true;this.tweens.add({
onStart: function ()
{
text.setText('Fade out');
},
targets: first,
volume: 0,
ease: 'Linear',
duration: 2000,
onComplete: fn
});Работа с аудиоспрайтами
Аудиоспрайт — это один аудиофайл, содержащий несколько звуковых фрагментов (спрайтов), которые можно проигрывать по отдельности. Это эффективно для загрузки множества коротких звуков (например, эффектов ударов или шагов). В JSON-файле описываются метки (например, '01', '07') и временные интервалы для каждого фрагмента.
Метод this.sound.addAudioSprite('creatures') создаёт специальный объект, у которого метод play() принимает имя спрайта. С ним можно работать так же, как с обычным звуком: ставить на паузу, менять громкость, навешивать события.
audioSprite = this.sound.addAudioSprite('creatures');audioSprite.once('play', function (sound)
{
text.setText('Play sprite');
this.time.addEvent({
delay: 1500,
callback: fn,
callbackScope: this
});
}, this);
audioSprite.play('07');audioSprite.play('06', {
loop: true
});Что попробовать дальше
Аудиосистема Phaser предоставляет детальный контроль над звуком на всех уровнях: от отдельных экземпляров до глобальных настроек. Использование событий (play, pause, volume и др.) позволяет создавать сложные интерактивные сценарии, синхронизированные с игровым процессом. Аудиоспрайты оптимизируют загрузку и управление группами звуков. Для экспериментов попробуйте: создать систему реактивных звуковых эффектов, меняющих параметры в реальном времени в зависимости от действий игрока; реализовать динамическую музыку, плавно переключающуюся между треками; или построить цепочку звуков с помощью промисов или async/await для более читаемого кода последовательностей.