cocos creator基礎-(七)cc.Button使用、以及不規則按鈕區域的實現

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，方便好用)

參考鏈接 http://blog.zovew.com/2018/03/18/Cocos-Creator不規則觸摸點擊實現/

可以利用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);
        }
    }
});