3.cc.Node(二)事件响应

最新推荐文章于 2021-03-31 20:00:06 发布

Pink0453

最新推荐文章于 2021-03-31 20:00:06 发布

阅读量386

点赞数

分类专栏： cocos creator 文章标签： cocos creator教程事件响应自定义事件

本文链接：https://blog.csdn.net/qaz540411484/article/details/88978591

版权

cocos creator 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

1.触摸事件

触摸事件类型: START, MOVED, ENDED(物体内), CANCEL(物体外);

监听触摸事件: node.on(类型, callback, target(回掉函数的this), [useCapture]);

关闭触摸事件: node.off(类型, callback, target(回掉函数的this), [useCapture]);

targetOff (target): 移除所有的注册事件;

回掉函数的参数设置 function(t(cc.Touch));

cc.Touch: getLocation返回触摸的位置;getDelta返回距离上次的偏移;

cc.Event: stopPropagationImmediate/stopPropagation 停止事件的传递;

事件冒泡: 触摸事件支持节点树的事件冒泡,会从当前往上一层一层的向父节点传送;

touch_event.js

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },
    },

    // LIFE-CYCLE CALLBACKS:

    //t --> cc.touch
    //可以获取屏幕触摸的位置的坐标 左下角(0, 0)
    on_touch_move : function(t) {
        console.log("cc.Node.EventType.TOUCH_MOVE");
        //console.log(t.getLocation());
        var w_pos = t.getLocation();
        console.log(w_pos, w_pos.x, w_pos.y)

        //距离上一次触摸变化了多少
        var delta = t.getDelta(); //x, y各变化了多少 cc.Vec2(x, y)
        this.node.x = this.node.x + delta.x;
        this.node.y = this.node.y + delta.y;

    },

    onLoad () {

        //(1) 监听对应的触摸事件; 向引擎底层注册一个回调函数,当有触摸事件发生的时候调用这个回调函数
        //cc.Node.EventType.TOUCH_START 触摸开始
        //cc.Node.EventType.TOUCH_MOVE  触摸移动
        //cc.Node.EventType.TOUCH_END   触摸结束,在物体内部
        //cc.Node.EventType.TOUCH_CANCEL  触摸结束,在物体外部
        //this.node.on(type, callback, target, useCapture)  其中target为:你要绑定哪个对象作为你回调函数的this
        this.node.on(cc.Node.EventType.TOUCH_START, function(t) {
            console.log("cc.Node.EventType.TOUCH_START");
            t.stopPropagationImmediate(); //停止事件冒泡传递
        }, this);

        this.node.on(cc.Node.EventType.TOUCH_MOVE, this.on_touch_move, this);
        //this.node.off(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");
        }, this);
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, function(t) {
            console.log("cc.Node.EventType.TOUCH_CANCEL");
        }, this); 

        //移除target上所有的注册时间
        //this.node.targetOff(this);

    },

    start () {

    },

    // update (dt) {},
});

2.键盘事件

kb_event.js

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },
    },

    // LIFE-CYCLE CALLBACKS:

    on_key_down : function(event) {

        switch (event.keyCode) {
            case cc.KEY.space:
                console.log("space is down");
                break;
            default:
                break;
        }

    },

    on_key_up : function(event) {

        switch (event.keyCode) {
            case cc.KEY.space:
                console.log("space is up");
                break;
            default:
                break;
        }

    },


    onLoad () {

        //(1)向引擎注册事件类型的回调函数
        //(2)按键事件的类型 cc.SystemEvent.EventType.KEY_DOWN, cc.SystemEvent.EventType.KEY_UP
        //(3)配置回调函数
        //(4)每一个按键都会对应一个按键码 event.keycode
        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); //按键弹起

    },

    start () {

    },

    // update (dt) {},
});

3.自定义事件

监听: this.node.on(“自定义事件名称”, function, target, useCapture);

自派送: emit(“事件名称”, [detail]); 只有自己能够收到;

冒泡派送: dispatchEvent(new cc.Event.EventCustom(“name”, 是否冒泡传递));

custom_event.js

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {

        //自定义事件

        //接受者
        //事件类型, 你自定义的字符串
        //回调函数: function(e) {}  e --> cc.Event.EventCustom的实例
        // this.node.on("pkg_event" , function(e) {
        //     console.log("pkg_event is call", e);
        // }, this);

    },

    start () {

        //发送者 只能传递给自己 不能冒泡 可以传递参数
        //this.node.emit("pkg_event", {name: "lyc"}, null);

        //发送者  不止发送给自己 发给这个体系
        var e = new cc.Event.EventCustom("pkg_event", true); // true 向上传递  false 不向上传递
        e.detail = {name: "xiaoming"};
        this.node.dispatchEvent(e); //分发事件到事件流中

    },

    // update (dt) {},
});

recv_canvas_event.js

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {

        this.node.on("pkg_event" , function(e) {
            console.log("recv_pkg_event is call", e.detail.name);
        }, this);

    },

    start () {

    },

    // update (dt) {},
});

工程截图:

Pink0453

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.cc.Node(二)事件响应

1.触摸事件触摸事件类型: START, MOVED, ENDED(物体内), CANCEL(物体外);监听触摸事件: node.on(类型, callback, target(回掉函数的this), [useCapture]);关闭触摸事件: node.off(类型, callback, target(回掉函数的this), [useCapture]);targetOff (t...
复制链接

扫一扫