Use both arrow keys and WASD controls?

[toto88x]

Hello,

 

I know how to make my player move with the arrow keys like this:

// In the create functionthis.cursors = game.input.keyboard.createCursorKeys();// In the update functionif (this.cursors.left.isDown) {    // Move the player}

Is there an easy way to make WASD keys work the same way? If so, how?

I'd like to be able to control the player with both the arrows and the WASD keys.

 

And related question: when should I use addKeyCapture? Is it useful with createCursorKeys? 

 

Thanks!

[ragnarok]

IIRC, add WASD with game.input.keyboard.addKey(Phaser.Keyboard.A) ... in the create function and use something like that to ask for the key in the update phase:

 

if(this.cursors.up.isDown || game.input.keyboard.isUp(Phaser.Keyboard.A)) ...

[lewster32]

I created WASD in the same way that cursors are created using the following little bit of code:

this.cursors = XV.game.input.keyboard.createCursorKeys();

this.wasd = {
  up: XV.game.input.keyboard.addKey(Phaser.Keyboard.W),
  down: XV.game.input.keyboard.addKey(Phaser.Keyboard.S),
  left: XV.game.input.keyboard.addKey(Phaser.Keyboard.A),
  right: XV.game.input.keyboard.addKey(Phaser.Keyboard.D),
};

Please do be aware however that you should always give your players the option to change their keys - WASD is not uniformly usable around the world; as in the case of French users (for one example) whose keyboard layout looks more like this:

 

[lewster32]

Sorry I didn't see the bit on addKeyCapture - this simply stops the key doing whatever it would otherwise do in the browser. It's useful for keys like space and cursors (scroll up and down the page) etc which if not captured will cause the browser to behave annoyingly. To quote the docs:

 

By default when a key is pressed Phaser will not stop the event from propagating up to the browser. There are some keys this can be annoying for, like the arrow keys or space bar, which make the browser window scroll. You can use addKeyCapture to consume the keyboard event for specific keys so it doesn't bubble up to the the browser. Pass in either a single keycode or an array/hash of keycodes.

[Massemassimo]

Hey, sorry to dig this out but I wonder what you would call that construct containing the wasd referrals. (Also sorry for the poor phrasing.) "Array" comes to my unschooled mind, but it obviously is no array.

 

Edit: My genius brain thought of checking what "game.input.keyboard.createCursorKeys()" returns - so it's just an object, right? Damn, I know nothing (though my name is not Jon Snow).

[lewster32]

Yeah, it's just a plain object with up, down, left and right properties.

[Timmey]

Heya, I ran against the issue of assigning multiple KeyCodes per action as well. Here is a little bit of code I wrote to deal with it. I hope it might be useful to some people.

 

(Warning:  this example requires lodash or underscore, also make sure all the variables are available in the different functions)

// Define your actionsvar ACTIONS = {    LEFT: 1,    UP: 2,    RIGHT: 3,    DOWN: 4,    ATTACK: 5,    BASIC_ATTACK: 6,};// Define your keymap, as many keys per action as we wantvar defaultKeymap = {    [ACTION.LEFT]:  [Phaser.KeyCode.A, Phaser.KeyCode.LEFT],    [ACTION.UP]:    [Phaser.KeyCode.W, Phaser.KeyCode.UP],    [ACTION.RIGHT]: [Phaser.KeyCode.D, Phaser.KeyCode.RIGHT],    [ACTION.DOWN]:  [Phaser.KeyCode.S, Phaser.KeyCode.DOWN],    [ACTION.BASIC_ATTACK]: Phaser.KeyCode.CONTROL};// Create Keymap classvar Keymap = function( keyboard, defaultKeymap ) {    this.map = {};    var self = this;    _.forEach(defaultKeymap, function(KeyCode, action) {        self.map[action] = [];        if(_.isArray(KeyCode)) {            _.forEach(KeyCode, (code) => {                self.map[action].push(keyboard.addKey(code));            });        } else {            self.map[action].push(keyboard.addKey(KeyCode));        }    });};// isDown function for your actionKeymap.prototype.isDown = function(action) {    for(let i = 0, length = this.map[action].length; i < length; i++ ){        if(this.map[action][i].isDown) {            return true;        }    }    return false;};// Create the Keymapvar myMap = new Keymap(game.input.keyboard, defaultKeymap);// In your update function you can now useif( myMap.isDown(ACTION.LEFT) ) {    // do stuff}

Yours,

Timmey

[vcyborg]

On 1/7/2016 at 8:21 PM, Timmey said:

Heya, I ran against the issue of assigning multiple KeyCodes per action as well. Here is a little bit of code I wrote to deal with it. I hope it might be useful to some people.

(Warning:  this example requires lodash or underscore, also make sure all the variables are available in the different functions)

Hi, Timmey

Thank you so much! That is really useful to me as I'm looking to implement something similar.

But as I'm still learning javascript I'm struggling to figure out the lodash/underscore stuff.

Do you, or anyone, can help me to translate the code to native js? I looked into it and found https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore , but there's stuff like _.forEach that I don't know how to write.

I know this is from last year, but I figured I'll ask just in case. Thanks!