How to assign key input for sounds in Phaser.

sam89 · August 27, 2014

Hi. I am actually new to the Phaser framework and I am developing a game for my final year project. The game I am developing would not have any graphics or animations because the game is for the blind users. It will be based on sound. I am wondering on how to assign keyboard input for each sounds? I want that when a user clicks a particular key and the sound plays. Also after a sound plays, I want the next sound to be played after the user input a key and not plays automatically. How am I to do this in Phaser? Thank you in advanced.

ZoomBox · August 27, 2014

What you are asking is pretty basic in term of devloppement: Check the examples here [ http://examples.phaser.io/ ] and it'll be done quickly.

Check for the Audio and the Input examples.

sam89 · August 27, 2014

Thank you so much. I will give a look on the examples.

sam89 · August 30, 2014

Hi there. Sorry to bother again. I used the example as u send me but I'm having a problem now. The sound is not playing when i hit the key. The error I am getting is "addGuitar is not defined". Can please tell me what is wrong with it. Thank you so much in advanced. Below are the code for both in the index.html and the main.js

index.html

<html>

<head>

<title>Recognise the Sounds</title>

</script>

</head>

<body>

</body>

</html>

main.js

var game = new Phaser.Game(400,490, Phaser.AUTO, 'gameDiv');

var mainState = {

preload: function() {

game.stage.backgroundColor ='#71c5cf'

game.load.audio('start', 'assets/guitar.wav');

game.load.audio('second', 'assets/drum.wav');

},

var key1;

create: function(){

key1 = game.input.keyboard.addKey(Phaser.Keyboard.ONE);

this.jumpSound = game.add.audio('start');

key1.onDown.add(addGuitar, this);

},

update: function() {

},

addGuitar: function() {

this.jumpSound.play();

},

};

game.state.add('main', mainState);

game.state.start('main');

Sebi · August 30, 2014

key1.onDown.add(this.addGuitar, this);

sam89 · August 31, 2014

Thanks Sebastian..! It works.. Thank you so much..!!

sam89 · September 18, 2014

Hi there. Now I want to make sure that if other keys ( which is key that is not 1 2 3 or 4), I would like a sound to be played to tell the player the key they press is wrong. Example will be when the player pressed key 5 or alphabet T, a sound will be played. This will apply to all the other keys as well. I understand how it works but I don't know how it works in a Phaser.

lewster32 · September 18, 2014

You can use game.input.keyboard.onDownCallback to do this, but you'll have to do a bit more work to ensure you don't end up getting both sounds playing at once, as this is fired every time any key is pressed, regardless of whether it's a right one or not. I think in your case it'd be more reliable to use this method alone and check the key code returned:

this.game.input.keyboard.onDownCallback = function(e) {	var keycode = e.keycode || e.which;	switch (keycode) {		case Phaser.Keyboard.ONE: 			// play sound for 1   			break;		case Phaser.Keyboard.TWO: 			// play sound for 2   			break;		case Phaser.Keyboard.THREE: 			// play sound for 3   			break;		case Phaser.Keyboard.FOUR: 			// play sound for 4   			break;		default:			// play sound for wrong key   			break;	}}

sam89 · September 19, 2014

Hi,thanks for the reply. I have applied the changes to the code based on your recommendation but the sound is not working. The error I am getting is "Uncaught TypeError: Cannot read property 'add' of undefined ". Below is my line of code. Thanks in advanced.

main.js

var game = new Phaser.Game(400,490, Phaser.AUTO, 'gameDiv');

var key1;

var key2;

var key3;

var key4;

var mainState = {

preload: function() {

game.stage.backgroundColor ='#71c5cf'

game.load.audio('start', 'assets/guitar.wav');

game.load.audio('second', 'assets/drum.wav');

game.load.audio('third', 'assets/flute.wav');

game.load.audio('fourth', 'assets/piano.wav');

game.load.audio('default' , 'assets/test.wav');

},

create: function() {

this.game.input.keyboard.onDownCallback = function(e) {

var keycode = e.keycode || e.which;

switch(keycode) {

case Phaser.Keyboard.ONE:

key1 = game.input.keyboard.addKey(Phaser.Keyboard.ONE);

this.jumpSound = game.add.audio('start');

key1.onDownCallback.add(this.addGuitar, this);

break;

case Phaser.Keyboard.TWO:

key2 = game.input.keyboard.addKey(Phaser.Keyboard.TWO);

this.bangSound = game.add.audio('second');

key2.onDown.add(this.addDrum, this);

break;

case Phaser.Keyboard.THREE:

key3 = game.input.keyboard.addKey(Phaser.Keyboard.THREE);

this.melodySound = game.add.audio('third');

key3.onDown.add(this.addFlute, this);

break;

case Phaser.Keyboard.FOUR:

key4 = game.input.keyboard.addKey(Phaser.Keyboard.FOUR);

this.beethovenSound = game.add.audio('fourth');

key4.onDown.add(this.addPiano, this);

break;

default:

this.noSound = game.add.audio('default');

}

},

update: function() {

},

addGuitar: function() {

this.jumpSound.play();

},

addDrum: function() {

this.bangSound.play();

},

addFlute: function() {

this.melodySound.play();

},

addPiano: function() {

this.beethovenSound.play();

},

addOthers: function() {

this.noSound.play();

},

};

game.state.add('main', mainState);

game.state.start('main');

lewster32 · September 19, 2014

You do not need to add the keys because you're already scanning for them, so change your code to the following:

        // Add the sounds first        this.jumpSound = game.add.audio('start');        this.bangSound = game.add.audio('second');        this.melodySound = game.add.audio('third');        this.beethovenSound = game.add.audio('fourth');        this.noSound = game.add.audio('default');        // Now just call the relevant functions to play the sounds when the correct key is pressed        game.input.keyboard.onDownCallback = function(e) {          var keycode = e.keycode || e.which;          switch (keycode) {            case Phaser.Keyboard.ONE:              this.addGuitar();              break;            case Phaser.Keyboard.TWO:              this.addDrum();              break;            case Phaser.Keyboard.THREE:              this.addFlute();              break;            case Phaser.Keyboard.FOUR:              this.addPiano();              break;            default:              this.addOthers();              break;            break;          }

sam89 · September 19, 2014

I'm having this error "Uncaught TypeError: undefined is not a function " at this particular code:

this.addGuitar();

Thanks in advanced.

lewster32 · September 19, 2014

Oops sorry, scope - anonymous functions make 'this' point to themselves, so you need to keep a reference to 'this' from outside:

        var self = this;        game.input.keyboard.onDownCallback = function(e) {          var keycode = e.keycode || e.which;          switch (keycode) {            case Phaser.Keyboard.ONE:              self.addGuitar();              break;            case Phaser.Keyboard.TWO:              self.addDrum();              break;            case Phaser.Keyboard.THREE:              self.addFlute();              break;            case Phaser.Keyboard.FOUR:              self.addPiano();              break;            default:              self.addOthers();              break;            break;          }

sam89 · September 19, 2014

Thank you so much, I got it working now.

sam89 · September 20, 2014

Hi there. I need another guidance. For the game that I'm about to design, the player will be given 4 sounds and they have to guess what the sounds have in common. It works exactly as "4 pictures 1 word" game but instead of pictures, the player has to guess the sounds. How do I code the part where each time the player has heard the 4 sound, they would enter a particular word to guess it. As an example in level 1, player will be given the sound of cat,dog,parrot and hamster, and have to guess the common between the four sounds. The narration will say that the word consist of 3 word. Player will be inserting each alphabet till they get the correct one. The correct word for this will be "PET". How do I code this in Phaser? Thanks in advanced.

lewster32 · September 20, 2014

Phaser doesn't have an 'input' control (and it's notoriously hard to create one from scratch) so the best bet is to use an actual HTML input field, and absolute position it above the Phaser canvas, then use something like jQuery or Zepto to manage it.

How to assign key input for sounds in Phaser.

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Recently Browsing 0 members