項目結構如下圖：

1.說明：為了測試方便我都把兩個腳本掛載到了Canvas上了。加了三個精靈組件一個dayuan（大圓），就是大淺藍色的，作為搖桿盤，一個xiaoyuan（小圓）就是深藍色的作為搖桿，還有一個feidie（飛碟）作為被控制的角色。其中xiaoyuan精靈節點時dayuan的子節點。

2.把下面兩個腳本組件都掛在到Canvas上

搖桿代碼Joystick.ts

import { _decorator, Component, Node, Vec3, Touch, UITransform, v3 } from 'cc'; const { ccclass, property } = _decorator;/*** Predefined variables* Name = JoyStick* DateTime = Mon Jun 20 2022 14:42:05 GMT+0800 (中國標準時間)* Author = fangfan001* FileBasename = JoyStick.ts* FileBasenameNoExtension = JoyStick* URL = db://assets/scripts/JoyStick.ts* ManualUrl = https://docs.cocos.com/creator/3.4/manual/zh/**/@ccclass('JoyStick') export class JoyStick extends Component {//大圓@property(Node)panel: Node = null;//小圓@property(Node)btn: Node = null;//小圓在大圓中移動的限制距離private panelWidth: number = 100;//大圓初始位置private panelInitPos: Vec3;//觸摸IDprivate touchID: number;//用于保存移動方向向量public dir: Vec3 = new Vec3(0, 0, 0);//保存弧度(角度)public angle: number = 0;//是否正在移動public moving: boolean = false;onLoad() {//初始化大圓的為止this.panelInitPos = new Vec3(-250, -150, 0);}start() {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.onTouchCancel, this);}public stop() {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.onTouchCancel, this);this.moving = false;this.enabled = false;}private onTouchStart(e: Touch) {//觸摸點世界坐標轉成局部坐標let uiTransform = this.node.getComponent(UITransform);let p = new Vec3(e.getLocation().x, e.getLocation().y, 0);let pos = new Vec3();uiTransform.convertToNodeSpaceAR(p, pos);//當觸摸時設置大圓和小圓的顯示位置this.panel.setPosition(pos);this.btn.setPosition(new Vec3(0, 0, 0));this.touchID = e.getID();this.moving = false;this.enabled = true;}private onTouchMove(e: Touch) {if (this.touchID != e.getID()) {return;}//小圓移動，改變小圓實時位置let posDelta = e.getDelta();console.log("posDelta", this.btn.getPosition());let x = this.btn.getPosition().x + posDelta.x;let y = this.btn.getPosition().y + posDelta.y;//console.log("posDelta",x,y);this.btn.setPosition(new Vec3(x, y, 0));//正在移動this.moving = true;}update() {if (this.moving) {//將小圓限制大圓范圍內console.log("this.btn.position", this.btn.position);let ratio = this.btn.position.length() / this.panelWidth;let xbi = this.btn.position.x / this.btn.position.length();let ybi = this.btn.position.y / this.btn.position.length();console.log("ratio", this.btn.position.length());if (ratio > 1) {this.btn.setPosition(new Vec3(xbi * this.panelWidth, ybi * this.panelWidth, 0));}//保存向量方向this.dir = new Vec3(xbi, ybi, 0);console.log("this.dir", this.dir);//獲取弧度this.angle = Math.atan2(this.btn.getPosition().y, this.btn.getPosition().x);}}private onTouchEnd(e: Touch) {//還原大圓和小圓位置if (this.touchID != e.getID()) {return;}this.panel.setPosition(this.panelInitPos);this.btn.setPosition(new Vec3(0, 0, 0));this.moving = false;this.enabled = false;}private onTouchCancel(e: Touch) {if (this.touchID != e.getID()) {return;}this.panel.setPosition(this.panelInitPos);this.btn.setPosition(0, 0);this.moving = false;this.enabled = false;}onDestroy() {this.stop();}}

初始化代碼組件：

yaogan.ts

import { _decorator, Component, Node, Vec3 } from 'cc'; const { ccclass, property } = _decorator; //import { JoyStick } from './JoyStick';/*** Predefined variables* Name = yaogan* DateTime = Mon Jun 20 2022 10:20:08 GMT+0800 (中國標準時間)* Author = fangfan001* FileBasename = yaogan.ts* FileBasenameNoExtension = yaogan* URL = db://assets/scripts/yaogan.ts* ManualUrl = https://docs.cocos.com/creator/3.4/manual/zh/**/@ccclass('yaogan') export class yaogan extends Component {//虛擬搖桿組件joyStick: any = null;//角色@property(Node)role: Node = null;//速度speed: Vec3 = new Vec3(6, 6, 0);onLoad() {this.joyStick = this.node.getComponent("JoyStick");}start() {}update() {if (this.joyStick.moving) {//根據角度移動let x = this.role.getPosition().x + Math.cos(this.joyStick.angle) * this.speed.x;let y = this.role.getPosition().y + Math.sin(this.joyStick.angle) * this.speed.y;//根據向量移動// let x = this.role.getPosition().x+this.joyStick.dir.x*this.speed.x;// let y = this.role.getPosition().y+this.joyStick.dir.y*this.speed.y;this.role.setPosition(new Vec3(x, y, 0));}} }

3.將組件代碼掛載后，將精靈節點拖到對應的節點框，保存場景后運行即可

4.如果誰有更好的實現虛擬搖桿的方法，請給我留言，給我傳授傳授經驗。謝謝抱拳

總結

以上是生活随笔為你收集整理的基于cocos creator 3.4 实现虚拟摇杆的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。