cocos-nodejs-io-game/apps/client/assets/Scripts/UI/JoyStickManager.ts

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

@ccclass('JoyStickManager')
export class JoyStickManager extends Component {
    input: Vec2 = Vec2.ZERO

    private body: Node
    private stick: Node
    private touchStartPos: Vec2
    private defaultPos: Vec2
    private radius: number = 0

    init() {
        this.body = this.node.getChildByName("Body")
        this.stick = this.body.getChildByName("Stick")
        const { x, y } = this.body.position
        this.defaultPos = new Vec2(x, y)
        this.radius = this.body.getComponent(UITransform).contentSize.x / 2

        input.on(Input.EventType.TOUCH_START, this.onTouchMove, this);
        input.on(Input.EventType.TOUCH_MOVE, this.onTouchMove, this);
        input.on(Input.EventType.TOUCH_END, this.onTouchEnd, this);

    }

    onDestroy() {
        input.off(Input.EventType.TOUCH_START, this.onTouchMove, this);
        input.off(Input.EventType.TOUCH_MOVE, this.onTouchMove, this);
        input.off(Input.EventType.TOUCH_END, this.onTouchEnd, this);
    }

    onTouchMove(e: EventTouch) {
        const touchPos = e.touch.getUILocation()
        if (!this.touchStartPos) {
            this.touchStartPos = touchPos.clone()
            this.body.setPosition(this.touchStartPos.x, this.touchStartPos.y);
        }

        const stickPos = new Vec2(touchPos.x - this.touchStartPos.x, touchPos.y - this.touchStartPos.y)
        const len = stickPos.length()
        if (len > this.radius) {
            stickPos.multiplyScalar(this.radius / len)
        }

        this.stick.setPosition(stickPos.x, stickPos.y)
        this.input = stickPos.clone().normalize()
    }

    onTouchEnd() {
        this.body.setPosition(this.defaultPos.x, this.defaultPos.y)
        this.stick.setPosition(0, 0)
        this.touchStartPos = undefined
        this.input = Vec2.ZERO
    }
}