物理刚体挖洞！另一种实现！

这次就不用物理链条了，换一种方式实现。

回顾

在 物理挖洞-优化篇 和 物理挖洞-实现篇 中介绍了一种用多边形链条组件(cc.PhysicsChainCollider)实现物理挖洞的方法。这次打算用多边形碰撞组件(cc.PhysicsPolygonCollider)去实现物理挖洞。

建议先看前两篇的讲解，有助于更快理解这篇文章。

效果预览

微信小游戏-ios-端效果预览

实现步骤

整体思路是，先用 Clipper 去计算多边形，接着用 poly2tri 将多边形分割成多个三角形，最后用多边形刚体填充。

引入第三方库

Clipper

Clipper 是一个强大的用于多边形计算的运算库。前往下面这个地址下载，并作为插件导入 creator 。

http://jsclipper.sourceforge.net

为什么这次不用 物理挖洞-实现篇 中的 PolyBool 呢？

经测试发现 Clipper 的效率会比 PolyBool 高，并且 Clipper 内置了一个方法可以明确知道哪些多边形是洞。

poly2tri

poly2tri 是一个把多边形分割成三角形的库。下载地址如下：

https://github.com/r3mi/poly2tri.js

poly2tri 的使用有一些要注意的，大致就是不能有重复的点，不能有相交的形状。

初始化准备

先在场景中添加一个物理节点，一个绘图组件(用来画图)。

接着把物理引擎打开，监听触摸事件。

// onLoad() {
// 多点触控关闭
cc.macro.ENABLE_MULTI_TOUCH = false;
cc.director.getPhysicsManager().enabled = true;

this.node_dirty.on(cc.Node.EventType.TOUCH_START, this._touchMove, this);
this.node_dirty.on(cc.Node.EventType.TOUCH_MOVE, this._touchMove, this);
// }

扩展多边形碰撞的组件

为了方便管理多边形碰撞组件，新建一个脚本 PhysicsPolygonColliderEx.ts。

初始化

因为物理碰撞体需要