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.hqwc.cn/news/577885.html

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

相关文章

[机器学习]练习KNN算法-曼哈顿距离

曼哈顿距离(Manhattan distance) 曼哈顿距离是指在几何空间中两点之间的距离&#xff0c;其计算方法是通过将两点在各个坐标轴上的差值的绝对值相加得到。在二维空间中&#xff0c;曼哈顿距离可以表示为两点在横纵坐标上的差值的绝对值之和&#xff1b;在三维空间中&#xff0…

第十五届蓝桥杯第三期模拟赛第十题 ← 上楼梯

【问题描述】 小蓝要上一个楼梯&#xff0c;楼梯共有 n 级台阶&#xff08;即小蓝总共要走 n 级&#xff09;。小蓝每一步可以走 a 级、b 级或 c 级台阶。 请问小蓝总共有多少种方案能正好走到楼梯顶端&#xff1f;【输入格式】 输入的第一行包含一个整数 n 。 第二行包含三个整…

鸿蒙OS开发实战:【Socket小试MQTT连接】

本篇分享一下 HarmonyOS 中的Socket使用方法 将从2个方面实践&#xff1a; HarmonyOS 手机应用连接PC端 SocketServerHarmonyOS 手机应用连接MQTT 服务端 通过循序渐进的方式&#xff0c;全面了解实践HarmonyOS中的Socket用法 学习本章前先熟悉文档开发知识更新库gitee.com…

马蹄集第九周

MT3011 代码 #include<bits/stdc.h> using namespace std; const int N 1e3 7;int n; struct NODE{vector<int> v;int ind 0; }g[N];int main( ) {cin >> n;int x;for(int i 1; i < n; i){for(int j 1; j< n-1; j){cin >> x;g[i].v.push_…

笔迹/签名数据集汇总

这里只收集公开/易申请的数据集 数据集发表年份语言最小单元Writers/人规模颜色最小单元文件格式示例图片备注CSAFE Handwriting Database2019英语页9090 人*(3 次*9 个样本) 2430 页300 dpi 扫描png-HWDB2.0-2.22011汉字页1,019每人 5 页,共 5091 页灰度图dgrl-CEDAR2006英语…

【python】flask各种版本的项目,终端命令运行方式的实现

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

HEVC的Profile和Level介绍

文章目录 HEVCProfile&#xff08;配置&#xff09;&#xff1a;Level&#xff08;级别&#xff09;&#xff1a;划分标准 HEVC HEVC&#xff08;High Efficiency Video Coding&#xff09;&#xff0c;也称为H.265&#xff0c;是一种视频压缩标准&#xff0c;旨在提供比先前的…

vivado 器件编程

生成器件镜像后 &#xff0c; 下一步是将其下载到目标器件。 Vivado IDE 具有内置原生的系统内器件编程功能用于执行此操作。 Vivado Design Suite 和 Vivado Lab Edition 都包含相应的功能 &#xff0c; 支持您连接到包含 1 个或多个 FPGA 或 ACAP 的硬 件&#xff0c; 以…

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

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

Antd Vue3 使用 Anchor 锚点组件记录

项目场景 客户要求做一个表单页面&#xff0c;表单数据分为三步&#xff0c;每一步骤是一个单独的 Vue 组件&#xff0c;表单上方需要使用锚点组件实现锚点定位到每一步的功能。 代码总览 <template><div class"guided-form-content-wrapper"><!-- …

蓝桥杯基础练习汇总详细解析(一)——数列排序、十六进制转八进制、十六进制转十进制、十进制转十六进制、特殊回文数(代码实现、解题思路、Python)

试题 基础练习 数列排序 资源限制 内存限制&#xff1a;512.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 问题描述 给定一个长度为n的数列&#xff0c;将这个数列按从小到大的顺序排列。1<n<200 输入格式 第…

【使用 PyQt6-第01章】 创建基本的应用程序

使用 PyQt6 创建您的第一个应用程序 目录 一、说明二、创建应用程序三、单步执行代码四、什么是事件循环&#xff1f;4.1 Qt 中的事件循环。 五、主窗口 QMainWindow六、调整窗口和小部件的大小 一、说明 本教程也适用于 PySide6 、 PySide2 和 PyQt5 在本教程中&#xff0c;…