Jump to content

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


BdR
 Share

Recommended Posts

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  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
Link to comment
Share on other sites

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()
  },

 

Link to comment
Share on other sites

@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();
  },

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...