Control (and animate) MenuItemImage by Keyboard

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 MenuItemImages 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?