2D / 3D摇杆控制角色移动（原理讲解 + 源码分享）CocosCreator

2D / 3D摇杆控制角色移动（原理讲解 + 源码分享）CocosCreator

源码在末尾

前言

一年前我在Cocos论坛发了一篇封装2D摇杆的文章，因为对角色移动和转向这些逻辑都写在了摇杆脚本里面，有个小伙伴提出了宝贵的建议，我认为他说的很对，就重新整理下再加个3D版本的摇杆。

在这里插入图片描述

2D摇杆

效果

请添加图片描述

如何使用
节点的结构

在这里插入图片描述

吸取了上次的教训，这次分两个脚本实现2D摇杆

在这里插入图片描述

Joystick放在parent节点（摇杆背景和摇杆中心点父节点）上
Player放在角色上

Joystick.ts

import { _decorator, Component, Node, CCFloat, CCBoolean, Vec2, Vec3, math, log, Event, EventTouch, UITransformComponent, UITransform, CameraComponent } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Main')
export default class Joystick extends Component {


    @property({displayName: "canvas下的相机，只拍UI的那个", tooltip: "canvas下的相机，只拍UI的那个", type: CameraComponent})
    camera: CameraComponent = null!;


    @property({displayName: "父节点", tooltip: "摇杆中心点和背景的父节点，需要用这个节点来做坐标转换", type: UITransformComponent})
    parent: UITransformComponent = null!;



    @property({displayName: "摇杆背景", tooltip: "摇杆背景", type: Node})
    bg: Node = null!;

    @property({displayName: "摇杆中心点", tooltip: "摇杆中心点", type: Node})
    joystick: Node = null!;



    @property({displayName: "最大半径", tooltip: "摇杆移动的最大半径", type: CCFloat})
    max_R: number = 135;


    

    @property({displayName: "是否禁用摇杆", tooltip: "是否禁用摇杆，禁用后摇杆将不能摇动"})
    is_forbidden: boolean = false;


    // 角色旋转的角度，不要轻易修改
    angle: number = 0;

    // 移动向量
    vector: Vec2 = new Vec2(0, 0);


    onLoad () {
        // 绑定事件
        // 因为摇杆中心点很小，如果给摇杆中心点绑定事件玩家将很难控制，摇杆的背景比较大，所以把事件都绑定在背景上是不错的选择，这样体验更好

        // 手指移动
        this.bg.on(Node.EventType.TOUCH_MOVE,this.move,this);
        // 手指结束
        this.bg.on(Node.EventType.TOUCH_END,this.finish,this);
        // 手指取消
        this.bg.on(Node.EventType.TOUCH_CANCEL,this.finish,this);
    }


    update () {
        
        // 如果角色的移动向量为(0, 0)，就不执行以下代码
        if (this.vector.x == 0 && this.vector.y == 0) {
            return;
        }

        // 求出角色旋转的角度
        let angle = this.vector_to_angle(this.vector);
        // 赋值给angle，Player脚本将会获取angle
        this.angle = angle;

    }


    // 手指移动时调用，移动摇杆专用函数
    move (event: EventTouch) {

        // 如果没有禁用摇杆
        if(this.is_forbidden == false){

            /*
            通过点击屏幕获得的点的坐标是屏幕坐标
            必须先用相机从屏幕坐标转到世界坐标
            再从世界坐标转到节点坐标

            就这个问题折腾了很久
            踩坑踩坑踩坑
            */

            // 获取触点的位置，屏幕坐标
            let point = new Vec2(event.getLocationX(), event.getLocationY());
            // 屏幕坐标转为世界坐标
            let world_point = this.camera.screenToWorld(new Vec3(point.x, point.y));
            // 世界坐标转节点坐标
            // 将一个点转换到节点 (局部) 空间坐标系，这个坐标系以锚点为原点。
            let pos = this.parent.convertToNodeSpaceAR(new Vec3(world_point.x, world_point.y));

            // 如果触点长度小于我们规定好的最大半径
            if (pos.length() < this.max_R) {
                // 摇杆的坐标为触点坐标
                this.joystick.setPosition(pos.x, pos.y);
            } else {// 如果不

                // 将向量归一化
                let pos_ = pos.normalize();
                // 归一化的坐标 * 最大半径
                let x = pos_.x * this.max_R;
                let y = pos_.y * this.max_R;

                // 赋值给摇杆
                this.joystick.setPosition(x, y);
            }

            // 把摇杆中心点坐标，也就是角色移动向量赋值给vector
            this.vector = new Vec2(this.joystick.position.x, this.joystick.position.y);
        }
        // 如果摇杆被禁用 
        else {
            // 弹回摇杆
            this.finish();
        }


    }

    
    // 摇杆中心点弹回原位置专用函数
    finish () {
        // 摇杆坐标和移动向量都设为（0,0）
        this.joystick.position = new Vec3(0, 0);
        this.vector = new Vec2(0, 0);
    }



    // 角度转弧度
    angle_to_radian (angle: number): number {
        // 角度转弧度公式
        // π / 180 * 角度

        // 计算出弧度
        let radian = Math.PI / 180 * angle;
        // 返回弧度
        return(radian);
    }


    // 弧度转角度
    radian_to_angle (radian: number): number {
        // 弧度转角度公式
        // 180 / π * 弧度

        // 计算出角度
        let angle = 180 / Math.PI * radian;
        // 返回弧度
        return(angle);
    }


    // 角度转向量   
    angle_to_vector (angle: number): Vec2 {
        // tan = sin / cos
        // 将传入的角度转为弧度
        let radian = this.angle_to_radian(angle);
        // 算出cos,sin和tan
        let cos = Math.cos(radian);// 邻边 / 斜边
        let sin = Math.sin(radian);// 对边 / 斜边
        let tan = sin / cos;// 对边 / 邻边
        // 结合在一起并归一化
        let vec = new Vec2(cos, sin).normalize();
        // 返回向量
        return(vec);
    }


    // 向量转角度
    vector_to_angle (vector: Vec2): number {
        // 将传入的向量归一化
        let dir = vector.normalize();
        // 计算出目标角度的弧度
        let radian = dir.signAngle(new Vec2(1, 0));
        // 把弧度计算成角度
        let angle = -this.radian_to_angle(radian);
        // 返回角度
        return(angle);
    }

    
}

Player.ts

// 导入Joystick脚本
import joy from "./Joystick"

import { _decorator, Component, Node, CCLoader, CCFloat, Vec2, log } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Player')
export class Player extends Component {


    @property({displayName: "摇杆脚本所在节点", tooltip: "摇杆脚本Joystick所在脚本", type: joy})
    joy: joy = null!;


    @property({displayName: "角色", tooltip: "角色", type: Node})
    player: Node = null!;


    @property({displayName: "是否根据方向旋转角色", tooltip: "角色是否根据摇杆的方向旋转"})
    is_angle: boolean = true;


    @property({displayName: "是否禁锢角色", tooltip: "是否禁锢角色，如果角色被禁锢，角色就动不了了"})
    is_fbd_player: boolean = false;


    @property({displayName: "角色移动速度", tooltip: "角色移动速度，不建议太大，1-10最好", type: CCFloat})
    speed: number = 3;


    // 角色的移动向量
    vector: Vec2 = new Vec2(0, 0);

    // 角色旋转的角度
    angle: number = 0;


    update () {
        // console.log("vector", this.vector.toString(), "angle", this.angle);
        

        // 如果没有禁锢角色
        if (this.is_fbd_player == false) {
            // 获取角色移动向量
            this.vector = this.joy.vector;

            // 向量归一化
            let dir = this.vector.normalize();

            // 乘速度
            let dir_x = dir.x * this.speed;
            let dir_y = dir.y * this.speed;

            // 角色坐标加上方向
            let x = this.player.position.x + dir_x;
            let y = this.player.position.y + dir_y;

            // 设置角色坐标
            this.player.setPosition(x, y);
        }

        // 如果根据方向旋转角色
        if (this.is_angle == true) {
            // 获取角色旋转的角度
            this.angle = this.joy.angle;
            // 对角色进行旋转
            this.player.angle = this.angle;
        }
        
    }


}

绑定好节点

在这里插入图片描述

在这里插入图片描述

原理讲解
每句代码我都写了非常详细的注释，属性也都加了中文的显示名称

请添加图片描述

先实现在规定范围内移动摇杆，都写在Joystick脚本里面
Joystick脚本里面封装了四个方法，分别是角度转弧度，弧度转角度，角度转向量和向量转角度

详细的内容可以看我之前写的文章：三角函数在游戏中的应用

move方法就是用来移动摇杆中心点的，需要绑定在摇杆背景上，其实应该给摇杆中心点绑定事件，因为摇杆中心点很小，如果给摇杆中心点绑定事件玩家将很难控制，摇杆的背景比较大，所以把事件都绑定在背景上是不错的选择，这样体验更好

在这里插入图片描述

首先获取触点坐标，转化为parent节点局部空间坐标系
2.x的convertToNodeSpaceAR在Node下，而3.x的Node下就没有这个方法了，这个方法在UITransformComponent下
还有一个值得注意的点，2.x将触摸得到的点直接使用convertToNodeSpaceAR就可以完成转换，而3.x必须先用相机的screenToWorld方法把屏幕坐标转到世界坐标，然后再使用convertToNodeSpaceAR转到节点坐标（踩坑踩坑踩坑，这个问题我折腾了好几天）
我们只希望摇杆在规定好的max_R（最大半径）的范围内，不希望摇杆超出这个范围
所以要判定一下触点的坐标在不在规定的最大半径范围内，通过length获取触点坐标的长度，也就是触点距离原点的长度

在这里插入图片描述

比如我想求点A坐标的长度，求出的结果就是绿色线段的长度
并在最后设置好角色移动向量，Player脚本会获取vector来控制角色移动

finish方法是在结束移动摇杆的时候调用的，将摇杆位置弹回原处，并设置角色移动向量为（0， 0）

在这里插入图片描述

update里面求出角色旋转的角度，其实就是把vector向量转为角度

在这里插入图片描述

在Player脚本的update里面获取Joystick脚本的vector和angle，并根据需要设置角色的坐标和旋转角度

在这里插入图片描述

3D摇杆

效果

请添加图片描述

既然有了摇杆，就再加一个跳跃按钮和视角的移动吧
原理讲解
节点结构

在这里插入图片描述

一共有三个脚本

在这里插入图片描述

Joystick放在摇杆背景和摇杆中心点父节点上，Player放在角色上。UI放在canvas上，视角移动和跳跃相关逻辑写在这里
JoyStick和2D摇杆的Joystick区别不大，去掉了angle属性，因为3D摇杆不需要计算角色旋转 ，还去掉了封装的四个方法，分别是角度转弧度，弧度转角度，角度转向量和向量转角度，这些在3D摇杆里面都用不到了
2D摇杆是直接对角色坐标进行加减，3D摇杆中没有那么做，而是给角色加上了刚体和碰撞体，并且撸了一个地形
Player和2D摇杆的Player区别也不是很大，属性去掉了angle（角色旋转的角度）和is_angle（是否根据方向旋转角色），player的类型由Node改成了RigidBodyComponent，update全都不一样了
Player.ts中的update

    update () {
        // 如果没有禁锢角色
        if (this.is_fbd_player == false) {
            // 获取角色目标移动向量
            this.vector = this.joy.vector;
            // 归一化
            let dir = this.vector.normalize();
            // 乘速度
            let x = dir.x * this.speed;
            let y = dir.y * this.speed;
            // 获取角色当前移动向量
            let vc = new Vec3(0, 0, 0);
            this.player.getLinearVelocity(vc);
            // 结合成角色最终移动向量，因为摇杆获取的是Y轴，而最终设置的线性速度应该是Z轴，所以最后一个参数是负的
            let vec = new Vec3(x, vc.y, -y);

            // 向量四元数乘法
            Vec3.transformQuat(vec, vec, this.player.node.getRotation());

            // 设置角色移动向量
            this.player.setLinearVelocity(vec);
        }

    }

因为加了Z轴，而摇杆获取的vector的y是在二维下的，是Y轴向上X轴向右的结果。角色是三维的，是X轴向右Z轴向后的结果，所以结合角色最终移动向量的时候最后一个参数是-y

在这里插入图片描述

在这里插入图片描述

左右移动视角其实移动的是角色Y旋转，角色是主相机的父节点，所以相机也会跟着动，需要用到向量四元数乘法来根据角色朝向算出新的三维向量，最后设置线性速度

UI.ts

// 导入Player脚本
import player from "./Player";

import { _decorator, Component, Node, SystemEventType, EventMouse, Vec3, CCFloat, Vec2, EventTouch } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('UI')
export class UI extends Component {


    @property({displayName: "Player脚本所在节点", tooltip: "Player脚本所在节点", type: player})
    player: player = null!;


    @property({
        displayName: "移动视角事件目标节点", 
        tooltip: "代码将把移动视角的事件绑定到这个节点上，推荐把这个节点的宽高设置成和canvas一样，并给四个方向加上widget", 
        type: Node
    })
    target: Node = null!;

    @property({displayName: "相机", tooltip: "相机", type: Node})
    camera: Node = null!;


    @property({displayName: "相机移动速度", tooltip: "相机移动速度", type: CCFloat})
    angle_speed: number = 0.1;

    @property({displayName: "跳跃的高度", tooltip: "跳跃的高度，代码会根据这个值设置角色刚体的Y线性速度", type: CCFloat})
    jump_height: number = 5;

    @property({displayName: "跳跃按钮禁用时间", tooltip: "按一次跳跃按钮禁用多长时间，单位是秒", type: CCFloat})
    jump_btn_time: number = 1;


    @property({displayName: "相机上下移动限制", tooltip: "限制相机X旋转，X是向上移动限制的角度，Y是向下移动限制的角度"})
    cam_att: Vec2 = new Vec2(-25, -50);

    // 是否可以跳跃
    is_jump: boolean = true;


    onLoad () {
        let self = this;

        // 给canvas绑定触摸移动事件
        this.target.on(SystemEventType.TOUCH_MOVE, function (e: EventTouch) {
            
            // 获取鼠标距离上一次事件移动的距离对象，对象包含 x 和 y 属性
            let D = e.getDelta();

            
            // 上下左右移动视角
            // 左右移动视角是移动角色的Y旋转
            if (D.x < 0) {
                self.player.node.eulerAngles = self.player.node.eulerAngles.add3f(0, -D.x * self.angle_speed , 0);
            } else if (D.x > 0) {
                self.player.node.eulerAngles = self.player.node.eulerAngles.add3f(0, -D.x * self.angle_speed, 0);
            }

            // 上下移动视角是移动相机的X旋转
            if (D.y < 0) {
                self.camera.eulerAngles = self.camera.eulerAngles.add3f(D.y * self.angle_speed, 0, 0);
            } else if (D.y > 0) {
                self.camera.eulerAngles = self.camera.eulerAngles.add3f(D.y * self.angle_speed, 0, 0);
            }


            // 限制相机上下移动范围
            let angle = self.camera.eulerAngles;
            if (self.camera.eulerAngles.x > self.cam_att.x) {
                self.camera.eulerAngles = new Vec3(self.cam_att.x, angle.y, angle.z);
            }
            if (self.camera.eulerAngles.x < self.cam_att.y) {
                self.camera.eulerAngles = new Vec3(self.cam_att.y, angle.y, angle.z);
            }

        }, this);
    }


    // 跳跃按钮专用函数
    onbtn_jump () {
        if (this.is_jump == true) {
            // 获取角色移动向量
            let vc = new Vec3(0, 0, 0);
            this.player.player.getLinearVelocity(vc);
            // 设置角色Y的移动向量，让角色跳起来
            this.player.player.setLinearVelocity(new Vec3(vc.x, this.jump_height, vc.z));
            // console.log("点击了跳跃按钮");

            let self = this;
            // 不可以再次跳跃
            this.is_jump = false;
            // 规定时间后恢复跳跃
            this.scheduleOnce(function () {
                self.is_jump = true;
            }, this.jump_btn_time);
        }
    }

    
}

跳跃就是设置角色刚体线性速度的Y，其他的都不动
视角的上下移动因为没有相机弹簧，第三人称上下移动视角的时候会很奇怪很奇怪，所以加了视角上下移动的限制

想用相机弹簧可以去看白玉无冰大佬的文章
https://mp.weixin.qq.com/s/NCn8Ygk_I_nRnhmbHQeZwQ

2D摇杆源代码：https://gitee.com/propertygame/cocos-creator3.x-demos/tree/master/2DJoystick
3D摇杆源代码：https://gitee.com/propertygame/cocos-creator3.x-demos/tree/master/3DJoystick
技术交流Q群：1130122408
更多内容请关注微信公众号