Game inside iframe, keyboard input stops working after cavas/iframe loses focus

[BdR]

Question about keyboard controls. I'm working on a simple action game in Phaser CE, the player touches certain parts of the screen to do various actions. The mouse/touch input parts work fine and now I also want to support keyboard input for people playing on desktop.

The problem is; the game is running inside an iframe and the keyboard input works correctly until the canvas loses focus. The game pauses which is correct behaviour, then I click inside canvas again, game continues and mouse input still works. But now the keyboard input is not working anymore. When the game is not running inside an iframe this is not a problem, the keyboard continues to work after losing focus, pausing and then continuing.

Do I have to use something other than "game.input.keyboard.addCallbacks" to check for keyboard input? This is my code

mygame.GameState.prototype = {

	create: function() {
		this.stage.backgroundColor = "#f0f";
		this._levelindex = 0;
		// ..
		// etc.

		// game input for mouse and keyboard
		this.game.input.onDown.add(this.onGameMouseDown, this); // mouse/touch
		this.game.input.keyboard.addCallbacks(this, this.doGameKeyInput, null, null); // keyboard
		// ..
	},
	
	onGameMouseDown: function(evt) {
		// code.. ok works fine
	},
	
	doGameKeyInput: function(key) {
		var kc = key.keyCode;
		var action = 0;
		if (kc == 32) {action = 1}; // space
		if (kc == 90) {action = 2}; // Z
		if (kc == 88) {action = 3}; // X
		// etc. this works until canvas loses focus
	}
}

FYI i'm using Windows 10 and Chrome

[BdR]

I've created a page to isolate and reproduce this issue, see keyboard test

edit: I just noticed that you can manually set the focus back to the canvas using the TAB button. So in the "keyboard test" page, press the "do something" button (which is outside the iframe) then OK on the alert pop-up, then press TAB once and the focus is back on the canvas and keyboard events work again.

What I expected was that when you mouse-click inside the canvas, the canvas should also get focus for keyboard events again, but this is not the case. I don't expect the average player to know this or figure this out, so how can I realise this?

[GideonSam]

  this.game.onPause.add(this.yourGamePausedFunc, this);

            this.game.onResume.add(this.yourGameResumedFunc, this);

yourGamePausedFunc: function () {

        this.game.input.mspointer.stop();

    }, yourGameResumedFunc: function () {

        this.game.input.mspointer.stop();

    }

 

you should add key to overrride defaults keyactions

 

this.upKey = game.input.keyboard.addKey(Phaser.Keyboard.UP);

 

try this it worked for me

[BdR]

9 hours ago, GideonSam said:

try this it worked for me

Thanks for the tip, I don't really know what it does exactly, but it fixed my probem.  I mean I'm running the game in Chrome, so I don't get why stopping the event listeners on an MSPointer fixes this issue, but well.. here we are.

Seeing as it's the same code for both pause and unpause, this is what I've added to my game and now it's working again:

  create: function() {
    // code..

    // fix issue; keyboard doesn't work after canvas lost focus
    this.game.onPause.add(this.doPausedUnpaused, this);
    this.game.onResume.add(this.doPausedUnpaused, this);
  },

  doPausedUnpaused: function() {
    this.game.input.mspointer.stop()
  },

 

[samme]

This sounds similar to phaser-ce/issues/236.

If you never restart mspointer, you don't really need to wait until pause/resume to stop it. Just stop it when your game boots, for better consistency.

[samme]

@BdR could you please try 

this.game.onFocus.add(function () {
  window.focus();
});

 

[BdR]

@samme thanks that also works and seems to me is more to the point of the problem.?

I've now changed my code like so:

  create: function() {
    // code..

    // fix canvas focus keyboard issue
    this.game.onFocus.add(this.doFocusFix, this);
  },

  doFocusFix: function() {
    window.focus();
  },