[ Mask + PolygonCollider 简易自定义多边形遮罩制作 ]

最终效果:


Step 1

  • 新建一个父节点,加上Mask_extend组件,在该父节点下,拖一张图。


Step 2

  • 利用触碰组件,多边形描点,把多边形轮廓做好。


Step 3

  • 制作光效。


Mask_extend脚本里其实就是把PolygonCollider.points传给了DrawNode.drawPoly.

  • 如果是凹多边形,原生平台会出错
  • 可能还有一些其他未知的bug

这个简易的方案可以解决一些遮罩的需求。但是最终还是要官方完善Mask组件吧。

完整的工程 ↓
Mask_extend.rar (488.9 KB)

工程creator 版本 1.3.1-beta.1

34赞

快赞我!!!

9赞

chrome上面可以运行,IE上面运行不了。

1赞

支持一下!晚上有时间了,学者做一个

1赞

必须赞!!!

1赞

剛好要用,太讚了,大哥:2:

在一个mask上面增加两个ploygonCollider的时候,发现只有一个是有效果的,而且位置偏移了,这个怎么破?是不支持多个么?

还是、好想法啊

這個現在 1.6 beta 6.2 不能用了 :sob:

我想做圓角遮罩,不知道有沒有大神有辦法?

參考 : http://forum.cocos.com/t/1-6-0-mask-extend/48761/4
的修改方式,

還有我將該節點 active = false 再做 true
所以 onEnable & onDisable 裡的代碼我去掉了,這樣就正常了

1赞

有大神能说下,如果是凹多边形应该怎么解决吗,如图,点3并不是和2连在一起的,反而是和4连在一起,实际上另外几个点也相当混乱,我只是举了点3和点4为例

目前这个功能实现了么?Jare大大

如何代码传入一个点数组来控制多边形?大大:sob:

我想裁剪随机生成山丘图片

有人吗。怎么昨天的提问沉了:joy:

mark

谢谢大神!谢谢大神!谢谢大神!这个救我命了

mark

凹多边形还是有bug的,别想了

1赞

在CocosCreator中可以创建一个Mask直接调用他的
this.node.getComponent(cc.Mask)._clippingStencil.clear();
for (let i = 0; i < apointArray.length; i+=3 ) {
let arr = [ apointArray[i], apointArray[i+1], apointArray[i+2] ];
this.node.getComponent(cc.Mask)._clippingStencil.drawPoly(arr, color, 0, color);
}

apointArray是把一个多边形包括凹变形通过 三角剖分——递归切耳算法(recursive cutting-ear)方式切分出来的
https://blog.csdn.net/berookie/article/details/38143909
http://www.flipcode.com/archives/Efficient_Polygon_Triangulation.shtml