Sign in to follow this  
toto88x

Use both arrow keys and WASD controls?

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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)) ...

Share this post


Link to post
Share on other sites

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:

 

0-Vuskup12-azerty-s-.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.