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)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HANA-公司间销售ICS-IDOC系统配置-保姆级配置文档

HANA公司间销售ICS-IDOC系统配置—保姆级配置文档 在项目实施过程中经常会遇到关联方交易的问题,有公司间采购的业务场景,也会存在公司间销售的业务场景,本文将着重讲解公司间销售在SAP系统中的实现场景。很多公司会在香港设置一个公司用于对外的销售接单,然后将接到的销售…

企业微信知识库:从了解到搭建的全流程

你是否也有这样的疑惑&#xff1a;为什么现在的企业都爱创建企业微信知识库&#xff1f;企业微信知识库到底有什么用&#xff1f;如果想要使用企业微信知识库企业应该如何创建&#xff1f;这就是我今天要探讨的问题&#xff0c;感兴趣的话一起往下看吧&#xff01; | 为什么企业…

小白python爬虫基础教程(看这一篇就完了)

爬虫的五个步骤&#xff1a; 1&#xff09;需求分析&#xff0c;找到需求相关的网址 2&#xff09;获取网址的返回信息&#xff08;urllib,requests&#xff09; 3&#xff09;定位需要的信息所在位置&#xff08;re正则表达式,XPATH, CSS selector&#xff09; 4&#xff…

argo rollout使用

一、前言 argorollout是比argocd更高级的发布工具&#xff0c;其中包含自动化金丝雀发布、自动化蓝绿发布、还可以通过argo命令或者dashboard查看发布的过程 二、使用 需要先部署argo rollout服务 参考&#xff1a;https://github.com/argoproj/argo-rollouts/tree/master/m…

关于web_server项目的学习记录(自用)

主要参考资料&#xff1a; 我在地铁吃闸机 基础处理框架&#xff1a;Multi-reactor muduo库有三个核心组件实现持续监听reactor的fd&#xff1a;channel;epoll/poller/eventloop类 channel 事件监听器epoll_ctl监听到了fd发生了什么事件,channel类会封装每个fd和fd感兴趣的事…

036—pandas 按行将列名根据值由大到小排序

前言 数据处理中&#xff0c;按行排列的列名可以提供更直观的数据探索和分析方式。 你可以逐行查看列名&#xff0c;了解每列的含义和特征&#xff0c;有助于更好地理解数据集的结构和内容。 需求&#xff1a; 需要增加一列「分布方式」&#xff0c;每行的值是本行基金名称对…

C++多线程:thread构造源码剖析与detach大坑(三)

1、thread源码浅剖析 基于Ubuntu18.04版本64位操作系统下进行分析thread源码分析&#xff0c;与Window或者其他版本可能有出入。 1.1、thread线程id的源头 typedef pthread_t __gthread_t; typedef __gthread_t native_handle_type;/// thread::id class id {native_handl…

常用类(日期时间)

目录 一、JDK 8之前的日期时间API1.1、System类中获取时间戳的方法1.2、Java中两个Date类的使用1.3、SimpleDateFormat的使用1.4、Calendar日历类的使用 二、JDK8中日期时间API的介绍2.1、LocalDate、LocalTime、LocalDateTime的使用2.2、Instant类的使用2.3、DateTimeFormatte…

Abaqus模拟新能源汽车电池理论概念

在新能源汽车电池的分析过程中&#xff0c;存在众多典型问题&#xff0c;这些问题跨越了机械、热管理和电气三大关键领域。其中&#xff0c;结构仿真分析作为一种重要的技术手段&#xff0c;主要聚焦于解决机械和热管理方面的挑战&#xff0c;为电池系统的性能优化和安全性提升…

集合(未完。。。)

集合 例题引入1.java集合引入2.为什么要使用集合&#xff1f;3.List、Set、Queue和Map的区别4.ListList——ArrayList&#xff08;&#xff01;&#xff01;实用&#xff01;&#xff01;&#xff09;ArrayList常用方法 List——VectorList——LinkedList 5.Set6.MapHashMapHas…

【CTFshow 电子取证】套的签到题

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收…

Spring 源码调试问题 ( List.of(“bin“, “build“, “out“); )

Spring 源码调试问题 文章目录 Spring 源码调试问题一、问题描述二、解决方案 一、问题描述 错误&#xff1a;springframework\buildSrc\src\main\java\org\springframework\build\CheckstyleConventions.java:68: 错误: 找不到符号 List<String> buildFolders List.of…

【C++】常对象

目录 常对象常对象特点常数据成员常成员函数对象的常引用 常对象 把对象定义为常对象&#xff0c;对象中的数据成员就是常变量&#xff0c;在定义时必须带实参&#xff08;或者有缺省构造函数&#xff09;作为数据成员的初值。 const Person p1(3,4);//定义了一个常对象常对象特…

202452读书笔记|《永安梦》——错过前世 般配 换取今生 奉陪 任波谲云诡 共安危 共进退

今年追的第一本剧同名小说&#xff0c;《永安梦》改编自剧《长安第一美人》。本来是冲着徐正溪去看的&#xff0c;被娜娜、孙坚、夏楠路转粉了&#xff0c;只限这个剧。名字跟我有一个字一样诶。妆造&#xff0c;姿态&#xff0c;男女主&#xff0c;男二女二配角都不错。 因为看…

DRAGIN:利用LLM的即时信息需求进行动态RAG 论文解读

论文地址:https://arxiv.org/pdf/2403.10081.pdf DRAGIN 是一种新型的检索增强生成框架,专门为大型语言模型(LLMs)设计,以满足其在文本生成过程中的实时信息需求。该框架旨在解决传统检索增强生成(RAG)方法在动态性和准确性方面的局限性,特别是在处理复杂、多步骤或长文…

如何将Maven与TestNG集成

我们已经讨论了如何在maven中执行单元测试用例&#xff0c;但那些是JUnit测试用例&#xff0c;而不是TestNG。当maven使用“mvn test”命令进入测试阶段时&#xff0c;这些用例被执行。 本文将介绍如何将Maven与TestNG集成&#xff0c;并在maven进入测试阶段时执行TestNG测试。…

leetcode刷题日记-缺失的第一个正数(困难)

题目描述 解题思路 题目的意思十分容易理解&#xff0c;但是确实思考出来这种解题的方法还是比较难的。首先能想到的点就是[1,N]这个范围&#xff0c;因为只有N个数字&#xff0c;最小的数字只能在这个区间和N1两种可能。但是有时间复杂度的限制&#xff0c;我们该怎么找。我们…

【STM32F103】1-WireDS18B20(含ESP8266代码)

1-Wire 单总线 1-Wire是一种串行通信总线协议&#xff0c;由美国芯片制造商Dallas Semiconductor&#xff08;现为Maxim Integrated&#xff09;开发。这种协议主要用于连接和通信各种设备&#xff0c;并在多个领域得到了广泛应用&#xff0c;如温度传感器、电池管理、智能卡等…

测试用例设计方法-场景法详解

01 定义 场景法是通过运用场景来对系统的功能点或业务流程的描述&#xff0c;从而提高测试效果的一种方法。 场景法一般包含基本流和备用流&#xff0c;从一个流程开始&#xff0c;通过描述经过的路径来确定的过程&#xff0c;经过遍历所有的基本流和备用流来完成整个场景。 …

NO12 蓝桥杯单片机之DS1302的使用

1 DS1302是什么 DS1302由两块存储器组成&#xff0c;一个是日历时钟寄存器还有一个是31位的静态RAM存储器。 而在蓝桥杯中常考的就是日历时钟寄存器&#xff0c;故这里只介绍日历时钟寄存器。简单来说&#xff0c;其就是一个“电子表”&#xff0c;他会自动的实时记录时间&am…