creator小功能----按钮Button的两种实现方式，及事件响应

最新推荐文章于 2023-12-29 08:32:34 发布

^随风~~

最新推荐文章于 2023-12-29 08:32:34 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Cocos Creator笔记文章标签： creator uibutton

本文链接：https://blog.youkuaiyun.com/ccnu027cs/article/details/104457737

本文介绍了在Creator中创建按钮的两种方式：编辑器直接创建和代码实现，并详细讲解了如何通过代码触发按钮响应事件，包括Component.EventHandler的用法。同时，讨论了Button的属性，特别是Transition和disabledSprite对自动灰化效果的影响，以及如何添加点击事件回调，包括通过属性检查器和脚本添加回调的不同方法。

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

按钮button是app中经常要用到的功能组件；

那个按钮在creator中有哪些实现方式呢？

第一. 直接编辑器创建按钮：创建节点----创建UI节点----Button按钮；

 // 直接在编辑器里面绑定
        button: {
            type: cc.Button, // 
            default: null,
        },




// 获取button组件
 this.start_button = this.node.getChildByName("ks_up").getComponent(cc.Button);

第二. 代码实现：先是创建一个单色精灵；然后添加下面代码；

        // 添加button组件
        console.log("btn this.node:", this.node);
        var _node = this.node.getChildByName("btn_test");
        console.log("btn node:", _node);
        this.red_button = _node.addComponent(cc.Button);
        console.log("btn red_button:", this.red_button);

        // 添加一个响应函数
        var click_event = new cc.Component.EventHandler();
        click_event.target = this.node;// 这个 node 节点是你的事件处理代码组件所属的节点
        click_event.component = "button";   // 这个是代码文件名
        click_event.handler = "on_red_button_click"