[Cocos2d-js] キーボードの入力を受け取る cc.EventListener.KEYBOARD

Cocos2d-x（Cocos2d-js）では、スマートフォンのタップやマウスの動作の他に、PCのキーボードからの入力に対する反応（イベント）を設定することができます。

以下は、実際に十字キー（方向キー）とZキーの入力を受け取るためのイベントリスナーを設定するソースコードを app.js に記載した例です。

キーボードのイベントを取得するには event の値に cc.EventListener.KEYBOARD を指定します。キーを押し込んだときの処理は onKeyPressed に、キーを離したときの処理は onKeyReleased に記載します。

var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    ctor:function () {

        this._super();

        cc.eventManager.addListener({
            event: cc.EventListener.KEYBOARD,
            onKeyPressed: function(keyCode, event) {
                
                if (keyCode == cc.KEY.left) {
                    cc.log("左");
                }

                if (keyCode == cc.KEY.up) {
                    cc.log("上");
                }

                if (keyCode == cc.KEY.right) {
                    cc.log("右");
                }
                
                if (keyCode == cc.KEY.down) {
                    cc.log("下");
                }

                if (keyCode == cc.KEY.z) {
                    cc.log("Z");
                }
            },
            onKeyReleased: function(keyCode, event) {
                if (keyCode == cc.KEY.left) {
                    cc.log("左（解放）");
                }

                if (keyCode == cc.KEY.up) {
                    cc.log("上（解放）");
                }

                if (keyCode == cc.KEY.right) {
                    cc.log("右（解放）");
                }
                
                if (keyCode == cc.KEY.down) {
                    cc.log("下（解放）");
                }

                if (keyCode == cc.KEY.z) {
                    cc.log("Z（解放）");
                }
            }
        }, this);

        return true;
    }
});

入力したキーに対応するコンソールログが出力されます。

cc.KEY には、全てのキーのキーコードが格納されています。この値を利用すれば、キーに対応する数値を調べる必要がなくなります。

cc.KEY を cc.log でログに出力してみると以下のように様々なキーのキーコードが含まれていることが確認できます。