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

By | 2017年12月31日

Cocos2d-xCocos2d-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 でログに出力してみると以下のように様々なキーのキーコードが含まれていることが確認できます。

cc.KEY に含まれるKeyCode

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*