LazyAn-—CocosCreator小技巧-简单版自定义多边形遮罩

前阵子做了个带有杯子的游戏，各种各样的杯子需要带有指示线；不做处理的时候是这个样子的：

实际开发中需要把两边多余的部分隐藏掉，这时候第一个想到的是应该用Mask来遮罩处理，但是发现Mask组件的三个遮罩类型并不能满足所有情况：

因为杯子原图其实是一个166*166的图，所以遮罩会保留杯子两侧的虚线

后来在引擎CCMask.js

（路径：Creator\2.2.2\resources\engine\bin\.cache\dev\cocos2d\core\components） 源码中发现CCMask 声明了this._graphics

并且执行了_createGraphics方法

在_createGraphics里创建了Graphics组件

了解了之后我们可以在cocos里获取cc.Mask组件的_Graphics，并用Graphics组件的绘图接口来自定义一个形状的遮罩；

首先我们创建一个渲染节点glass，在glass下添加一个子节点（命名：mask），再把红色虚线放在mask节点下，给mask节点挂上Mask组件，再新建一个脚本PolygonMask；

写一个mask方法获取Mask组件的_graphics

mask() {        let graphics = this.node.getComponent(cc.Mask)['_graphics'];    }

获取_graphics之后我们需要一个点数组来绘制自定义多边形遮罩；怎么获取这个点数组呢。想到可以用PolygonCollider组件里的Points多边形顶点数组来代替；给mask节点挂上PolygonCollider组件，我们手动编辑一下，绘制出需要遮罩的轮廓：

然后在代码中获取：

mask() {        let graphicsPosArr = this.node.getComponent(cc.PolygonCollider).points;        let graphics = this.node.getComponent(cc.Mask)['_graphics'];        graphics.clear(false);        graphics.moveTo(graphicsPosArr[0].x, graphicsPosArr[0].y);        for (let i = 1; i < graphicsPosArr.length; i++) {            graphics.lineTo(graphicsPosArr[i].x, graphicsPosArr[i].y);        }        graphics.close();        graphics.stroke();        graphics.fill();    }

在start函数中执行以下mask方法，预览运行：

关注公众号“An的世界” 回复“自定义遮罩”获取示例工程

———————————————————————————————

阅读更多：

---

CocosCreator小技巧-修改TypeScript默认模板

《合成大西瓜》是怎么做的？还原上头玩法