CocosCreator物理引擎Demo源码分析(3)-stick-arrow

CocosCreator开发笔记(8)-读取和解析JSON数据文件
Box2D C++ 三种作用力效果 ApplyForce、ApplyLinearImpulse、SetLinearVelocity


stick-arrow示例展示了如何动态发射刚体飞往目标点。

技术点
1、触摸屏幕发射刚体,计算起点和目标点的夹角,设置刚体的线性速度。
2、在Update中不断施加一个作用力到刚体尾部,使它能一直往目标点飞去。
3、在碰撞上后,动态计算并设置WeldJoint的属性,使刚体和碰撞体按一定角度连接起来,不致于自然掉落。

源码分析
arrow.js
arrow.js代码功能是处理碰撞之后的逻辑,主要是动态计算和设置WeldJoint关节的属性。

cc.Class({
extends: cc.Component,

properties: {

},

// LIFE-CYCLE CALLBACKS:

onLoad () {
    this.weldJoint = this.getComponent(cc.WeldJoint);
},

// 每次处理完碰撞体接触逻辑时被调用
onPostSolve: function(contact, selfCollider, otherCollider) {
    // 获取冲量信息 注意:这个信息只有在 onPostSolve 回调中才能获取到
    var impulse = contact.getImpulse();
    // normalImpulses: 法线方向的冲量
    // PTM_RATIO: 物理单位与像素单位互相转换的比率,一般是 32。
    if (Math.abs(impulse.normalImpulses[0]) < cc.PhysicsManager.PTM_RATIO) return;

    let joint = this.weldJoint;

    if (joint.enabled) {
        joint.enabled = false;
        return;
    }

    if (otherCollider.node.name === 'arrow') {
        return;
    }

    let arrowBody = selfCollider.body;
    let targetBody = otherCollider.body;
    // 将 arrowBody 本地坐标系下的点转换为世界坐标系下的点
    let worldCoordsAnchorPoint = arrowBody.getWorldPoint(cc.v2(0.6, 0));

    joint.connectedBody = targetBody;
    // 将给定的世界坐标系下的点转换为 arrowBody 本地坐标系下的点
    joint.anchor = arrowBody.getLocalPoint(worldCoordsAnchorPoint);
    // 将给定的世界坐标系下的点转换为 targetBody 本地坐标系下的点
    joint.connectedAnchor = targetBody.getLocalPoint(worldCoordsAnchorPoint);
    joint.referenceAngle = targetBody.node.rotation - arrowBody.node.rotation;

    joint.enabled = true;
},

});

shoot-arrow.js
shoot-arrow.js代码功能是发射刚体,并在刚体飞行过程中不断计算和施加作用力。

cc.Class({
extends: cc.Component,

properties: {
    arrow: {
        type: cc.Node,
        default: null
    }
},

onEnabled: function() {
    this.debugDrawFlags = cc.director.getPhysicsManager().debugDrawFlags;
    cc.director.getPhysicsManager().debugDrawFlags = 
        cc.PhysicsManager.DrawBits.e_jointBit |
        cc.PhysicsManager.DrawBits.e_shapeBit
        ;
},

onDisable: function() {
    cc.director.getPhysicsManager().debugDrawFlags = this.debugDrawFlags;
},

// LIFE-CYCLE CALLBACKS:

onLoad () {
    this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchBegan, this);
    this.arrowBodies = [];
},

onTouchBegan: function(event) {
    let touchLoc = event.touch.getLocation();
    let node = cc.instantiate(this.arrow);
    node.active = true;
    let vec = cc.v2(touchLoc).sub(node.position);
    // 通过反正切函数得到触摸点和arrow出生点之间的夹角角度
    // 乘以 180/3.14159 是为了把弧度转化为角度
    node.rotation = -Math.atan2(vec.y, vec.x) * 180 / Math.PI;
    cc.director.getScene().addChild(node);

    // 返回向量的长度
    let distance = vec.mag();
    // 返回归一化后的向量,再乘以800
    let velocity = vec.normalize().mulSelf(800);
    // 设置刚体的线性速度
    let arrowBody = node.getComponent(cc.RigidBody);
    arrowBody.linearVelocity = velocity;

    this.arrowBodies.push(arrowBody);
},

update: function (dt) {
    let dragConstant = 0.1;
    let arrowBodies = this.arrowBodies;
    for (let i = 0; i < arrowBodies.length; i++) {
        let arrowBody = arrowBodies[i];
        let velocity = arrowBody.linearVelocity;
        let speed = velocity.mag();
        if (speed === 0) {
            continue;
        }
        let direction = velocity.normalize();

        // 将世界坐标系下的(1,0)向量转换为刚体本地坐标系下的向量
        let pointingDirection = arrowBody.getWorldVector(cc.v2(1, 0));
        let flightDirection = arrowBody.linearVelocity;
        let flightSpeed = flightDirection.mag();
        // 向量归一化,让这个向量的长度为 1
        flightDirection.normalizeSelf();

        // 向量之间进行点乘
        let dot = cc.pDot(flightDirection, pointingDirection);
        let dragForceMagnitude = (1 - Math.abs(dot)) * flightSpeed * flightSpeed * dragConstant * arrowBody.getMass();
        // 得到arrowBody尾部的世界坐标
        let arrowTailPosition = arrowBody.getWorldPoint(cc.v2(-80, 0));
        // 施加一个力到arrowBody刚体的尾部(世界坐标系)
        arrowBody.applyForce(flightDirection.mul(-dragForceMagnitude), arrowTailPosition, false);
    }
},

});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值