CocosCreator实现不规则的点击区域监听

开发一个农场小游戏，用常规的点击区域，会产生点击区域重叠问题。（展示的图片是已经调整为cc.PolygonCollider方法之后）

查询网上的方法，大部分是把节点变为3d就可以调节点击区域，但不知道为什么，区域已经如图所示，但是我所点击的土地会偏移到上面那块土地，这个问题由于项目时间紧张就没有去深究。还有农场常见的是可以拖动土地背景的，用普通的挂载办法，button会遮挡住背景的监听，所以又找到了这个办法，使用cocos自带的碰撞组件：cc.PolygonCollider，用这个组件来划定区域，判定点击的落点是否在区域内，要注意转化成世界坐标再进行判断。

Editing勾选之后，可以手动调节每个点的位置来框选图形，就像ps里的多边形套索工具。points就是几个点。

设置完成之后，脚本里可以判定我点击的落点是否在区域内。(这里在其他脚本给farmbg添加了拖动，就不在这里写出了)

		//stopPropagation()阻止事件冒泡
    	this.farmbg.on(cc.Node.EventType.TOUCH_MOVE, (touch) => {
            touch.stopPropagation();
        }, this);
        //
        this.farmbg.on(cc.Node.EventType.TOUCH_END, (touch) => {
            for (let i = 0; i < 15; i++) {
                if (this.polygonHitTest(i, touch.getLocation()) == true) {
                   console.log("落点在区域内")；
                }
            }
        }, this);
        
        //此方法判定是否在区域内，返回的值为true或false，因为我这土地有15块所以要分开进行判断，直到找到正确的点击到的土地。
        //cc.Intersection.pointInPolygon()是测试一个点是否在一个多边形的方法。
        //point为点击的落点的世界坐标，polygonCollider.points则是 polygonCollider组件points围成的多边形范围。
        polygonHitTest(i, point) {
	        var polygonCollider = this.landsButton[i].getComponent(cc.PolygonCollider);
	        point = this.landsButton[i].convertToNodeSpaceAR(point);
	        return cc.Intersection.pointInPolygon(point, polygonCollider.points);
	    }

这样就避免的button组件覆盖住底下大背景的监听，以及可以准确点击到需要的土地区域。