使用CocosCreator开发一个类似于王者荣耀/和平精英的虚拟遥杆。如果你们想看看最后效果怎么样的，可以微信搜索 迷宫吧兄弟 小游戏或者扫一下下面二维码，进去游戏界面亲自感受一下效果。
如果感觉还行，那咱们开始上正题。
1.素材准备，下载下面两个遥杆的素材，第一个是背景，第二个是遥杆，你也可以自己去制作。
2.创建一个cocos creator工程，在Scene创建遥杆的相关节点，其中JoyStick为空节点，Dish和Pole为Sprite（精灵），如下图所示。
文章来源地址https://www.toymoban.com/news/detail-743710.html
3.将第一步的素材放在cocos creator工程目录下的assets文件夹下目录（该目录你可以创建自己的资源文件夹，建议创建一个Resources文件夹，并且将这些素材都放在这个文件夹内，笔者这里放在assets\Resources\GUI中），放置好后，再回到cocos creator界面中，这个时候软件会刷新，我们再修改这个素材资源为sprite-frame，如下图所示。
4.脚本代码如下，很简单就不多解释了。
import { _decorator, Component, Node ,UITransform,Vec3, Touch } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('JoyStick')
export class JoyStick extends Component {
//盘
Dish: Node = null;
//摇杆
Pole: Node = null;
start() {
this.Dish = this.node.getChildByName("Dish");
this.Pole = this.node.getChildByName("Pole");
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);
}
update(deltaTime: number) {
// get ratio
let len = this.Pole.position.length(); // 自身坐标系的坐标
let uiTransform = this.Dish.getComponent(UITransform); // 活动范围
let maxLen = uiTransform.width *0.4;
let ratio = len / maxLen;
if (ratio > 1) {
this.Pole.position.divide(new Vec3(ratio, ratio, 1));
}
// 计算单位矢量，及发送
const arg : Vec3 = this.Pole.getPosition();
}
onTouchStart(event) {
let pos_touch = event.getUILocation(); // 触摸点坐标@UI世界坐标系
let uiTransform = this.node.getComponent(UITransform);
let pos_nodeSpace = uiTransform.convertToNodeSpaceAR(new Vec3(pos_touch.x, pos_touch.y, 0));
this.Pole.setPosition(pos_nodeSpace);
}
onTouchMove(e: Touch) {
let pos_touch = e.getUILocation(); // 触摸点坐标@UI世界坐标系
let uiTransform = this.node.getComponent(UITransform);
let pos_nodeSpace = uiTransform.convertToNodeSpaceAR(new Vec3(pos_touch.x, pos_touch.y, 0));
this.Pole.setPosition(pos_nodeSpace);
}
onTouchEnd(e: Touch) {
this.Pole.setPosition(new Vec3(0, 0, 0));
}
onTouchCancel(e: Touch) {
this.Pole.setPosition(new Vec3(0, 0, 0));
}
}
5.JoyStick节点添加自定义脚本，Dish节点添加背景素材，Pole节点添加遥杆素材。
到此就完成了虚拟遥杆的制作。文章来源：https://www.toymoban.com/news/detail-743710.html
到了这里，关于CocosCreator开发之虚拟遥杆制作的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
