Cocos 利用Mask使触摸穿透Alpha区域

今天碰到一个圆形图片重叠,还要区分点击的问题。
"圆形图片"
cocos节点默认的on(TOUCH_START等等)事件会判断整个节点的contentSize,
这使得四角没有图像的区域,也会触发事件。
老版本要修改node节点的_hitTest函数,自行判断触摸位置是否为透明。

今天又看了下新版本的源码,发现有判断Mask的逻辑。试着在图片父节点上添加下Mask组件,果然只有Mask区域内的位置会触发事件。

如果是不规则的Mask,修改Mask的Type为IMAGE_STENCIL,SpriteFrame传入一个有Alpha区域PNG图片即可。调整Alpha阈值可控制透明区域的显示,修改Inverted属性反转,省下很多功夫。

更正上面的错误,Mask组件重写了_hitTest方法,里面对于IMAGE_STENCIL点击的判断跟RECT是一样的,也就是说无法判断出不规则区域。目前可以判断不规则区域的点击办法只有Collider了

使用cc.Intersection.pointInPolygon方法,详情可以查阅文档或源码。
碰撞组件文档

"圆形图片"

缺点:Mask组件十分消耗性能,能少用尽量少用。