Cocos Creater 3.x 中怎么实现虚拟摇杆

1. 为什么使用虚拟摇杆

我们在玩游戏中这种虚拟摇杆很常见，比如：移动、技能方向等，那么我们用Cocos Creater 来做一个虚拟摇杆。
效果图：

2. 准备素材

这里推荐几个国外游戏素材网站：
1. https://kenney.nl/assets?q=tow
2. https://opengameart.org/

rockerBg rocker

3.

1. 先将图片拖入项目中：（resources、scene、script 文件夹是需要个人手动创建的）
   
2. 将资源直接拖到节点目录中
   
   在这里解释一下节点结构：
   

4. 编辑代码

1. 创建 rocker 文件，然后拖到 rockerParent 节点组件上。
2. 代码中的 @property 可节点组件中选择需要绑定的节点

5. 直接上代码

import { _decorator, Component, EventTouch, math, misc, Node, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

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

    @property(Node)
    rockerBg: Node;

    @property(Node)
    rocker: Node;

    // 小盘可以动的范围
    @property(Number)
    radius: number = 80;

    initPosi: Vec3;

    start() {
        this.initPosi = this.rockerBg.position.clone()

        // this.node 指的是 rockerParent
        this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this)
        this.node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this)
        this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this)
        this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this)
    }
    // 按下 事件
    onTouchStart(e: EventTouch): void {
        let x = e.touch.getUILocationX()
        let y = e.touch.getUILocationY()

        let worldPosi = new Vec3(x, y, 0)
        let posi = new Vec3()
        this.node.inverseTransformPoint(posi, worldPosi)
        this.rockerBg.setPosition(posi)
    }
    // 滑动 事件
    onTouchMove(e: EventTouch): void {
        let x = e.touch.getUILocationX()
        let y = e.touch.getUILocationY()

        let worldPosi = new Vec3(x, y, 0)
        let posi = new Vec3()
        // 世界坐标 转 this.rockerBg 局部坐标
        this.rockerBg.inverseTransformPoint(posi, worldPosi)

        let len = posi.length()
        posi.normalize()
        posi.multiplyScalar(math.clamp(len, 0, this.radius))
        this.rocker.setPosition(posi)

        // 点 转 弧度
        let radian = Math.atan2(this.rocker.position.y, this.rocker.position.x)
        // 弧度 转 角度
        let angle = misc.radiansToDegrees(radian)

        let rockerValue = {
            x: this.rocker.position.x / this.radius,
            z: this.rocker.position.y / this.radius,
            y: 0
        };
        console.log('旋转角度angle：', angle);
        console.log('圆点偏离中心的距离 rockerValue：', rockerValue);
    }
    // 抬起 事件
    onTouchEnd(e: EventTouch): void {
        this.rockerBg.setPosition(this.initPosi)
        this.rocker.setPosition(new Vec3(0, 0, 0))
    }
    // 销毁
    onDestroy(): void {
        this.node.off(Node.EventType.TOUCH_START, this.onTouchStart, this)
        this.node.off(Node.EventType.TOUCH_MOVE, this.onTouchMove, this)
        this.node.off(Node.EventType.TOUCH_END, this.onTouchEnd, this)
        this.node.off(Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this)
    }
}

以上是全部代码

6. 结束语

作者也是从0基础自学的，可能在代码编辑上会有一些复杂，大家可以关注本人公众号指点一下，或有哪些地方不理解的也可以在公众号留言，本人看到后会及时回复的，谢谢大家观看。

关注公众号免费领取源码