前言
最近有需求需要研究下切水果游戏，在此整理一下思路。
如何实现切割？
-
首先想到的就是官方的物理demo中的按个切割案例：
https://github.com/cocos-creator/physics-samples.git -
不幸的是，这个案例是使用creator3.0正式版制作的。里边的api已经分为了3d和2d。但是对于一个2.4.x的项目来说，是没有区分2d和3d的api的。
-
所以我又找到了之前官方提供的js版本的物理demo；先是将js文件改成ts文件，然后根据两个项目文件的对比，使用新的物理demo做相应的更改，得出了最后可以运行的多边形切割代码。
-
对于切割部分的代码有了，接下来就是挂上精灵，实现多边形遮罩了。
如何实现遮罩？
首先想到的就是Mask组件了。而Creator提供了这个强大的Mask组件也确实不负所望。我们只要在多边形节点上再挂上一个Mask组件，在多边形节点下再添加一个水果精灵，那么在编辑器部分的操作基本也就结束了。
用代码控制遮罩的形状
setMaskPoints(points: cc.Vec2[]) {
let mg: cc.Graphics = this.mask._graphics;
if (!mg) {
return;
}
mg.clear();
for (let index = 0; index < points.length; index++) {
const to = points[index];
if (index == 0) {
mg.moveTo(to.x, to.y);
} else {
mg.lineTo(to.x, to.y);
}
}
mg.close()
mg.fill();
}
以上这段代码，也就是绘制一个图形给mask，实现多边形遮罩了。
总结
对于简单的玩法需求，这个做法已经可以满足了。但是这里边要注意多个mask带来的dc的影响，也就是同屏有多个水果时，dc的数量应该受到足够的注意。
思维延申
- 是否可以使用mesh实现多边形遮罩？也就是精灵的裁剪。
- 是否可以不使用物理引擎获得切割后的多边形？
- 是否可以不使用物理引擎模拟自由落体移动？
如果能使用上述提供的思路实现切割和遮罩相信性能会有很大的提升。代码量也会有所减少。
代码获得
老规矩，关注公众号《微笑游戏》，输入“切水果”即可获得完整demo。
