思享工具箱

cocos creator基础-cc.Node(二)事件响应

摘要：
触摸事件1：触摸事件类型：开始、移动、结束（对象内部）、取消（对象外部）；2： 聆听触摸事件：节点。on（类型，回调，目标（返回函数的this），[useCapture]）；3： 关闭触摸事件：节点关闭（类型、回调、目标（返回此函数）、[useCapture]）；4： TargetOff（目标）：删除所有已注册的事件

触摸事件

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) {

    // },
});

标签：#event | 浏览：416 | 发布日期：

免责声明：文章转载自《cocos creator基础-cc.Node(二)事件响应》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇树莓派的kodi设置遥控器的方法龙芯 loongnix20 rc2 初体验下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

用pygame实现打飞机游戏-6-显示敌机

1 #coding=utf-8 2 importpygame 3 #导入pygame模块 4 from pygame.locals import * 5 #导入检测键盘的子模块 6 importtime 7 classAircraftCoordinate(object): 8 def __init__(self,screen): 9...

element ui 的 element-tree文字显示不全的问题

在elemtn-tree 树展示的时候外面设置了固定宽度，超出的文字会隐藏，认真查看过各个嵌套节点并没有发现超出隐藏的设置。这就比较尴尬。  解决方案一、给超出的文件加上滑块（缺点不够美观，如果连续都超出的话就看着比较费劲） element 树部分的代码！ <el-tree　　　　 :data="data" show-...

C# 模拟鼠标(mouse_event)

想必有很多人在项目开发中可能遇见需要做模拟鼠标点击的小功能，很多人会在 百度过后采用mouse_event这个函数，不过我并不想讨论如何去使用mouse_event 函数怎么去使用，因为那没有多大意义。 [csharp] view plaincopy static void mouse_event(int dwFlags, int ...

swipe.js 轻松实现手机端滑动效果

插件下载地址 官网：http://www.swipejs.comgithub：https://github.com/bradbirdsall/Swipe 插件特色 swipe.js是一个比较有名的触摸滑动插件，它能够处理内容滑动，支持自定义选项，你可以让它自动滚动，控制滚动间隔，返回回调函数等。经常可见使用在移动开发中 使用方法 HTML代码如下： <...

OpenCV学习系列教程第一篇：处理鼠标事件

来自opencv-python官方学习文档，本人谨做翻译和注释，以及一些自己的理解 本文由作者翻译并进行代码验证，转载请注明出处~ 官方文档请参阅：https://docs.opencv.org/4.0.1/db/d5b/tutorial_py_mouse_handling.html 运行环境： windows 10+pycharm professiona...

swf文件加密基础(转)

本来打算下班回来就写这个东西，一方面算是对今天学习的一个笔记记录，另外一方面，给一些朋友普及一些swf文件加密基础知识。之所以说是基础，那是因为我也是刚学习了一点，灰常的基础。不过晚上看了一会我是传奇的视频耽误了，话说郭德纲老是调戏谢楠，难道有基情？不解释，呵呵……       在说明加密解密方法之前，先解释一些理论方面的东西，很草根。     swf加...

最新文章

随机推荐

思享工具箱导航