Override default key behavior with JS/Phaser

[spinnerbox]

I have this code:

var myKey = SI.gameObject.input.keyboard.addKey(SI.gameObject, 32);
myKey.onDown.add(function () { console.log("space"); }, SI.gameObject);

When pressing Space the browser scrolls down. I want to prevent this but still be able to detect when i pressed Space. 

Yes there is method game.input.keyboard.addKeyCapture() which does the job, but it also disables Space button completely i.e I don't detect when the button is pressed.

Any ideas if this is possible in Phaser? 

[spinnerbox]

Well, for now I din't manage to develop Phaser based solution but I came up with pure JS based which is dirty fix but still works. I put this code in a separate JS file called TrickyButtons.js and included it in my index.html page

document.onkeydown = function (e) {
  var kc = e.keyCode,
  	  key = e.key;
  console.log("key code: " + kc + ", key: " + e.key);
  switch (kc) {
    case 32:
      SI.GameScreen.keypressHandler(key);
      return false;
    case 39:
      SI.GameScreen.keypressHandler(key);
      return false;
    case 45:
      SI.GameScreen.keypressHandler(key);
      return false;
    case 46:
      SI.GameScreen.keypressHandler(key);
      return false;
    case 222:
      SI.GameScreen.keypressHandler("'");
      return false;
    case 126:
      SI.GameScreen.keypressHandler(key);
      return false;
    case 191:
      SI.GameScreen.keypressHandler(key);
      return false;
  }
};

Where SI.GameScreen.keypressHandler(kbBtn) is the handler I send to my game object like this:

gameObject.input.keyboard.addCallbacks(thisObject, null, null, thisObject.keypressHandler);

So there are 3 events, keydown, keypress and keyup. keypress event fires only when you press a letter key. keydown and keyup are fired when you press any button. That means keydown, keypress and keyup are fired in that sequence for letter keys, while for all other keys only keydown and keyup are fired. 

The reason why I call keypress handler explicitly is because when I type Space or single quote this event doesn't get executed so I do that in my "onkeydown" event just before I return false which will prevent default behavior like scrolling down page or opening "Quick FInd" bar in Firefox.

Additionally I found some good posts on the topic:

http://stackoverflow.com/questions/1367700/whats-the-difference-between-keydown-and-keypress-in-net

http://stackoverflow.com/questions/10191621/jquery-keypress-keydown-which

http://javascript.info/tutorial/keyboard-events

Hopefully will come up with more elegant solution by using Phaser code.

[AzraelTycka]

I don't understand what you are trying to do?

If it's just spacebar to do something then did you even check any phaser examples on this matter (for example - if you add keycapture to arrows in this example it still works the same)?

One more example closer to your second post.

And docs of course.

[spinnerbox]

These example cover what I need I guess. The problem was, I couldn't stop Space button to scroll the page down, so I had to improvize.

And also single quote (') opens "Quick Find" bar.

[spinnerbox]

I tested this code in the Phaser example:

var mySpaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
mySpaceKey.onDown.add(test, this);

game.input.keyboard.removeKeyCapture(Phaser.Keyboard.SPACEBAR);

function test() {
    console.log("test space");
}

And yes, no scrolling when pressed Space and I can run custom code.

But when i run it in my game, the page still scrolls down when I press Space, meaning I have a bug. Not sure

What should I add in the down listener as this, game, window, document? What should be the this keyword?

[AzraelTycka]

17 hours ago, spinnerbox said:

I tested this code in the Phaser example:

var mySpaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
mySpaceKey.onDown.add(test, this);

game.input.keyboard.removeKeyCapture(Phaser.Keyboard.SPACEBAR);

function test() {
    console.log("test space");
}

And yes, no scrolling when pressed Space and I can run custom code.

But when i run it in my game, the page still scrolls down when I press Space, meaning I have a bug. Not sure

What should I add in the down listener as this, game, window, document? What should be the this keyword?

I think you need addKeyCapture and not removeKeyCapture. To prevent default behaviour.

Example that works from my game:

create: function() {

this.cursor = this.input.keyboard.createCursorKeys();
this.spaceBar = this.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
this.input.keyboard.addKeyCapture([Phaser.Keyboard.UP,
                                   Phaser.Keyboard.DOWN,
				   Phaser.Keyboard.LEFT,
                                   Phaser.Keyboard.RIGHT,
				   Phaser.Keyboard.SPACEBAR]);

}

When I need to access my keys I use: this.cursor for cursor keys (up, down, left, right) and this.spaceBar for spacebar.

[rich]

4 hours ago, spinnerbox said:

I tested this code in the Phaser example:

var mySpaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
mySpaceKey.onDown.add(test, this);

game.input.keyboard.removeKeyCapture(Phaser.Keyboard.SPACEBAR);

function test() {
    console.log("test space");
}

And yes, no scrolling when pressed Space and I can run custom code.

But when i run it in my game, the page still scrolls down when I press Space, meaning I have a bug. Not sure

What should I add in the down listener as this, game, window, document? What should be the this keyword?

Something else in your page is intercepting the keyboard event. It could be a library, or could even be a browser extension. I'd suggest you try a 'clean' empty browser to rule that one out.

The context for the onDown signal is whatever scoped object you need it to be, likely just 'this'. Getting it wrong (or right) won't change the page scrolling thing.

[spinnerbox]

Apparently this line removes the listener so the space button again scrolls the page down.

gameObject.input.keyboard.removeKeyCapture(Phaser.Keyboard.SPACEBAR);

I commeted it out and it worked i.e Space btn doesn't scroll the page down but I know when it was pressed.

And yes this is Phaser 2.2.2. When i have time will upgrade to most recent

[AzraelTycka]

Yeah that's basically addKeyCapture is basically event.preventDefault() while remove keyCapture is .. well removing it. But id doesn't remove the listener, it just either prevents or sets up the default behaviour.

Basically:

addKeyCapture ..... listener with event.preventDefault

removeKeyCapture ..... listnere without event.preventDefault

Here you can find the line in phaser, check it out to see that it's only about preventDefault().

Check comments in this example. You can also check the docs. It says the same thing.

[spinnerbox]

Yes, it depends on what you pay attention at a given moment  but the solution is in front of your eyes.