一个管制挪动和视角的遥感控制器 3D 示例我的项目。

成果

原理

在贪吃蛇大作战！蛇挪动的思考与实现! 中应用到一个摇杆控制器，不过这是在 2D 层面上，这次把它改到 3D 上。

摇杆

摇杆的原理大抵是把触摸点的地位传给须要的组件。(参考 KUOKUO 的摇杆组件改的)

监听触摸事件后，须要做一次坐标转换。在 Cocos 3D 中，坐标转换要用 UITransformComponent 组件。

接着把坐标和角度以事件的模式发送进来就能够了。

onTouchMove(e: EventTouch) {const location = e.getUILocation();
    // 坐标转换
    let pos = this.uITransform.convertToNodeSpaceAR(new Vec3(location.x, location.y));
    // 依据半径限度地位
    this.clampPos(pos);
    // 设置两头点的地位
    this.midNode.setPosition(pos.x, pos.y, 0);
    // 算出与 (1,0) 的夹角
    let angle = this.covertToAngle(pos);
    // 触发回调
    this.joyCallBack.forEach(c => c.emit([pos, angle]));
}

挪动与视角

这里分了三个节点去别离管制节点挪动，角色旋转，视角旋转。

应用摇杆返回的后果，依据模型初始状态和摄像机的角度，能够算出挪动的速度和旋转的速度。

/** 挪动摇杆触发回调 */
joysitckCallback(vector: Vec3, angle: number) {
    // 依据摄像机的角度旋转
    Vec3.rotateZ(vector, vector, Vec3.ZERO, this.node_camera.eulerAngles.y * macro.RAD);
    this._vector = vector.normalize();
    if (angle) {
        // 模型初始朝前，补个 90 度
        this.node_role.eulerAngles = new Vec3(0, angle + 90 + this.node_camera.eulerAngles.y, 0);
    }
}

/** 旋转摇杆触发回调 */
joysitckAngleCallback(vector: Vec3, angle: number) {this._vectorAngle = vector.normalize();
}

依据速度，每帧刷新地位和角度就能够了。

fix_update(dt: number) {if (this._vector.lengthSqr() > 0) {this.node.setPosition(this.node.position.add3f(this._vector.x * SPEED * dt, 0, -this._vector.y * SPEED * dt));
    }  

    if (this._vectorAngle.lengthSqr() > 0) {this.node_camera.eulerAngles = this.node_camera.eulerAngles.add3f(0, -this._vectorAngle.x, 0);
    }
}

小结

坐标转换！旋转！跳跃！不停歇！

以上为白玉无冰应用 Cocos Creator 3D v1.1.1 实现 "摇杆控制器！" 的技术分享。欢送分享给身边的敌人！

那些不能激励本人的人肯定是甘于平庸的人，无论他们的其余能力有如许令人印象粗浅。

更多

原创导航

残缺代码 https://github.com/baiyuwubin…