cocos creator基礎-cc.Node(二)事件響應

觸摸事件

1: 觸摸事件類型: START, MOVED, ENDED(物體內), CANCEL(物體外);
2: 監聽觸摸事件: node.on(類型, callback, target(回掉函數的this), [useCapture]);
3: 關閉觸摸事件: node.off(類型, callback, target(回掉函數的this), [useCapture]);
4: targetOff (target): 移除所有的注冊事件;
5: 回掉函數的參數設置 function(t(cc.Touch))
6: cc.Touch: getLocation返回觸摸的位置;getDelta返回距離上次的偏移;
7: cc.Event: stopPropagationImmediate/stopPropagation 停止事件的傳遞;
8: 事件冒泡: 觸摸事件支持節點樹的事件冒泡,會從當前前天往上一層一層的向父節點傳送;
9: 完成物體跟隨手指觸摸的案例;

// touch事件
cc.Class({
    extends: cc.Component,

    properties: {
    },

    /*
    t: --> cc.Touch
    觸摸的位置: 屏幕坐標，左小角(0, 0); getLocation();
    */
    on_touch_move: function(t) {
        // 位置
        console.log("cc.Node.EventType.TOUCH_MOVE called");
        console.log(t.getLocation());
        var w_pos = t.getLocation(); // cc.Vec2 {x, y}
        console.log(w_pos, w_pos.x, w_pos.y);

        // 距離上一次觸摸變化了多少;
        var delta = t.getDelta(); // x, y各變化了多少cc.Vec2(x, y)

        this.node.x += delta.x;
        this.node.y += delta.y;
    },

    // use this for initialization
    onLoad: function () {
        // (1) 監聽對應的觸摸事件: 像引擎底層注冊一個回掉函數，當有觸摸事件發生的時候掉這個回掉函數;
        // cc.Node.EventType.TOUCH_START: 觸摸開始
        // cc.Node.EventType.TOUCH_MOVE: 觸摸移動
        // cc.Node.EventType.TOUCH_END: 觸摸結束, (物體內部結束)
        // cc.Node.EventType.TOUCH_CANCEL: 觸摸結束, (物體外部結束)
        /*
        (2) 回掉函數的格式  function(t)  --> cc.Touch對象觸摸事件對象 {觸摸信息，事件信息}
        call --> this, this指向誰就是這個target;你要綁那個對象作為你回掉函數的this, 可以為空
        function () {}.bind(this); 
        
        */
        this.node.on(cc.Node.EventType.TOUCH_START, function(t) {
            console.log("cc.Node.EventType.TOUCH_START called");
            // this 函數里面的this,
            // 停止事件傳遞
            t.stopPropagationImmediate(); 
        }, this);

        this.node.on(cc.Node.EventType.TOUCH_MOVE, this.on_touch_move, this);
        

        this.node.on(cc.Node.EventType.TOUCH_END, function(t) {
            console.log("cc.Node.EventType.TOUCH_END called");
        }, this);

        this.node.on(cc.Node.EventType.TOUCH_CANCEL, function(t) {
            console.log("cc.Node.EventType.TOUCH_CANCEL called");
        }, this);

        // 移除
        // this.node.off(cc.Node.EventType.TOUCH_MOVE, this.on_touch_move, this);
        // 移除target上所有的注冊事件
        // this.node.targetOff(this);
    },

    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});

 

鍵盤事件

1:cc.SystemEvent.on(type, function, target, useCapture);
type: cc.SystemEvent.EventType.KEY_DOWN 按鍵按下;
cc.SystemEvent.EventType.KEY_UP 按鍵彈起;
2: cc.SystemEvent.on(type, function, target, useCapture);
3: 監聽的時候，我們需要一個cc.SystemEvent類的實例，我們有一個全局的實例cc.systemEvent,小寫開頭
3: 鍵盤回掉函數: function(event) {
event.keyCode [cc.KEY.left, ...cc.KEY.xxxx]

// kb_event.js 注冊引擎事件
cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //    default: null,      // The default value will be used only when the component attaching
        //                           to a node for the first time
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: 'Foo', // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...
    },

    // use this for initialization
    // (1)向引擎注冊一個事件類型的回掉函數, 
    // (2) 按鍵時間的類型: cc.SystemEvent.EventType.KEY_DOWN, cc.SystemEvent.EventType.KEY_UP;
    // (3) 配置的回掉函數: function(event) {} target, 目標
    // (4) 每一個按鍵，都會對應一個按鍵碼, space, A, B, C, event對象 event.keyCode;
    // (5) cc.systemEvent 小寫開頭，不是大寫, 大寫SystemEvent類, systemEvent 全局一個實例
    onLoad: function () {
        // console.log(cc.systemEvent);
        // 按鍵被按下
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.on_key_down, this);

        // 按鍵彈起
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.on_key_up, this);
    },

    on_key_down: function(event) {
        switch(event.keyCode) {
            case cc.KEY.space:
                console.log("space key down!");
            break;
        }
    },

    on_key_up: function(event) {
        switch(event.keyCode) {
            case cc.KEY.space:
                console.log("space key up!");
            break;
        }
    },



    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});

 

自定義事件

1:監聽: this.node.on(“自定義事件名稱”, function, target, useCapture);
2: 自派送: emit(“事件名稱”, [detail]); 只有自己能夠收到;
3: 冒泡派送: dispatchEvent(new cc.Event.EventCustom(“name”, 是否冒泡傳遞));

// custom_event.js 發送消息
cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //    default: null,      // The default value will be used only when the component attaching
        //                           to a node for the first time
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: 'Foo', // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...
    },

    // use this for initialization
    onLoad: function () {
        // 接收者
        // 事件類型，是你自定義的字符串;
        // 回掉函數: function(e) {} e--> cc.Event.EventCustom的實例
        this.node.on("pkg_event", function(e){
            console.log("pkg_event", e.detail);
        }, this);
        // end
    },

    start: function() {
        // 派發者,只能傳遞給自己,不會向上傳遞
        this.node.emit("pkg_event", {blake: "huang"});
        // end  

        // 派送者，不只是發給自己，發給我們這個體系;
        // true/false, true向上傳遞, false不向向上傳遞
        var e = new cc.Event.EventCustom("pkg_event", true);
        e.detail = {blake: "huang"};
        this.node.dispatchEvent(e);
    },
    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});

recv_event.js

// recv_event.js 父類接收消息

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //    default: null,      // The default value will be used only when the component attaching
        //                           to a node for the first time
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: 'Foo', // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...
    },

    // use this for initialization
    onLoad: function () {
        this.node.on("pkg_event", function(e){
            console.log("recv pkg_event", e.detail);
        }, this);
    },

    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});