基于cocos creator 3.4 实现虚拟摇杆

项目结构如下图：

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 实现虚拟摇杆相关推荐

《Cocos Creator游戏实战》虚拟摇杆实现
虚拟摇杆实现摇杆布局实现摇杆功能实现用摇杆控制主角该功能已收录在Many Widgets插件中,使用Cocos Creator 3.x版本的小伙伴可以用该插件快速生成摇杆. 插件地址:http ...
一款非常好玩的小程序游戏推荐给大家，基于cocos creator引擎开发的
一款非常好玩的小程序游戏推荐给大家,基于cocos creator引擎开发的,排名包含微信好友排行榜,全球榜,快邀请好友,一起来玩吧.
Cocos 篇：基于 Cocos Creator v1.9，开始 Hello World 。。。
前言身体好,才是真的好~ 从此之后,要会生活,努力活出自己想要的样子~!!! Enmmm,LZ 也是小白一枚,初入贵行,还望手下留情~ 本篇主要作用,或者说定位在于和 LZ 一样得小白,希望多多交流 ...
基于Cocos Creator的水果忍者游戏
基于cocos creater的水果忍者游戏项目介绍主界面游戏界面游戏详情界面水果运动界面刀片切割界面游戏结束界面下载方式项目介绍互联网技术不断革新,用户对于应用的要求在不断提高, ...
基于Cocos creator 实现坦克大战小游戏【100010131】
疯狂坦克引言坦克大战是一款曾经风靡一时的小游戏,本次的实训,就是要力图让经典历久弥新.因此在老师的帮助下,我们将尽力开发一款在原有基础上有突破的"疯狂坦克2",加入新的元素,融 ...
基于cocos creator画六维图
这个仅仅是一个代码例子. 1.cocos creator的左下方资源管理器,点右键,弹出菜单,创建一个Scene,默认名称就可以. 2.同样在再创建一个JavaScript,名称为drawsix 3. ...
基于Cocos Creator 2.3.0,使用TypeScript(ts)实现微信跳一跳
在看我这篇文章之前,首先您应该掌握一些基本知识,一是了解和使用cocos creator的常用控件,如Button,Label,Sprite等,脚本事件绑定等;Vscode的基本操作;TypeScri ...
Cocos Creator—最佳构建部署实践
这篇文章主要是我们团队在使用Cocos Creator过程中的一些关于部署方面的实践总结,标题党了一回,严格来说,应该是<快看漫画游戏研发团队使用Cocos Creator构建部署最佳实践> ...
光影的魔法！Cocos Creator 实现屏幕空间的环境光遮蔽(SSAO)
引言: 本文作者 alpha 从事游戏前端开发已经5年,毕业后他先是入职了腾讯无线大连研发中心,而后开启了北漂生涯,在北京的这3年一直都在使用 Cocos Creator,对前端业务,包体.内存优化有 ...
关于cocos creator换装功能的实践与思考
2019独角兽企业重金招聘Python工程师标准>>> 最近在做一个基于cocos creator的微信小游戏,其中一个主要的功能是给角色进行换装.先来说下开发环境: cocos c ...

基于cocos creator 3.4 实现虚拟摇杆

基于cocos creator 3.4 实现虚拟摇杆相关推荐

最新文章

热门文章