О чем этот пример
Звук — это мощный инструмент для создания атмосферы и отзывчивого геймплея. В этой статье мы разберем, как интегрировать звуковые эффекты для действий персонажа, таких как ходьба и сбор предметов, используя встроенную аудиосистему Phaser. Вы научитесь загружать звуки, управлять их воспроизведением и привязывать к логике игры, чтобы каждый шаг и взаимодействие ощущались по-настоящему.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
constructor ()
{
super();
}
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('sky', 'src/games/firstgame/assets/sky.png');
this.load.image('ground', 'src/games/firstgame/assets/platform.png');
this.load.image('star', 'src/games/firstgame/assets/star.png');
this.load.image('bomb', 'src/games/firstgame/assets/bomb.png');
this.load.spritesheet('dude', 'src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 });
this.load.setPath('assets/audio/SoundEffects');
this.load.audio('walk1', 'steps1.mp3');
this.load.audio('walk2', 'steps2.mp3');
this.load.audio('star', 'pickup.wav');
}
create ()
{
this.walk1 = this.sound.add('walk1');
this.walk2 = this.sound.add('walk2');
this.add.image(400, 300, 'sky');
const platforms = this.physics.add.staticGroup();
platforms.create(400, 568, 'ground').setScale(2).refreshBody();
platforms.create(600, 400, 'ground');
platforms.create(50, 250, 'ground');
platforms.create(750, 220, 'ground');
this.player = this.physics.add.sprite(100, 450, 'dude');
this.player.setBounce(0.2);
this.player.setCollideWorldBounds(true);
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'turn',
frames: [ { key: 'dude', frame: 4 } ],
frameRate: 20
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
this.cursors = this.input.keyboard.createCursorKeys();
const stars = this.physics.add.group({
key: 'star',
repeat: 11,
setXY: { x: 12, y: 0, stepX: 70 }
});
stars.children.forEach(function (child) {
child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
});
this.physics.add.collider(this.player, platforms);
this.physics.add.collider(stars, platforms);
this.physics.add.overlap(this.player, stars, this.collectStar, null, this);
}
update ()
{
if (this.cursors.left.isDown)
{
this.player.setVelocityX(-160);
this.player.anims.play('left', true);
if (!this.walk1.isPlaying)
{
this.walk1.play();
}
}
else if (this.cursors.right.isDown)
{
this.player.setVelocityX(160);
this.player.anims.play('right', true);
if (!this.walk2.isPlaying)
{
this.walk2.play();
}
}
else
{
this.player.setVelocityX(0);
this.player.anims.play('turn');
}
if (this.cursors.up.isDown && this.player.body.touching.down)
{
this.player.setVelocityY(-330);
}
}
collectStar (player, star)
{
star.disableBody(true, true);
this.sound.play('star');
}
}
const config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
backgroundColor: '#2d2d2d',
scene: Example,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
}
};
const game = new Phaser.Game(config);
Подготовка и загрузка аудиоресурсов
Перед использованием любых звуков их необходимо загрузить в кэш игры. Это делается в методе preload сцены. Phaser позволяет гибко настраивать пути для загрузки и поддерживает различные форматы аудиофайлов.
В нашем примере сначала загружаются изображения и спрайтшит для персонажа, а затем — звуковые эффекты. Обратите внимание на использование this.load.setPath для установки базового пути для последующих аудиофайлов, что упрощает организацию ресурсов.
preload ()
{
// ... загрузка изображений ...
this.load.setPath('assets/audio/SoundEffects');
this.load.audio('walk1', 'steps1.mp3');
this.load.audio('walk2', 'steps2.mp3');
this.load.audio('star', 'pickup.wav');
}Создание и хранение звуковых объектов
После загрузки звуков в методе create мы создаем из них готовые к воспроизведению объекты. Это делается с помощью метода this.sound.add. Созданные объекты удобно сохранить в свойствах сцены (например, this.walk1) для последующего доступа.
Важный момент: создание объекта звука не означает его немедленного воспроизведения. Этот шаг лишь подготавливает звук, позволяя нам в дальнейшем управлять его запуском, паузой и другими параметрами.
create ()
{
this.walk1 = this.sound.add('walk1');
this.walk2 = this.sound.add('walk2');
// ... остальная инициализация сцены ...
}Связывание звуков с движением персонажа
Логика воспроизведения звуков ходьбы размещена в методе update, который вызывается на каждом кадре. Мы проверяем состояние клавиш управления и воспроизводим соответствующий звук, но только если он еще не играет. Это предотвращает наложение множества одинаковых звуковых дорожек друг на друга.
Ключевую роль здесь играет проверка !this.walk1.isPlaying. Без нее звук запускался бы каждый кадр, пока нажата клавиша, что создавало бы неприятный шум.
if (this.cursors.left.isDown)
{
this.player.setVelocityX(-160);
this.player.anims.play('left', true);
if (!this.walk1.isPlaying)
{
this.walk1.play();
}
}
else if (this.cursors.right.isDown)
{
this.player.setVelocityX(160);
this.player.anims.play('right', true);
if (!this.walk2.isPlaying)
{
this.walk2.play();
}
}Воспроизведение звуков при взаимодействии с объектами
Для разовых событий, таких как сбор звезды, нет необходимости создавать и хранить отдельный звуковой объект. Вместо этого можно использовать метод this.sound.play, который создает и сразу воспроизводит звук по его ключу. Этот способ идеален для звуков, которые не требуют тонкого контроля (например, паузы) после запуска.
В нашем примере звук сбора звезды запускается внутри функции обратного вызова collectStar, которая срабатывает при коллизии персонажа и звезды.
collectStar (player, star)
{
star.disableBody(true, true);
this.sound.play('star');
}Что попробовать дальше
Интеграция звуков в Phaser — процесс прямой и логичный. Основные шаги: загрузить, создать объект (или воспроизвести сразу) и запустить в нужный момент игровой логики. Для экспериментов попробуйте добавить звук прыжка, изменить громкость или пространственное звучание (pan) для разных эффектов, а также реализовать случайный выбор из нескольких звуков шагов для большего разнообразия.