BdR Posted June 10, 2018 Share Posted June 10, 2018 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 More sharing options...
BdR Posted June 10, 2018 Author Share Posted June 10, 2018 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 More sharing options...
GideonSam Posted June 11, 2018 Share Posted June 11, 2018 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 1 Link to comment Share on other sites More sharing options...
BdR Posted June 11, 2018 Author Share Posted June 11, 2018 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 More sharing options...
samme Posted June 12, 2018 Share Posted June 12, 2018 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. Link to comment Share on other sites More sharing options...
samme Posted June 12, 2018 Share Posted June 12, 2018 @BdR could you please try this.game.onFocus.add(function () { window.focus(); }); BdR 1 Link to comment Share on other sites More sharing options...
BdR Posted June 13, 2018 Author Share Posted June 13, 2018 @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 More sharing options...
Recommended Posts