CocosCreator-多边形碰撞组件PolygonColider实现不规则按钮和触摸事件

本文链接：https://blog.csdn.net/qq_44695727/article/details/123600441

创建碰撞组件PolygonColider

如图

给按钮添加多边形碰撞组件PolygonColider，并设置Points，勾选Editing可以看见Points的绿点。

可以点击Regenerate Points自动生成点，也可以自己拖

代码实现

设置按钮


    properties: {
        
        btnUp: { 
            // 按钮-上
            type: cc.Node,
            default: null,
        },

    },

cc.Node.getComponents(类名or类型)获取节点下对应类名or类型的所有组件列表
cc.Node.getComponent获取单个

this.btnUp = this.node.getComponents(cc.PolygonCollider)[0];

cc.eventManager.addListener({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            onTouchBegan:(touch, event) => {
                var touchLoc = this.node.convertToNodeSpaceAR(touch.getLocation());
                if (cc.Intersection.pointInPolygon(touchLoc, this.btnUp.points)) {
                    console.log("yse is hit: ");                   
                } else {
                    console.log("no is hit: ");    
                }
                return true;
            },
        },this.node);

最终代码+触摸事件

注册按钮+触摸事件+判断点击点是否在多边形内

    onLoad () {
        // 注册按钮
        this.btnUp = this.node.getComponents(cc.PolygonCollider)[0];
        this.btnRight = this.node.getComponents(cc.PolygonCollider)[1];
        this.btnDown = this.node.getComponents(cc.PolygonCollider)[2];
        this.btnLeft = this.node.getComponents(cc.PolygonCollider)[3];

        // 触摸开始，多点触控，后面的手指同样会触发
        this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
        // 触摸结束，手指离开屏幕时
        this.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);
        // 触摸被取消，当系统停止跟踪触摸的时候触发
        // this.node.on('touchcancel', this.onTouchCancel, this);
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
    },

    // 触摸开始
    onTouchStart(event) {
        console.log("触摸开始");   
        this.checkBtnPolygonCollider(event);
    },

    // 触摸结束
    onTouchEnd(event) {
        console.log("触摸结束");      
    },
    
    onTouchCancel(event) {
        console.log("触摸取消");       
    },

    /**
     * 检查按钮点击是否在多边形内
     * @param event 事件
     */
    checkBtnPolygonCollider(event) {
        var touchLoc = this.node.convertToNodeSpaceAR(event.touch.getLocation());
        if (cc.Intersection.pointInPolygon(touchLoc, this.btnUp.points)) {
            console.log("yse is hit: 上");                   
        }
        if (cc.Intersection.pointInPolygon(touchLoc, this.btnRight.points)) {
            console.log("yse is hit: 右");                 
        }
        if (cc.Intersection.pointInPolygon(touchLoc, this.btnDown.points)) {
            console.log("yse is hit: 下");                   
        }
        if (cc.Intersection.pointInPolygon(touchLoc, this.btnLeft.points)) {
            console.log("yse is hit: 左");                  
        }
    },

注：this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);无法传递用户数据

        // var clickEventHandler = new cc.Component.EventHandler();
        // clickEventHandler.target = this.btnJump.node; //这个 node 节点是你的事件处理代码组件所属的节点，这里就是Button2
        // clickEventHandler.component = "direction";//这个是脚本文件名
        // clickEventHandler.handler = "btnClick"; //回调函名称
        // clickEventHandler.customEventData = "click2 user data"; //用户数据

        // var button = this.btnJump.node.getComponent(cc.Button); //获取cc.Button组件
        // button.clickEvents.push(clickEventHandler); //增加处理