1: 掌握按钮的使用;

 

cc.Button

 

1:添加按钮的方法

(1)直接创建带Button组件的节点;

(2) 先创建节点，再添加组件;

2:按钮组件, 按钮是游戏中最常用的组件, 点击然后响应事件;

3: 按钮的过渡效果:

过渡: 普通状态, 鼠标滑动到物体上, 按下状态, 禁用状态

　　(1)没有过渡，只有响应事件;

　　(2)颜色过渡, 过渡效果中使用颜色;

　　(3)精灵过渡，使用图片过渡;

　　(4)缩放过渡, 选项，在disable的时候是否置灰;

4: 按钮禁用;

5: 按钮添加响应事件 --> 节点-->组件 --> 代码的函数;

6: 按钮传递自定义参数; ---> 字符串对象;

7: Button响应这个触摸点击，所以Button所挂的这个节点，一定要有大小,如果你向大小(0, 0)的节点上，挂一个Button,这个是无法响应点击事件;+

 

代码使用cc.Button

1: 代码添加/获取cc.Button组件;

2: 代码里面添加按钮的响应事件;

3: 代码触发按钮指定的回掉函数;

4: Component.EventHandler

　　var eventHandler = new cc.Component.EventHandler();

　　eventHandler.target = newTarget;

　　eventHandler.component = "MainMenu";

　　eventHandler.handler = "OnClick";

　　eventHandler.customEventData = "my data";

　　eventHandler.emit(["param1", "param2", ....]);

 

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        // },        // ...        // 直接在编辑器里面绑定        button: {            type: cc.Button, //             default: null,        },    },    // use this for initialization    onLoad: function () {        // 获取button组件        this.start_button = this.node.getChildByName("ks_up").getComponent(cc.Button);         // 添加button组件        this.red_button = this.node.getChildByName("red_button").addComponent(cc.Button);        // 添加一个响应函数        var click_event = new cc.Component.EventHandler();        click_event.target = this.node;        click_event.component = "game_scene";        click_event.handler = "on_red_button_click";        click_event.customEventData = "red_button_data_77777";        // this.red_button.clickEvents = [click_event];        this.red_button.clickEvents.push(click_event);        // end         // 代码触发按钮的响应事件，而不用自己去触摸        this.scheduleOnce(function() {            var click_events = this.red_button.clickEvents;            for(var i = 0; i < click_events.length; i ++) {                var comp_env_handle = click_events[i];                // 在代码里面触发按钮的响应函数                comp_env_handle.emit(["", "red_button_data_77777"]);            }        }.bind(this), 3);        // end     },    on_red_button_click: function(e, custom) {        console.log("on_red_button_click: ", custom);    },    // 关卡按钮1-10, 第几关    //  e 本次触摸的触摸事件    // customEventData is String;    on_button_click: function(e, level) {        level = parseInt(level);        console.log("on_button_click called:", level);    },    // called every frame, uncomment this function to activate update callback    // update: function (dt) {
             // },});

 

实现不规则的按钮点击区域(copy大佬的方法重写_hittest，方便好用)

参考链接 

可以利用PolygonCollider组件实现一个不规则碰撞的方法。

1. Node节点需要添加cc.PolygonCollider，否则按原函数处理
2. 获取cc.PolygonCollider组件，检测碰撞。触摸点坐标需要转NodeSpace，并且Anchor为(0.5,0.5)即:节点中心为原点

核心代码

 

cc.Class({    extends: cc.Component,    editor: CC_EDITOR && {        menu: 'i18n:Component/PolygonHitTest',    },    properties: {    },    /**     * 加载     */    onLoad() {        this.node._oldHitTest = this.node._hitTest.bind(this.node);        this.node._hitTest = this.polygonHitTest.bind(this.node);    },    /**     * 不规则多边形触摸测试     * @param {触摸点} point      * @param {监听} listener      */    polygonHitTest(point, listener) {        var polygonCollider = this.getComponent(cc.PolygonCollider);        if (polygonCollider) {            point = this.convertToNodeSpace(point);            point.x -= this.getContentSize().width / 2;            point.y -= this.getContentSize().height / 2;            return cc.Intersection.pointInPolygon(point, polygonCollider.points);        } else {            return this._oldHitTest(point, listener);        }    }});