Hi, I came to share something I found out in case someone finds it useful. As well as to discuss it and see if someone has a better idea for implementing the same thing.
I have a GUI consisting of some MenuItemImage
s which perform actions for moving a character. But I also want to give the player the ability to control the character by keyboard.
Aditionally, I may re-bind the keys that are assigned to each button at will.
So, what I did was add a .key
property to each MenuItemImage
. For example, the following is for the button that performs the “up” movement: this.btnUp.key = cc.KEY.w;
.
Additionally, for this example, I’ve given the up/down/left/right keys of the keyboard the same functionality of W/A/S/D.
Then, this is what I do in my keyboard handler:
onKeyUp:function (pressedKey) {
switch(pressedKey){
case cc.KEY.up:
pressedKey = cc.KEY.w;
break;
case cc.KEY.down:
pressedKey = cc.KEY.s;
break;
case cc.KEY.right:
pressedKey = cc.KEY.d;
break;
case cc.KEY.left:
pressedKey = cc.KEY.a;
break;
}
switch(pressedKey){
case this.btnUp.key:
this.btnUp.selected();
this.btnUp.activate();
var that=this;
window.setTimeout(function(){that.btnUp.unselected();}, 300);
break;
case this.btnDown.key:
this.btnDown.selected();
this.btnDown.activate();
var that=this;
window.setTimeout(function(){that.btnDown.unselected();}, 300);
break;
case this.btnRight.key:
this.btnRight.selected();
this.btnRight.activate();
var that=this;
window.setTimeout(function(){that.btnRight.unselected();}, 300);
break;
case this.btnLeft.key:
this.btnLeft.selected();
this.btnLeft.activate();
var that=this;
window.setTimeout(function(){that.btnLeft.unselected();}, 300);
break;
}
}
In that code, .selected()
makes the MenuItemImage
change from it’s normal image to it’s selected image (like if you click/touch it and hold the press), .activate()
triggers the callback assigned to the MenuItemImage
, performing the actual action, and window.setTimeout(function(){that.btnUp.unselected();}, 300);
changes the image back to the normal image after 300 milliseconds.
Any thoughts as to how to improve my approach?
edit: now that I think about it, maybe there’s a way to do this with cocos2d callbacks rather than the window.setTimeout
method? I think that would be preferred, wouldn’t it?