cocos creator从零开发之 如何实现游戏的虚拟摇杆功能逻辑

import { _decorator, Component, Node, input, Input, EventTouch, CCFloat, v3, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Move')
export class Move extends Component {
    @property(Node)
    joystickBg: Node = null;  // 摇杆背景节点

    @property(Node)
    joystickHandle: Node = null;  // 摇杆柄节点

    @property({ type: CCFloat })
    radius: number = 0;  // 摇杆半径限制

    initPosition: Vec3 = v3();  // 摇杆背景的初始位置

    start() {
        // 注册触摸事件监听
        input.on(Input.EventType.TOUCH_MOVE, this.onTouchMove, this);
        input.on(Input.EventType.TOUCH_START, this.onTouchStart, this);
        input.on(Input.EventType.TOUCH_END, this.onTouchEnd, this);
        input.on(Input.EventType.TOUCH_CANCEL, this.onTouchCancel, this);

        // 记录摇杆背景的初始世界坐标
        this.initPosition = this.joystickBg.getWorldPosition();
    }

    // 触摸开始，摇杆柄跟随触摸点
    onTouchStart(event: EventTouch) {
        console.log('onTouchStart');
        const touch = event.touch;
        const touchPos = v3(touch.getUILocationX(), touch.getUILocationY(), 0);
        const localPos = v3();
        this.joystickBg.inverseTransformPoint(localPos, touchPos);
        this.joystickHandle.setPosition(localPos);
    }

    // 触摸移动，限制摇杆柄在半径范围内移动
    onTouchMove(event: EventTouch) {
        const touch = event.touch;
        const touchPos = v3(touch.getUILocationX(), touch.getUILocationY(), 0);
        const localPos = v3();
        this.joystickBg.inverseTransformPoint(localPos, touchPos);

        // 计算手指位置距离中心点的长度
        const length = localPos.length();

        // 方向向量，单位向量
        const direction = length > 0 ? localPos.normalize() : v3(0, 0, 0);

        // 限制长度最大为摇杆半径
        const clampedLength = Math.min(length, this.radius);

        // 计算摇杆柄最终位置
        const newPos = v3(direction.x * clampedLength, direction.y * clampedLength, 0);

        this.joystickHandle.setPosition(newPos);
    }

    // 触摸结束，摇杆柄回到中心
    onTouchEnd(event: EventTouch) {
        console.log('onTouchEnd');
        this.joystickHandle.setPosition(Vec3.ZERO);
    }

    // 触摸取消，也回到中心
    onTouchCancel(event: EventTouch) {
        console.log('onTouchCancel');
        this.joystickHandle.setPosition(Vec3.ZERO);
    }

    update(deltaTime: number) {
        // 这里可以根据摇杆柄的位置，计算角色移动方向和速度
    }
}