Play sound on overlap, when sound is played, show pause screen

[Julia]

Hey!

 

I'm wondering how I could implement a sound when a coin is picked up by the player.

I've got that part working, but the idea is: right after the sound finished playing when the player and the coin overlap, a pause screen should overlay the game.
So here the game is paused, and now the sound only plays for like a millisecond and then immediately switches to the pause screen. 

I've searched for timers, but I can't figure out how to implement a timer on an overlap, AND play the sound AND show the pause screen.

 

Actually what I'm looking for is a solution to execute 2 callback functions in the overlap.

 

This is my overlap function in the update, where only the pause screen gets shown (this.vow1):

game.physics.arcade.overlap(player, coin1, this.vow1, null, this);

I've tried making a function for the music to play:

playCoinMusic: function () {    music = game.add.audio('coinmusic');    music.play();},

I could add the playCoinMusic function to the overlap, but then the pausescreen (this.vow1) wouldn't get executed...

 

Like this:

game.physics.arcade.overlap(player, coin1, this.playCoinMusic, null, this);

Any ideas?   

Thanks in advance!

 

 

[Sam]

Do you wish to wait an amount of time?

game.time.events.add( 4000, fadePauseScreen, this);

You can add this into the playCoinMusic Function and after 4 seconds your fadePuseScreen function fires.

[Julia]

Yeah. I see I haven't mentioned this, but the problem is I have multiple functions, so if coin1 gets picked up, the pause screen should come up and function vow1 should show. Same goes for coin2 with vow2 etc. until 10.

I've been trying to put this all in loops, but I haven't figured that out. So now I'm just writing it all out (not good, I know). Was just curious if this is even possible or if I should really try and put it in loops.

[Sam]

so you do show up an overlay (function) for every coin you pick up until 10.
when you pick up a coin, a sound occurs and after this sound the overlay function should be fired, right?

you can take all of your coins and take them into a group.
 

this.coinOne = game.add .... etcthis.coinTwo = game.add .... etcthis.coinGroup = game.add.group();this.coinGroup.add( this.coinOne );this.coinGroup.add( this.coinTwo );

When you create a group you can attach a collision detection for this group (easier as for every single sprite)

game.physics.arcade.overlap(this.player, this.coinGroup, this.coinCollisionFunc, null, this);

So you can also do:

coinCollisionFunc: function( _player, _coin ){  music.play();  if ( _coin == this.coinOne ) {    //do stuff for coin 1  } else if ( _coin == this.coinTwo ) {    //do stuff for coin 2  }}

[Julia]

Thank you! This looks promising. I've tried it, but unfortunately the overlap check doesn't work anymore   
The player just walks right through the coin. I get no error messages in my console...
I already had a group for the coins as you said, to check for collision between the coins and the platforms. That still functions how it should...

I did this:

 

coinCollision: function (player, coin) {

    music = game.add.audio ('coinmusic', 1, false);

    music.play();

    if(coin == coin1) {

        game.time.events.add(2500, this.vow1, this);

    } else if(coin == coin2) {

        game.time.events.add(2500, this.vow2, this);

    }
    etc.

}

[Sam]

can you provide your code, so that I could have a look through it?

Are you using the prototyping? 

[Julia]

Yes I'm using prototyping. I can upload the game to my site. Don't mind the long threads where I'm too inexperienced to use loops

 

Here it is: juliahofs.nl/platformer/platformer_test.html

[Sam]

Thank you

first of all - a few things I would recommend.

Update-function: keep it as small as you can (performance)
- you don't need to do animations.play etc into the update function,
- call it on start or in a state-function

then, your variables:

player, coinGroup

why not using this.player, this.coinGroup? so you do not need to write all variables down that you have used in your game.

I get an error when colliding with a coin, it says:
Uncaught TypeError: Cannot read property 'length' of undefined

located at: game.js 159

coin1.kill();

[Julia]

Thanks. Yeah you're right about the animations, should do that. Regarding the variables, I've first had it the way you said, using this, but I found it to be a bit too overwhelming with this amount of code... But I guess I should try that again yeah
I'm actually really lost here.. It could be something in the comparison of (coin == coin1) or something in the time.events.add, where the callback function isn't executing...or something else.. Have you still got ideas?

[Sam]

you can use require JS - but I can not say if it is recommended for mobile dev.
I have to figure that out by my self, because this is extremely useful.

the error is this line of code because the .length is not defined: 

coin1.kill();

you can not use .kill() on a group,

coin1 = coinGroup.create(20, 0, 'coins');

you set coin1 be a group.

instead of kill use destroy. this will destroy the entire group -> child elements.

[Julia]

But the coin1 is a child of a group right? I already had a coinGroup before and it worked...
If I test it with destroy, I hear the 'coinmusic' playing constantly during the overlap with the player and the coin. The coin disappears, but no pause screen appears and the player becomes immovable...
I guess the player becomes immovable because the game is paused?

[Sam]

maybe it is a child of a group but in your code you set:

coin1 = coinGroup.create(20, 0, 'coins');

the player does not move - nothign shows up because your game stops at the error of

coin1.kill();

which is not possible with a group.
So the error occurs: can not get .length of undefined

The error is "coin1 = coinGroup.create(20, 0, 'coins');".
to add coin1 to the group "coinGroup" just use:

coinGroup.add(coin1);

I'm getting a bit confused since I'm working on two other projects at the same time, I hope that you understand what I wanted to say

[Julia]

Omg you're right. Don't know how I could have not seen this haha. But the weird thing is, it used to work, also with my platforms...

I've changed it now to be:
 

coinGroup = game.add.group();coinGroup.enableBody = true;coinGroup.physicsBodyType = Phaser.Physics.ARCADE;coin1 = game.add.sprite(20, 0, 'coins');//coin1properties here.....coinGroup.add(coin1);

But it's still giving the same error: Uncaught TypeError: Cannot read property 'length' of undefined

I've tried both with .kill(); and .destroy(); ...

[Sam]

For me it works, I don't get the error any more and the game pauses.

The only thing you have to carry about it that the sound is not playing 10000 times

if the collision happens you could set a variable: colissionWithCoin = true; and play the sound only when:

if ( colissionWithCoin != true ){... do}

and after unpausing the game
set colissionWithCoin = false;


and one more error I recognized:
Uncaught SyntaxError: Unexpected token < 

in your .html file

*EDIT*
I have tu turn on : Disable Cache -> else the error will still show up 'cause of the browsercaching.




regards 

Edited November 12, 2014 by Sam

[Julia]

Thank you! Ah thanks for the edit, I'm not getting the error anymore . But it still isn't functioning how it should... Do you get an overlay with text when you pick up a coin? Here the game 'pauses' I guess, the coin also gets killed, but I'm not seeing anything from the pausefunction (black overlay and text). Also I can't resume the game.

Edit: if you go to: http://juliahofs.nl/platformer2/platformer_test.html you can see what I mean. 

Thanks for your efforts!

[Sam]

yeah I do not get the overlay in the first link.
-> http://examples.phaser.io/_site/view_full.html?d=misc&f=pause+menu.js&t=pause%20menu

I think this has to do with the pause-state which will disable all game functionality.
In the link above you can see how to handle this.

regards