zoukankan      html  css  js  c++  java
  • Cocos Creator学习四:按钮响应事件

    1.方法一:通过编辑器对cc.Button的属性进行拖放操作进行控制

    (1)创建脚本BtnClick1.js,增加btnClick1函数,然后拖放到Canvas节点中(记得拖放,否则下面步骤将找不到对应的函数)。

        btnClick1: function (event, customEventData) {
            //这里 event 是一个 Touch Event 对象,你可以通过 event.target 取到事件的发送节点
            var node = event.target;
            var button = node.getComponent(cc.Button);
            //这里的 customEventData 参数就等于你之前设置的 "click1 user data"
            cc.log("node=", node.name, " event=", event.type, " data=", customEventData);
        }

     

    (2)按步骤在(按钮的属性检查器)上进行操作

    ①在Click Events中填上1,然后编辑器自动生成下方属性输入

    ②将Canvas拖动到cc.Node属性上

    ③选择对应脚本BtnClick1.js

    ④选择对应处理函数btnClick1

    ⑤填写自定义事件数据click1 user data

    ③点击后输出我们自定义的数据

     

    2.方法二:舍弃编辑器上的拖放操作,使用代码控制

    (1)创建脚本BtnClick2.js,增加onLoad和btnClick2函数,然后拖放到Button2节点中。

        onLoad: function () {
            var clickEventHandler = new cc.Component.EventHandler();
            clickEventHandler.target = this.node; //这个 node 节点是你的事件处理代码组件所属的节点,这里就是Button2
            clickEventHandler.component = "BtnClick2";//这个是脚本文件名
            clickEventHandler.handler = "btnClick2"; //回调函名称
            clickEventHandler.customEventData = "click2 user data"; //用户数据
    
            var button = this.node.getComponent(cc.Button); //获取cc.Button组件
            button.clickEvents.push(clickEventHandler); //增加处理
        },
    
        btnClick2: function (event, customEventData) {
            //这里 event 是一个 Touch Event 对象,你可以通过 event.target 取到事件的发送节点
            var node = event.target;
            var button = node.getComponent(cc.Button);
            //这里的 customEventData 参数就等于你之前设置的 "click2 user data"
            cc.log("node=", node.name, " event=", event.type, " data=", customEventData);
        }

    (2)点击后输出我们自定义的数据

     

    3.方法三:不推荐使用此方法!注册TOUCH事件(不能传递自定义数据)

    (1)创建脚本BtnClick3.js,增加onLoad函数,然后拖放到Button3节点中。

        onLoad() {
            this.node.on(cc.Node.EventType.TOUCH_START, function (event) {
                cc.log("TOUCH_START event=", event.type);
            });
    
            this.node.on(cc.Node.EventType.TOUCH_MOVE, function (event) {
                cc.log("TOUCH_MOVE event=", event.type);
            });
    
            this.node.on(cc.Node.EventType.TOUCH_END, function (event) {
                cc.log("TOUCH_END event=", event.type);
            });
        }

     

    (2)点击后输出(PS:当移动到按钮区域外松开,接收不到TOUCH_END事件响应)

     

     

    PS:

    1.测试环境v2.0.5+win10

    2.测试代码下载地址:https://files-cdn.cnblogs.com/files/chevin/CocosCreatorBlog04.zip

    以上。

    Cocos Creator学习目录

  • 相关阅读:
    XML之四种解析dom,sax,jdom,dom4j原理及性能比较
    uni-app 下小程序bindgetuserinfo不回调原因
    微信小程序 -- 真机不打开调试无法正常使用小程序的坑
    如何申请腾讯位置服务的密钥
    使用Promise封装小程序wx.request的实现方法
    关于vue-router当中addRoutes的使用
    前端Promise总结笔记
    css怎么设置超出几行显示省略号?
    大数据Spark和Hadoop以及区别(干货)
    Spark和Hadoop的区别和比较
  • 原文地址:https://www.cnblogs.com/chevin/p/7893963.html
Copyright © 2011-2022 走看看