Making your first Phaser 3 game problem

Phaser 3
1

Hello,
I just started using Phaser and I am doing the Making your first Phaser 3 game tutorial (http://phaser.io/tutorials/making-your-first-phaser-3-game/part7) and in the update function, the code is

function update ()
{
if (cursors.left.isDown)
{
player.setVelocityX(-160);

	    player.anims.play('left', true);
	}
	else if (cursors.right.isDown)
	{
	    player.setVelocityX(160);

	    player.anims.play('right', true);
	}
	else
	{
	    player.setVelocityX(0);

	    player.anims.play('turn');
	}

	if (cursors.up.isDown && player.body.touching.down)
	{
	    player.setVelocityY(-430);
	}
			

}

If I run it in Chrome, it looks like the keys are not released as once the player starts moving it doesn’t stop, and basically you get stuck there. I ran the code in Safari and it runs smoothly. Can anyone help me to understand it?

Best regards,
Jose

2

Try disabling extensions until it works.

3

Hi Milton,

Thanks for your reply. I will try it, but what if you are going to release a game, won’t it be a nightmare? This is something very basic, I am afraid what might happen with more sophisticated stuff,

Best,
Jose

4

This is rare, and I’m just guessing here. Try a new install of Chrome (on an other system). The same can happen with any browser or any other platform. If you install software that doesn’t play nicely with others…

5

Got what you mean, I will move on, but being the first experience with Phaser, it scared me, thanks!

6

Pull request sent!

7

I had this same problem and corrected it by modifying Phaser 3. When filtering duplicate events (KeyboardPlugin.js line 750 @v3.50.1) the key code is checked, and the timestamp, but not the event type. My browser, Firefox 84, sends keydown and keyup with the same timestamp sometimes, and as written, phaser 3 is skipping the keyup.

Original Phaser3:

//  Duplicate event bailout
if (code === this.prevCode && event.timeStamp === this.prevTime)
{
	//  On some systems, the exact same event will fire multiple times. This prevents it.
	continue;
}

this.prevCode = code;
this.prevTime = event.timeStamp;

Prove trouble by cjw6k:

//  Duplicate event bailout
if (code === this.prevCode && event.timeStamp === this.prevTime)
{
	// Illustrate the bug
	if(event.type !== this.prevType){
		console.log('oh noes! filtered valid key event');
	}
	
	//  On some systems, the exact same event will fire multiple times. This prevents it.
	continue;
}

this.prevType = event.type;
this.prevCode = code;
this.prevTime = event.timeStamp;

I did my fix in phaser.js at line 185389 @v3.50.1 and am running the unminified & patched code now while I keep going checking out how Phaser3 works. The real fix needs to get into github and into the source code for minification and etc. I’m posting up there next.

Modified/fixed code by cjw6k:

//  Duplicate event bailout
if (code === this.prevCode && event.timeStamp === this.prevTime && event.type === this.prevType)
{
	//  On some systems, the exact same event will fire multiple times. This prevents it.
	continue;
}

this.prevType = event.type;
this.prevCode = code;
this.prevTime = event.timeStamp;

I wanted to post here for any others who like me are seeing this problem and abandoning Phaser during their first-look, because of this issue during the ‘make your first Phaser 3 game tutorial’.