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

Creator 2.x
#1

最终效果：

Step 1

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

001.gif439×647 371 KB

Step 2

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

002.gif833×500 1.28 MB

Step 3

  • 制作光效。

003.gif1055×877 2.5 MB

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

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

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

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

工程creator 版本 1.3.1-beta.1

35赞
#2

快赞我！！！

9赞
#3

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

1赞
#4

支持一下！晚上有时间了，学者做一个

1赞
#5

必须赞！！！

1赞
#6

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

#7

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

#8

还是、好想法啊

#9

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

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

#10

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

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

1赞
#11

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

#12

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

#13

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

#14

5LCZX]V)`66RV]Q)TVWN]J9.png1048×544 46.2 KB
我想裁剪随机生成山丘图片

#15

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

#16

mark

#17

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

#18

mark

#19

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

1赞
#20

在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