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;
  }
}