Audio Sprite In Phaser
Posted By :Ishaan Madan |30th April 2018
Introduction
No game in the world is complete without some special sounds. The sound during a game not only enhances the user experience but also helps to gain prolonged attention of a user. This blog describes us a way through which we can add sounds in our game using phaser.
In our current example, we will be loading multiple buttons such as 'numKey', 'escape', 'shot', 'squit' . On click of this button we will be playing different sort of audios.
The buttons are created by calling makeButton function for each function and passing button meta data as arguments. The buttons are added using "game.add.button" method of the 'add' class. Also, the makeButton function is used to add text for each button which acts as button name. The text is added using "game.add.bitmapText" method with 'nokia' font loaded in preload.
To load the audio we will be using "game.load.audio" method in the preload function. Thereafter in create function we will be creating an audio object 'fx' which will be used to perform operations over an audio.
Subsequently, we will be creating audios with different identifiers using "fx.addMarker()" function which takes parameters like identifier, start time and duration of the audio. Eventually, there will be creating buttons and will play various audios on their click using "fx.play()" method
To cover up all the above mentioned steps, the final code is summarized below.
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });
function preload() {
game.load.image('title', 'assets/pics/catastrophi.png');
game.load.spritesheet('button', 'assets/buttons/flixel-button.png', 80, 20);
game.load.bitmapFont('nokia', 'assets/fonts/bitmapFonts/nokia16black.png', 'assets/fonts/bitmapFonts/nokia16black.xml');
// game.load.audio('sfx', [ 'assets/audio/SoundEffects/fx_mixdown.mp3', 'assets/audio/SoundEffects/fx_mixdown.ogg' ]);
game.load.audio('sfx', 'assets/audio/SoundEffects/fx_mixdown.ogg');
}
var fx;
function create() {
game.add.image(0, 0, 'title');
// Here we set-up our audio sprite
fx = game.add.audio('sfx');
fx.allowMultiple = true;
// And this defines the markers.
// They consist of a key (for replaying), the time the sound starts and the duration, both given in seconds.
// You can also set the volume and loop state, although we don't use them in this example (see the docs)
fx.addMarker('alien death', 1, 1.0);
fx.addMarker('boss hit', 3, 0.5);
fx.addMarker('escape', 4, 3.2);
fx.addMarker('meow', 8, 0.5);
fx.addMarker('numkey', 9, 0.1);
fx.addMarker('ping', 10, 1.0);
fx.addMarker('death', 12, 4.2);
fx.addMarker('shot', 17, 1.0);
fx.addMarker('squit', 19, 0.3);
// Make some buttons to trigger the sounds
makeButton('alien death', 600, 100);
makeButton('boss hit', 600, 140);
makeButton('escape', 600, 180);
makeButton('meow', 600, 220);
makeButton('numkey', 600, 260);
makeButton('ping', 600, 300);
makeButton('death', 600, 340);
makeButton('shot', 600, 380);
makeButton('squit', 600, 420);
}
function makeButton(name, x, y) {
var button = game.add.button(x, y, 'button', click, this, 0, 1, 2);
button.name = name;
button.scale.set(2, 1.5);
button.smoothed = false;
var text = game.add.bitmapText(x, y + 7, 'nokia', name, 16);
text.x += (button.width / 2) - (text.textWidth / 2);
}
function click(button) {
fx.play(button.name);
}
Thanks
Ready to innovate ? Let's get in touch
Follow us
We are ISO 9001:2015 Certified
Resources
Connect with us
Follow us
