Make keyboard input change button state.

[gwinnell]

Hi all,

 

How can I make keyboard input trigger a button's event AND affect it's visual state, almost like a simulated mouse press?

 

I want to do something like the following:

BasicGame.Game = function (game) {    this.abutton = null;    this.akey = null;}BasicGame.Game.prototype = {    preload: function() {        this.load.atlas('ui', 'assets/ui.png', 'assets/ui.json');    },    create: function () {        this.abutton = this.game.add.button(10, 10, 'ui', this.abuttonEvent, this, 'ui/button_over', 'ui/button_off', 'ui/button_down');        this.akey = this.game.input.keyboard.addKey(Phaser.Keyboard.A);        this.akey.onDown.add(this.abuttonEventKey, this);    },    abuttonEvent: function() {        // do button stuff    },    abuttonEventKey: function() {        // something here to change the button state/image to down and trigger the event        this.abutton.doMousePress();         this.abuttonEventKey();    }}

Thanks!

[Heppell08]

abuttonEvent: function() {

this.game.state.start('STATENAMEHERE');

}

[XekeDeath]

Not the state he was after, Heppell.
 
Using a Phaser.Button, you can try messing with calling setFrames() to change the outFrame when the key is pressed and released.

setFrames(overFrame, outFrame, downFrame)

So your abuttonEventKey function would look like

abuttonEventKey: function() {    this.abutton.setFrames('ui/button_over', 'ui/button_down', 'ui/button_down');    this.abutton.doMousePress();     this.abuttonEventKey();}

Add a release callback for the key, and change the frames back to normal in there:

this.akey.onUp.add(this.abuttonEventKeyUp, this);abuttonEventKeyUp: function() {    this.abutton.setFrames('ui/button_over', 'ui/button_off', 'ui/button_down');}

[Heppell08]

Ah haha, thought it was a simple one liner help. Nice description btw Xeke!

[gwinnell]

abuttonEventKey: function() {    this.abutton.setFrames('ui/button_over', 'ui/button_down', 'ui/button_down');}

Add a release callback for the key, and change the frames back to normal in there:

this.akey.onUp.add(this.abuttonEventKeyUp, this);abuttonEventKeyUp: function() {    this.abutton.setFrames('ui/button_over', 'ui/button_off', 'ui/button_down');}

 

Seems a bit hacky, but works like a charm! Thanks, Xeke.