专栏首页白玉无冰物理刚体挖洞!另一种实现!

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

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

回顾

物理挖洞-优化篇物理挖洞-实现篇 中介绍了一种用多边形链条组件(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

初始化

因为物理碰撞体需要物理刚体,我们可以加一些限制,并把这个菜单指向物理碰撞体的菜单中。

const { ccclass, property, menu, requireComponent } = cc._decorator;
@ccclass
@menu("i18n:MAIN_MENU.component.physics/Collider/PolygonEX-lamyoung.com")
@requireComponent(cc.RigidBody)
export default class PhysicsPolygonColliderEx extends cc.Component {
}

我们就可以在刚体节点中添加这个插件脚本了。

既然要用到多边形碰撞体,就定义一个多边形碰撞体数组。

private _physicsPolygonColliders: cc.PhysicsPolygonCollider[] = [];

因为 Clipper 中计算的结构是 {X,Y}

所以加个变量记录多边形顶点信息。

private _polys: { X: number, Y: number }[][] = [];

因为不同的库用的数据结构不同,所以添加两个转换方法。

private _convertVecArrayToClipperPath(poly: cc.Vec2[]) {
    return poly.map((p) => { return { X: p.x, Y: p.y } });
}

private _convertClipperPathToPoly2triPoint(poly: { X: number, Y: number }[]) {
    return poly.map((p) => { return new poly2tri.Point(p.X, p.Y) });
}

加一个初始化数据的接口。

init(polys: cc.Vec2[][]) {
    this._polys = polys.map((v) => { return this._convertVecArrayToClipperPath(v) });
}

计算多边形

参考 Clipper 中的使用例子,写一个多边形差集调用。

//polyDifference(poly: cc.Vec2[]) {
const cpr = new ClipperLib.Clipper();
const subj_paths = this._polys;
const clip_paths = [this._convertVecArrayToClipperPath(poly)]
cpr.AddPaths(subj_paths, ClipperLib.PolyType.ptSubject, true);
cpr.AddPaths(clip_paths, ClipperLib.PolyType.ptClip, true);
const subject_fillType = ClipperLib.PolyFillType.pftEvenOdd;
const clip_fillType = ClipperLib.PolyFillType.pftEvenOdd;
const solution_polytree = new ClipperLib.PolyTree();
cpr.Execute(ClipperLib.ClipType.ctDifference, solution_polytree, subject_fillType, clip_fillType);
const solution_expolygons = ClipperLib.JS.PolyTreeToExPolygons(solution_polytree);
this._polys = ClipperLib.Clipper.PolyTreeToPaths(solution_polytree);

分割多边形并添加刚体

参考 poly2tri 中的使用,写一个多边形分割成三角形的调用。记得要把上面返回的数据转成 poly2tri 中可以使用的数据格式。

// polyDifference(poly: cc.Vec2[]) {
let _physicsPolygonColliders_count = 0;
for (const expolygon of solution_expolygons) {
    const countor = this._convertClipperPathToPoly2triPoint(expolygon.outer);
    const swctx = new poly2tri.SweepContext(countor);
    const holes = expolygon.holes.map(h => { return this._convertClipperPathToPoly2triPoint(h) });
    swctx.addHoles(holes);
    swctx.triangulate();
    const triangles = swctx.getTriangles();
    // 逐一处理三角形...
}

然后再逐一处理分割好的三角形,修改 cc.PhysicsPolygonColliderpoints 属性。

// 逐一处理三角形...
for (const tri of triangles) {
    let c = this._physicsPolygonColliders[_physicsPolygonColliders_count];
    if (!c) {
        //没有的话就创建
        c = this.addComponent(cc.PhysicsPolygonCollider);
        c.friction = 0;
        c.restitution = 0;
        this._physicsPolygonColliders[_physicsPolygonColliders_count] = c;
    }
    c.points = tri.getPoints().map((v, i) => {
        return cc.v2(v.x, v.y)
    });
    c.apply();
    _physicsPolygonColliders_count++;
}
// 剩余不要用的多边形清空。
this._physicsPolygonColliders.slice(_physicsPolygonColliders_count).forEach((v => {
    if (v.points.length) {
        v.points.length = 0;
        v.apply();
    }
}));

绘制泥土

只要在遍历三角形的时候逐点画线就行了。

if (i === 0) ctx.moveTo(v.x, v.y);
else ctx.lineTo(v.x, v.y);

添加命令队列

为了不让每帧计算量过多,添加一个命令队列。

private _commands: { name: string, params: any[] }[] = [];

pushCommand(name: string, params: any[]) {
    this._commands.push({ name, params });
}

在每次更新的时候,取出几个命令去执行。

lateUpdate(dt: number) {
    if (this._commands.length) {
        // 每帧执行命令队列
        for (let index = 0; index < 2; index++) {
            const cmd = this._commands.shift();
            if (cmd)
                this[cmd.name](...cmd.params);
            else
                break;
        }
    }
}

涂抹地形

整体思路和 物理挖洞-优化篇物理挖洞-实现篇 差不多。不清楚的话,可以回看这两篇文章。

这次不同的是,加了一个涂抹步长控制,当涂抹间隔太小的时候,就不参与计算。

private _touchStartPos: cc.Vec2;
private _touchStart(touch: cc.Touch) {
    this._touchStartPos = undefined;
    this._touchMove(touch);
}

private _touchMove(touch: cc.Touch) {
    const regions: cc.Vec2[] = [];
    const pos = this.graphics.node.convertToNodeSpaceAR(touch.getLocation());

    const count = DIG_FRAGMENT;
    if (!this._touchStartPos) {
        // 画一个圆(其实是多边形)
        for (let index = 0; index < count; index++) {
            const r = 2 * Math.PI * index / count;
            const x = pos.x + DIG_RADIUS * Math.cos(r);
            const y = pos.y + DIG_RADIUS * Math.sin(r);
            regions.push(this._optimizePoint([x, y]));
        }
        this._touchStartPos = pos;
    } else {
        const delta = pos.sub(this._touchStartPos);
        // 手指移动的距离太小的话忽略
        if (delta.lengthSqr() > 25) {
            // 这里是合并成一个顺滑的图形  详细上一篇文章
            const startPos = this._touchStartPos;
            for (let index = 0; index < count; index++) {
                const r = 2 * Math.PI * index / count;
                let vec_x = DIG_RADIUS * Math.cos(r);
                let vec_y = DIG_RADIUS * Math.sin(r);
                let x, y;
                if (delta.dot(cc.v2(vec_x, vec_y)) > 0) {
                    x = pos.x + vec_x;
                    y = pos.y + vec_y;
                } else {
                    x = startPos.x + vec_x;
                    y = startPos.y + vec_y;
                }
                regions.push(this._optimizePoint([x, y]));
            }
            this._touchStartPos = pos;
        }
    }

    if (regions.length)
        this.polyEx.pushCommand('polyDifference', [regions, this.graphics]);
}

private _touchEnd(touch: cc.Touch) {
    this._touchStartPos = undefined;
}

小结

以上为白玉无冰使用 Cocos Creator v2.3.3 开发"物理挖洞之多边形碰撞体挖洞"的技术分享。如果对你有点帮助,欢迎分享给身边的朋友。

本文分享自微信公众号 - 白玉无冰(lamyoung-com),作者:lamyoung

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-05-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一个全能的挖孔 Shader

    TouchBlocker 是用来限制可点击的节点的独立组件,完整文件在 eazax-ccc/component 目录下。

    白玉无冰
  • 盯着双11开喵铺里的小人许久,我也写了一个!cocos creator !

    ◇ 打开支付宝,天猫双11合伙人全面开喵铺的活动映入眼帘。点击进去后,我竟然盯着小人走路许久,琢磨着,自己也写个玩玩吧!

    白玉无冰
  • 竟然可以用 effect 玩水?Cocos Creator 3D !

    最近逛论坛时,看到一位大佬在分享各种 shader 特效。基于其中的水波 shader ,白玉无冰写了一个玩水效果!文章底部获取完整代码!还可以试试水哦!

    白玉无冰
  • go 无锁队列

    无锁队列适用场景:      两个线程之间的交互数据, 一个线程生产数据, 另外一个线程消费数据,效率高 缺点:需要使用固定分配的空间,不能动态增加/减少长度...

    李海彬
  • 微软 VSCode IDE 源码分析揭秘

    ? 作者:zanewang,腾讯 CSIG 工程师 ? 目录 (1)简介 (2)技术架构 (3)启动主进程 (4)实例化服务 (5)事件分发 (6)进程...

    腾讯技术工程官方号
  • PHP实现统计代码行数小工具

    砸漏
  • 基于动态代理 Mock Dubbo 服务的实现方案

    公司目前 Java 项目提供服务都是基于 Dubbo 框架的,而且 Dubbo 框架已经成为大部分国内互联网公司选择的一个基础组件。

    有赞coder
  • 自适应比特率流媒体与CDN性能

    本篇是来自Seattle Video Tech 2019年3月的演讲,演讲者是来自Brightcove的研究员Yuriy Reznik,主题是“自适应比特率流媒...

    用户1324186
  • SpringFramework之ViewResolver优化

    Springboot中,对mvc进行自动化配置时在WebMvcAutoConfiguration中会自动注入InternalResourceViewResolv...

    克虏伯

扫码关注云+社区

领取腾讯云代金券