Laya1.8.4 UI长按选择对应位置释放技能

需求:

需要实现拖拽摇杆选择技能释放位置,释放技能。

原理:首先拆分需求,分为两部分,UI部分和场景部分,UI部分需要实现长按效果,长按后又要有拖动效果,将官方文档的示例代码改了改就实现了UI部分,然后就是场景部分,有时候是拖动圆的位置,有时候是旋转扇形的方向,前一种就是以人物自身为圆心,用技能的范围长度为半径,配合着UI部分给出的弧度转换为方向坐标,再加上人物位置即可,同时还要注意UI摇杆按钮有个极限拖拽的长度,因此对应场景中的也需有个范围长度,直接上代码吧!

    _proto.Init = function(){this.skill2.on(Laya.Event.MOUSE_DOWN,this,this.onPreSkill2);Laya.stage.on(Laya.Event.MOUSE_UP,this,this.onRelaseSkill2);this.knob.visible = false;this.curTouchId = 0;/***手指(鼠标)是否按下****/this.isDown = false;/***摇杆的角度****/this.angle = -1;        /***摇杆的弧度****/this.radians = -1;/***是否左手遥控****/this.isleftControl = true;   //控制器中心点位置初始化this.originPiont = new Laya.Point(this.skill2.x,this.skill2.y);this.scale = 1;}_proto.onPreSkill2 = function(e){Laya.timer.once(500,this,this.onHold,[e]);}_proto.onHold = function(e){this.isHold = true;this.knob.visible = true;this.curTouchId = e.touchId;//已按下this.isDown = true;//初始化摇杆控制点位置this.knob.pos(this.skill2.x,this.skill2.y);//摇杆移动控制事件监听Laya.stage.on(Laya.Event.MOUSE_MOVE,this,this.onMove);}_proto.onRelaseSkill2 = function(e){// 鼠标放开时,如果正在hold,则播放放开的效果if (this.isHold){this.isHold = false;this.knob.visible = false;Laya.stage.off(Laya.Event.MOUSE_MOVE,this,this.onMove);//修改摇杆角度与弧度为-1(代表无角度)this.radians = this.angle = -1;}Laya.timer.clear(this, this.onHold);}_proto.onMove = function(e){//如果不是上次的点击id,返回(避免多点抬起,以第一次按下id为准)if(e.touchId != this.curTouchId)return;//将移动时的鼠标屏幕坐标转化为摇杆局部坐标var locationPos = this.globalToLocal(new Laya.Point(Laya.stage.mouseX,Laya.stage.mouseY),false);//更新摇杆控制点位置this.knob.pos(locationPos.x,locationPos.y);//更新控制点与摇杆中心点位置距离this.deltaX = locationPos.x - this.originPiont.x;this.deltaY = locationPos.y - this.originPiont.y;//console.log(this.deltaX,this.deltaY);//计算控制点在摇杆中的角度var dx = this.deltaX * this.deltaX;var dy = this.deltaY * this.deltaY;//console.log(dx,dy);this.angle = Math.atan2(this.deltaX,this.deltaY) * 180 / Math.PI; if(this.angle < 0) this.angle += 360;//对角度取整this.angle = Math.round(this.angle);//计算控制点在摇杆中的弧度this.radians = Math.PI / 180 * this.angle;//强制控制点与中心距离不超过80像素if(dx+dy >= 80*80){//控制点在半径为80像素的位置(根据弧度变化)var x = Math.floor(Math.sin(this.radians) * 80 +this.originPiont.x);var y = Math.floor(Math.cos(this.radians) * 80 + this.originPiont.y);this.knob.pos(x,y);this.scale = 1;}else{//不超过80像素取原坐标this.knob.pos(locationPos.x,locationPos.y);this.scale = (dx + dy)/(80*80);}}
//场景部分if(this.mMainUI.angle != -1){var scale = this.mMainUI.scale;var speedX = Math.sin(this.mMainUI.radians) * 3 * scale;var speedZ = Math.cos(this.mMainUI.radians) * 3 * scale;var pos = new Vector3();Vector3.add(this._owner.transform.position,new Vector3(speedX,0,speedZ),pos);this.range.transform.position = pos;}else{
//range就是那个白色的圈this.range.transform.position = this._owner.transform.position;}

参考链接:3D角色脚本控制与碰撞检测__LAYABOX技术文档

鼠标交互--Hold (layabox.com)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/290861.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Springboot+MybatisPlus+EasyExcel实现文件导入数据

记录一下写Excel文件导入数据所经历的问题。 springboot提供的文件处理MultipartFile有关方法&#xff0c;我没有具体看文档&#xff0c;但目测比较复杂&#xff0c; 遂了解学习了一下别的文件上传方法&#xff0c;本文第1节记录的是springboot原始的导入文件方法写法&#xf…

【生活】相机/图像各参数

文章目录 专业模式图片编辑-滤镜实体滤镜软件模拟滤镜 图片编辑-增强曝光亮度对比度饱和度自然饱和度色温色调高光阴影HSL色调分离褪色颗粒锐化晕影清晰度暗角 参考 专业模式 第一个参数WB是白平衡&#xff0c;调节色彩的。 第二个是对焦F&#xff0c;近距离拍摄物体&#xf…

Android R 广播注册与发送流程分析

静态广播注册时序图 动态广播注册时序图 发送广播时序图 前言 广播接收器可以分为动态和静态&#xff0c;静态广播接收器就是在 AndroidManifest.xml 中注册的&#xff0c;而动态的广播接收器是在代码中通过 Context#registerReceiver() 注册的。 这里先从静态广播的流程开始…

FANUC机器人故障诊断—报警代码(一)

一、SRVO-050碰撞检测报警 [原因]检测出碰撞 [对策] 1.确认机器人是否碰撞。 2.确认是否正确进行了负载设定。 3.确认是否有过载、过度的加速度附加指令。 4.在长期停用后启动&#xff0c;或者外部气温较低时发生该报警。启动后&#xff0c;先短时间内低速运转设备&#…

uniapp开发App——登陆流程 判断是否登陆,是,进入首页,否,跳转到登录页

一、登陆流程 文字描述&#xff1a;用户进入App&#xff0c;之后就是判断该App是否有用户登陆过&#xff0c;如果有&#xff0c;直接进入首页&#xff0c;否则跳转到登陆页&#xff0c;登陆成功后&#xff0c;进入首页。 流程图如下&#xff1a; 二、在uniapp项目中代码实现 实…

google浏览器网站不安全与网站的连接不安全怎么办?

使用google谷歌浏览器访问某些网站打开时google谷歌浏览器提示网站不安全,与网站的连接不安全,您之所以会看到此警告,是因为该网站不支持https造成的怎么办? 目录 1、打开谷歌google浏览器点击右上角【┇】找到设置

React Native框架开发APP,安装免费的图标库(react-native-vector-icons)并使用详解

一、安装图标库 要使用免费的图标库&#xff0c;你可以使用 React Native Vector Icons 库。 首先&#xff0c;确保你已经安装了 react-native-vector-icons&#xff1a; npm install --save react-native-vector-iconsnpm install --save-dev types/react-native-vector-ic…

vue3使用vuedraggable实现拖拽(有过渡)

1. 安装与使用 vue中vuedraggable安装&#xff1a; pnpm i -S vuedraggablenext或者 yarn add vuedraggablenext注意&#xff1a;vue2和vue3安装的是不同版本的vuedraggable&#xff0c;写法上也会有一些区别。 比如在vue3中使用拖拽&#xff0c;要以插槽的方式&#xff0c;…

从 Azure 部署生成本地 .NET 密钥

作者&#xff1a;Frank Boucher 排版&#xff1a;Alan Wang 通常&#xff0c;示例项目以一些“魔术字符串”开始&#xff0c;这些变量包含与部署或外部资源相关的 URL 和关键信息&#xff0c;我们必须更改这些信息才能使用示例。例如在 .NET 中&#xff0c;它可能如下所示&…

使用vue2实现在线创建组件的功能

前言 我们使用vue2构建了一个项目&#xff0c;项目有个需求&#xff1a;用户可以在线创建vue组件&#xff0c;创建后的组件可以动态编译&#xff0c;项目无需重新部署&#xff0c;就可以在表单等位置引入使用组件。 实现记录 引用vue的esm包 项目中引入vue的代码&#xff0…

【Roadmap to learn LLM】Large Language Models in Five Formulas

by Alexander Rush Our hope: reasoning about LLMs Our Issue 文章目录 Perpexity(Generation)Attention(Memory)GEMM(Efficiency)用矩阵乘法说明GPU的工作原理 Chinchilla(Scaling)RASP(Reasoning)结论参考资料 the five formulas perpexity —— generationattention —— m…

电脑分辨率怎么调,电脑分辨率怎么调整

随着电脑的普及以及网络的发展&#xff0c;我们现在在工作中都离不开对电脑的使用&#xff0c;今天小编教大家设置电脑分辨率&#xff0c;现在我们先了解这个分辨率是什么?通常电脑的显示分辨率就是屏幕分辨率&#xff0c;显示屏大小固定时&#xff0c;显示分辨率越高图像越清…

数据可视化为什么能在智慧港口中发挥作用?

随着全球贸易活动日益频繁&#xff0c;港口作为国际贸易的重要节点&#xff0c;其运营效率与智能化程度直接影响着整个物流链的效能。在此背景下&#xff0c;智慧港口的概念应运而生&#xff0c;它借助先进的信息技术手段对传统港口进行改造升级&#xff0c;其中&#xff0c;数…

【AIGC】如何在Windows/Linux上部署stable diffusion

文章目录 整体安装步骤windows10安装stable diffusion环境要求安装步骤注意事项参考博客其他事项安装显卡驱动安装cuda卸载cuda安装对应版本pytorch安装git上的python包Q&A linux安装stable diffusion安装anaconda安装cudagit 加速配置虚拟环境挂载oss&#xff08;optional…

Spring Aop 源码解析(下)

ProxyFactory选择cglib或jdk动态代理原理 ProxyFactory在生成代理对象之前需要决定到底是使用JDK动态代理还是CGLIB技术: config就是ProxyFactory对象,把自己传进来了,因为ProxyFactory继承了很多类,其中一个父类就是ProxyConfig // config就是ProxyFactory对象// 是不是…

02正式学习第一天

1、windows上加载socket库 链接输入ws2_32.lib 代码code&#xff1a; #ifdef _WIN32 #include<windows.h> #else #include <sys/socket.h> #include<sys/types.h> #include<unistd.h> #include<cstring> #include<arpa/inet.h> #include…

【Java】LinkedList模拟实现

目录 整体框架IMyLinkedList接口IndexNotLegalException异常类MyLinkedList类成员变量(节点信息)addFirst(头插)addLast(尾插)在指定位置插入数据判断是否存在移除第一个相等的节点移除所有相等的节点链表的长度打印链表释放回收链表 整体框架 IMyLinkedList接口 这个接口用来…

WPF 路由事件 数据驱动 、Window 事件驱动

消息层层传递&#xff0c;遇到安装有事件侦听器的对象&#xff0c;通过事件处理器响应事件&#xff0c;并决定事件是否继续传递&#xff1b; 后置代码中使用AddHandler方法设置事件监听器&#xff0c;该方法的 第一个参数是指定监听的路由事件类型对象&#xff0c; 第二个参数…

微服务demo(四)nacosfeigngateway

一、gateway使用&#xff1a; 1、集成方法 1.1、pom依赖&#xff1a; 建议&#xff1a;gateway模块的pom不要去继承父工程的pom&#xff0c;父工程的pom依赖太多&#xff0c;极大可能会导致运行报错&#xff0c;新建gateway子工程后&#xff0c;pom父类就采用默认的spring-b…

CSS之动画

一&#xff0c;动画的制作 实现盒子绕圈走 二&#xff0c; 动画的常用属性 三&#xff0c;动画简写属性 前面两个属性一定要写&#xff0c;第三个linear是指匀速的意思&#xff08;默认是ease&#xff09;