cocos creator使用物理引擎实现画刚体线段的游戏

cocos creator v2.0.5
Github地址
游戏实现效果是: 通过鼠标画刚体线段, 让小球掉落进相同颜色的方块容器中.

效果图.gif

四个碰撞分组:

小球, 画出的线段, 四周的墙壁, 底部带颜色的容器.

碰撞分组.png

四个碰撞组件的刚体类型为:
小球 -- Dynamic(动态)
线段 -- Static(静态)
墙壁 -- Static(静态)
容器 -- Static(静态)

实现思路:

监听触摸滑动事件, 通过cc.Graphics来涂色显示线段, 通过使用cc.PhysicsBoxCollider来给线段添加刚体. 由于没有线段形状的刚体, 所以实现效果需要把线段有限分割成一个个的PhysicsBoxCollider. 相当于在画出的线段上分割出来一个个的点, 通过记录当前点和上一个点的矢量距离, 大于线段预制体的宽度则添加一个小线段, 若干个小线段刚体, 组成了效果图中的一整个线段刚体.

实现代码:

cc.Class({
    extends: cc.Component,

    properties: {
        linePrefab: cc.Prefab,
        linePhysics: cc.Graphics
    },

    onLoad: function () {
        var manager = cc.director.getPhysicsManager();
        manager.enabled = true;
        manager.debugDrawFlags = 0;
    },

    start: function () {
        this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStartCallback, this);
        this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMoveCallback, this);
        this.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEndCallback, this);
    },

    onTouchStartCallback: function (event) {
        console.log("touch start ... ");
        let pos = this.node.convertToNodeSpaceAR(event.getLocation());
        this.linePhysics.moveTo(pos.x, pos.y);
        this.recordPos = cc.v2(pos.x, pos.y);
    },

    onTouchMoveCallback: function (event) {
        let pos = this.node.convertToNodeSpaceAR(event.getLocation());
        this.linePhysics.lineTo(pos.x, pos.y);
        this.linePhysics.stroke();
        this.linePhysics.moveTo(pos.x, pos.y);

        // 记录当前手移动到的点
        this.currentPos = cc.v2(pos.x, pos.y);
        //求两点之间的距离
        let subVec = this.currentPos.subSelf(this.recordPos);
        let distance = subVec.mag() + 5;
        // 如果距离大于一定值，这里的25是预制体的width
        if (distance >= 25) {
            // 给定方向向量
            let tempVec = cc.v2(0, 10);
            // 求两点的方向角度
            let rotateVec = subVec.signAngle(tempVec) / Math.PI * 180 - 90;
            // 创建预制体
            let lineItem = cc.instantiate(this.linePrefab);
            lineItem.rotation = rotateVec;
            lineItem.parent = this.node;
            // 这一步是为了防止两个线段之间出现空隙，动态改变预制体的长度
            lineItem.setPosition(pos.x, pos.y);
            lineItem.width = distance;
            lineItem.getComponent(cc.PhysicsBoxCollider).offset.x = -lineItem.width / 2
            //cc.log(lineItem.getComponent(cc.PhysicsBoxCollider).size);
            //cc.log(lineItem.getComponent(cc.PhysicsBoxCollider).size.width, lineItem.width);
            lineItem.getComponent(cc.PhysicsBoxCollider).size.width = lineItem.width;
            lineItem.getComponent(cc.PhysicsBoxCollider).apply();
            // 将此时的触摸点设为记录点
            this.recordPos = cc.v2(pos.x, pos.y);
        }
    },

    onTouchEndCallback: function (event) {
        console.log("touch end ... ");
    },

    onDestroy: function () {
        this.node.off(cc.Node.EventType.TOUCH_START, this.onTouchStartCallback, this);
        this.node.off(cc.Node.EventType.TOUCH_MOVE, this.onTouchMoveCallback, this);
        this.node.off(cc.Node.EventType.TOUCH_END, this.onTouchEndCallback, this);
    }
});

---

参考学习网址:
物理引擎(官方文档)
自定义线条 + 物理引擎