cocos creator 基础一文通(七)--button-优快云博客

本文链接：https://blog.youkuaiyun.com/finedayforu/article/details/104154549

本文详细介绍了Cocos Creator中的Button组件，包括如何添加按钮、按钮的属性如transition模式，以及如何处理按钮响应事件。还讨论了cc.Button类型、添加响应事件的方法、代码中操作Button的方式，以及Component.EventHandler的角色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. button按钮组件

1.添加按钮的方法

①. 直接创建button组件

②. 组件上创建button组件

二. button按钮属性

其中,transition 属性有一下集中模式

None : 无
COLOR: 颜色变换
SPRITE: 精灵贴图变换
SCALE: 大小变换

其中:

①. 颜色变换和贴图变换类似都有按下悬停禁用状态,只不过一个变换颜色一个变换贴图

duration 是变换动画过渡时长

②. 大小变换只有过渡和大小两个属性

三. 按钮响应事件

调用时,找: 节点→脚本组件→代码函数

//注意:为大小为0的节点挂载button组件会挂载失败!!!!(小心,空节点挂事件易错)

1.添加响应事件接口

2. 选择节点(响应事件脚本挂载那个节点上就选哪个)

3. 然后就能在节点上找到脚本,在脚本中找到对应的写好的响应函数

4. 设置传递信息(字符串) //可能好多按钮调这个响应函数,所以传递一个信息来区别和沟通

5. 程序里接收按钮事件和传递信息

四. cc.Button类型

五. 代码中使用cc.Button

1. 获取button

①.设置进属性面板

②.通过查找子节点,再获取组件

2. 代码添加button组件再添加响应函数

添加组件addComponent即可

加入响应函数:实际上是往 Button对象的 clickEvents 属性(实际为一个列表,里面元素为Component.EventHandler类型)中添加元素

                //添加button组件
        this.get_a_button3=this.node.getChildByName("red_button").addComponent(cc.Button);
        //创建EventHandler类对象
        var eventHandler = new cc.Component.EventHandler();
        eventHandler.target = this.node; //节点
        eventHandler.component = "game_scence1";
        eventHandler.handler = "on_red_button_click";
        eventHandler.customEventData = "haha red!777777";
        // 把EventHandler类实例对象加入clickEvent列表中;
        this.get_a_button3.clickEvents.push(eventHandler);
        // 或者可以写:this.get_a_button3.clickEvents=[eventHandler] 如果后续有其他事件再往里面加

3. 代码触发按钮事件

emit触发

                this.scheduleOnce(function(){
            var click_events=this.get_a_button3.clickEvents;
            for(var i=0;i<click_events.length;i++){      //因为不知道按钮有几个事件,所以遍历了一下
                var component_handle=click_events[i];
                component_handle.emit(["","red_button7777"]);
            }
        },3);
        //如果能得到具体的eventHandler 也可以直接发射.
        eventHandler.emit(["","lolololo7777"]);