Cocos Creator 物理刚体挖洞新方案（下）

最新推荐文章于 2022-11-18 18:05:07 发布

Cocos 引擎

最新推荐文章于 2022-11-18 18:05:07 发布

阅读量213

点赞数

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5ODAxNTM2NA==&mid=2659651709&idx=2&sn=6e55084b2737346a7eacdd34612e413f&chksm=bda288968ad50180a14f168546b85f35aabaa919fe84b9c9798a8c3954c90893baa7eaab1e88&scene=27

版权

回顾

前一篇 Cocos Creator 物理刚体挖洞新方案（上）的整体思路是，先用 Clipper 去计算多边形，接着用 poly2tri 将多边形分割成多个三角形，最后用多边形刚体填充。

这一篇准备介绍这个实现方式遇到的新坑，以及一些优化。

填充纹理

之前是使用cc.graphic作图的，可能有小伙伴需要填充更好看的纹理图片。

这时，可以巧用 cc.mask 中的 _graphic。

可以清楚的看到， mask 的裁剪实质上是由一个 graphic 作图实现的。

所以我们上面的 graphic 组件可以替换成 mask 中的 _graphic。在该节点添加一个 cc.mask 组件即可。

在代码中获取一下这个 graphic，原来的逻辑不变。

this.graphics = this.node_dirty.getComponent(cc.Mask)['_graphics'];

准备一张 256x256 的图片(一定要是2的n次幂)，设置为 repeat 模式。并将这个张图片放在 mask 节点下，铺满界面。

看看效果怎么样。

奇怪的 bug

有群友(感谢@两年)反馈，滑动时有概率出现刚体消失。

仔细琢磨后，发现是 poly2tri 这个库有些限制。用 clipper 计算的结果还要加一层处理。

先看第一个报错。

大概是说有自交的多边形。

我也没办法呀，这结果是 clipper 算出来的。

还好，在clipper 官方文档翻了一阵。找到一个可以用的。

https://sourceforge.net/p/jsclipper/wiki/documentation/

加一个参数，可以实现严格简单的多边形(但是效率更低)。

const cpr = new ClipperLib.Clipper(ClipperLib.Clipper.ioStrictlySimple);

再看另一种情况下的报错。

这个大概是说，出现了共线不支持。

经过我细心分析(日志大法)，发现是 clipper 计算的结果中的 holes 和 outer 之间有重复点的时候，就会产生错误。

可惜这次没在文档中找到相应的方法处理。

只好自己写一个方法，计算后再过滤一下这些重复的节点。

private _convertClipperPathToPoly2triPoint(poly: { X: number, Y: number }[], exclude: poly2tri.Point[] = []): poly2tri.Point[] {
    const newPos: poly2tri.Point[] = [];
    poly.forEach((p, i) => {
        const p_now = new poly2tri.Point(p.X, p.Y)
        const isIn = exclude.some((e_p) => {
            if (e_p.equals(p_now)) {
                return true;
            }
        })
        if (!isIn) {
            newPos.push(p_now);
            exclude.push(p_now);
        }
    })
    if (newPos.length > 2)
        return newPos;
    else
        return [];
}

测试后，暂时没出现这个问题了。