玩家輸入事件

本篇教程，我們將介紹 Cocos Creator 的玩家輸入事件。

目前支援了以下幾種事件：

• 鍵盤事件
• 滑鼠事件
• 觸控（單點與多點）事件

如何定義輸入事件

所有的事件都是通過函式 cc.eventManager.addListener(listener, target) 來進行新增。

可選的 event 型別有:

1. cc.EventListener.MOUSE (滑鼠)
2. cc.EventListener.KEYBOARD (鍵盤)
3. cc.EventListener.TOUCH_ONE_BY_ONE (單點觸控)
4. cc.EventListener.TOUCH_ALL_AT_ONCE (多點觸控)

滑鼠事件

• 事件監聽器型別：cc.EventListener.MOUSE
• 事件觸發後的回撥函式：
  • 滑鼠按下：onMouseDown(event);
  • 滑鼠釋放：onMouseUp(evnet);
  • 滑鼠移動：onMouseMove(evnet);
  • 滑鼠滾輪：onMouseScroll(evnet);
• 回撥引數：
  • Event：API 傳送門

// 新增滑鼠事件監聽器
var listener = {
    event: cc.EventListener.MOUSE,
    onMouseDown: function (event) {
        cc.log('Mouse Down: ' + event);
    },
    onMouseUp: function (event) {
        cc.log('Mouse Up: ' + event);
    }，
    onMouseMove: function (event) {
       cc.log('Mouse Move: ' + event);
    }
    onMouseScroll: function (event) {
       cc.log('Mouse Scroll: ' + event);
    }
}
// 繫結滑鼠事件
cc.eventManager.addListener(listener, this.node);

鍵盤事件

• 事件監聽器型別：cc.EventListener.KEYBOARD
• 事件觸發後的回撥函式：
  • 鍵盤按下：onKeyPressed(keyCode, event);
  • 鍵盤釋放：onKeyReleased(keyCode, evnet);
• 回撥引數：
  • KeyCode: API 傳送門
  • Event：API 傳送門

// 新增鍵盤事件監聽器
var listener = {
    event: cc.EventListener.KEYBOARD,
    onKeyPressed: function (keyCode, event) {
        cc.log('keyDown: ' + keyCode);
    },
    onKeyReleased: function (keyCode, event) {
        cc.log('keyUp: ' + keyCode);
    }
}
// 繫結鍵盤事件
cc.eventManager.addListener(listener, this.node);

單點觸控事件

• 事件監聽器型別：cc.EventListener.TOUCH_ONE_BY_ONE
• 事件觸發後的回撥函式：
  • 觸控開始：onTouchBegan(touches, event);
  • 觸控移動時：onTouchMoved(touches, event);
  • 觸控結束時：onTouchEnded(touches, event);
  • 取消觸控：onTouchCancelled(touches, event);
• 回撥引數：
  • Touches: 觸控點的列表，單個Touch API 傳送門
  • Event：API 傳送門

注意：onTouchBegan 回撥事件裡要 return true， 這樣後續的 onTouchEnded 和 onTouchMoved 才會觸發事件。

// 新增單點觸控事件監聽器
var listener = {
    event: cc.EventListener.TOUCH_ONE_BY_ONE,
    onTouchBegan: function (touches, event) {
        cc.log('Touch Began: ' + event);
        return true; //這裡必須要寫 return true
    },
    onTouchMoved: function (touches, event) {
        cc.log('Touch Moved: ' + event);
    }，
    onTouchEnded: function (touches, event) {
       cc.log('Touch Ended: ' + event);
    }
    onTouchCancelled: function (touches, event) {
       cc.log('Touch Cancelled: ' + event);
    }
}
// 繫結單點觸控事件
cc.eventManager.addListener(listener, this.node);

多點觸控事件

• 事件監聽器型別：cc.EventListener.TOUCH_ALL_AT_ONCE
• 事件觸發後的回撥函式：
  • 觸控開始：onTouchesBegan(touches, event);
  • 觸控移動時：onTouchesMoved(touches, event);
  • 觸控結束時：onTouchesEnded(touches, event);
  • 取消觸控：onTouchesCancelled(touches, event);
• 回撥引數：
  • Touches: 觸控點的列表，單個Touch API 傳送門
  • Event：API 傳送門

同理：onTouchesBegan 回撥事件裡也要 return true， 這樣後續的 onTouchesEnded 和 onTouchesMoved 才會觸發事件。

// 新增多點觸控事件監聽器
var listener = {
    event: cc.EventListener.TOUCH_ALL_AT_ONCE,
    onTouchesBegan: function (touches, event) {
        // touches 觸控點的列表
        cc.log('Touch Began: ' + event);
        return true; //這裡必須要寫 return true
    },
    onTouchesMoved: function (touches, event) {
        cc.log('Touch Moved: ' + event);
    }，
    onTouchesEnded: function (touches, event) {
       cc.log('Touch Ended: ' + event);
    }
    onTouchesCancelled: function (touches, event) {
       cc.log('Touch Cancelled: ' + event);
    }
}
// 繫結多點觸控事件
cc.eventManager.addListener(listener, this.node);