【工具類】CocosCreator 不規則按鈕點擊(多邊形，PolygonCollider)

cocos版本：2.4.4

游戲中可能會有多邊形按鈕，例如下圖中的棱形按鈕。

 

 

因為常規cc.Button只能檢測矩形范圍。例如點擊下圖中紅點位置。點擊的是按鈕2，但是會觸發按鈕1的點擊。

 

 

給按鈕添加多邊形碰撞組件PolygonColider，並設置Points，勾選Editing可以看見Points的綠點。

 

點擊按鈕時，檢查觸摸點是否在多邊形內。如果在多邊形內則算點擊成功，在多邊形外則算沒有點擊成功。

代碼如下：

const { ccclass, property } = cc._decorator;


@ccclass
export default class MainScene extends cc.Component {

    @property(cc.Node)
    btn1: cc.Node = null;
    @property(cc.Node)
    btn2: cc.Node = null;

    start() {
        this.btn1.on(cc.Node.EventType.TOUCH_END, (e: cc.Event.EventTouch) => {
            let bHit = this.checkBtnPolygonCollider(this.btn1, e);
            console.log("點擊1:", bHit);
        }, this, true)

        this.btn2.on(cc.Node.EventType.TOUCH_END, (e: cc.Event.EventTouch) => {
            let bHit = this.checkBtnPolygonCollider(this.btn2, e);
            console.log("點擊2:", bHit);
        }, this, true)
    }

    /**
     * 檢查按鈕點擊是否在多邊形內
     * @param btn 按鈕
     * @param e   點擊事件
     */
    private checkBtnPolygonCollider(btn: cc.Node, e: cc.Event.EventTouch) {
        let collider = btn.getComponent(cc.PolygonCollider);
        let points = collider.points;
        let local = btn.convertToNodeSpaceAR(e.getLocation());
        let bHit = cc.Intersection.pointInPolygon(local, points);
        return bHit;
    }
}