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

news2024/11/26 2:35:17

需求:

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

原理:首先拆分需求,分为两部分,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.coloradmin.cn/o/1563390.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ETL工具-nifi干货系列 第七讲 处理器JoltTransformJSON(续)

第六讲教程只简单介绍了Jolt的chain转换模式&#xff0c;本节课介绍下Jolt的各种转换模式。 点击的处理器JoltTransformJSON高级配置选项&#xff0c;进行测试Jolt的转换模式。 1、Cardinality&#xff1a;更改了输入JSON数据元素的基数&#xff0c;适用于jsonObj和jsonList 之…

【JavaSE】解密 继承和多态(上)

前言 本篇将会通过典型代码案例来揭开 Java中继承和多态 的神秘面纱~ 欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 目录 前言 继承 继承代码举例 子类访问父类的成员变量和方法 子类访问父类的成员变量 super this和su…

实战 | YOLOv8自定义数据集训练实现手势识别 (标注+训练+预测 保姆级教程--含数据集)

导 读 本文将手把手教你用YoloV8训练自己的数据集并实现手势识别。 安装环境 【1】安装torch, torchvision对应版本,这里先下载好,直接安装 pip install torch-1.13.1+cu116-cp38-cp38-win_amd64.whlpip install torchvision-0.14.1+cu116-cp38-cp38-win_amd64.whl 安装好…

每日一题 --- 右旋字符串[卡码][Go]

右旋字符串 题目&#xff1a;55. 右旋字符串&#xff08;第八期模拟笔试&#xff09; (kamacoder.com) 题目描述 字符串的右旋转操作是把字符串尾部的若干个字符转移到字符串的前面。给定一个字符串 s 和一个正整数 k&#xff0c;请编写一个函数&#xff0c;将字符串中的后面…

书生浦语第一次课

模型的发展 从专业模型到通用模型 书生浦语大模型全链路开源体系 2023.06.07 -> InternLM千亿参数语言大模型发布 2023.07.06 -> InternLM千亿参数语言大模型全面升级&#xff0c;支持8K语境、26种语言。全面开源、免费商用&#xff1a;InternLM-7B、全链条开源工具…

【内存泄漏】数据库连接connectionPhantomRefs内存过大

1. 问题背景 线上出现内存报警&#xff0c;内存增长曲线如下 dump内存文件&#xff0c;临时重新发布服务。后经排查发现是数据库连接池设置不合理以及mysql-connector-java 5.1.49有内存泄漏bug。以下为对此问题的分析及问题总结。 1.1 应用背景 数据库连接池&#xff1a; …

赛奥分离技术现已加入2024第13届生物发酵展

参展企业介绍 上海赛奥分离技术工程有限公司成立于2010年,是上海市高新技术企业、上海市专精特新企业&#xff0c;宝山区工程及技术中心。公司着重于在流体分离净化领域&#xff0c;研究开发制造膜技术领域中错流微滤、超滤系统、纳滤系统、反渗透、精细过滤等膜分离设备及适用…

光伏无人机:绿色能源与航空技术的融合创新

在可再生能源和无人机技术快速发展的背景下&#xff0c;光伏无人机作为一种新兴的绿色航空器&#xff0c;正逐渐展现出其独特的优势和广阔的应用前景。本文将深入探讨光伏无人机的原理、优势以及其在多个领域的应用&#xff0c;展望其未来的发展趋势。 一、光伏无人机的原理 光…

【LeetCode】热题100 刷题笔记

文章目录 T1 两数之和T49 字母异位词分组常用小技巧 T1 两数之和 链接&#xff1a;1. 两数之和 题目&#xff1a; 【刷题感悟】这道题用两层for循环也能做出来&#xff0c;但我们还是要挑战一下时间复杂度小于 O ( n 2 ) O(n^2) O(n2)的解法&#xff0c;不能因为它是第一道 …

SAP Fiori开发中的JavaScript基础知识6 - 数组(Arrays)

1 背景 在本篇博客中&#xff0c;我将介绍JavaScript中数组&#xff08;Arrays&#xff09;的概念和用法。 2 数组 在JavaScript中&#xff0c;数组是一种特殊的对象&#xff0c;用于存储多个值在单个变量中。 2.1 创建数组 在JavaScript中&#xff0c;创建数组有以下有2种…

鸿蒙OS元服务开发说明:【WebGL网页图形库开发接口】

一、场景介绍 WebGL主要帮助开发者在前端开发中完成图形图像的相关处理&#xff0c;比如绘制彩色图形等。目前该功能仅支持使用兼容JS的类Web开发范式开发。 二、接口说明 表1 WebGL主要接口列表 鸿蒙OS开发更多内容↓点击HarmonyOS与OpenHarmony技术鸿蒙技术文档开发知识更…

反弹shell的方法和场景

Netcat反弹Shell 1 NC正向反弹shell Netcat简称NC,是一个简单、可靠的网络工具,被誉为网络界的瑞士军刀。通NC可以进行端口扫描、 反弹Shell、端口监听和文件传输等操作,常用参数如下&#xff1a; -c指定连接后要执行的shell命令-e指定连接后要执行的文件名-k配置 Socket一…

制造业工厂怎么通过MES系统来升级改造车间管理

在当今高度竞争的市场环境下&#xff0c;制造业企业需要不断提高生产效率&#xff0c;以在激烈的竞争中立于不败之地。而一种被广泛应用的方法就是利用MES控制系统&#xff0c;通过数字化管理和自动化控制来改造生产车间提升生产效率。 1、MES管理系统能够实现对生产过程的全面…

Linux环境基础和工具的使用

目录 1、Linux软件包管理器---yum 2、Linux开发工具 2.1、vim基本概念 2.2 vim基本操作 2.3 vim正常模式命令集 2.4 vim末行模式命令集 2.5 简单vim配置 2.5.1 配置文件的位置 3 Linux编译器--gcc/g的使用 3.1 背景知识 3.2 gcc完成 4 Linux调试器--gdb使用 4.1 背…

网页的血液——javascript

JavaScript 基础知识概述 1. JavaScript 介绍 JavaScript 是一种高级的、解释型的编程语言&#xff0c;它是一种基于对象的、事件驱动的语言&#xff0c;它允许开发者创建动态的网页。JavaScript 是一种脚本语言&#xff0c;它可以嵌入到 HTML 中&#xff0c;或者作为外部文件…

一篇商业稿件值千元,我的过稿经验大公开

撰写过上百篇企业和品牌稿件&#xff0c;甚至一篇商业稿件可值千元&#xff0c;可能很多人还不太相信&#xff0c;事实就是真的会有很多的企业和品牌愿意为此买单&#xff0c;是因为稿件带来的价值也是无法衡量的&#xff0c;直接给产品或是品牌带来更多的曝光甚至转化。今天伯…

一种新的基于STT-MRAM的时域内存计算单元

大数据、物联网和人工智能等技术的进步揭示了传统冯诺依曼的瓶颈架构&#xff0c;导致高能耗和有限的内存带宽。内存计算&#xff08;IMC通过直接在内存中进行计算&#xff0c;提高了能效&#xff0c;提供了一个有前景的解决方案计算。现有的基于时域&#xff08;TD&#xff09…

vue+elementUI搭建动态表头的表格

前提&#xff1a;以下代码是vue2项目结合elementUi完成的 数据结构 后端传来的数据是两个list&#xff0c;一个表头的list&#xff0c;一个表格内容的list // 表头 headTableAtts: [{ columnLabel: 姓名, columnName: name },{ columnLabel: 年龄, columnName: age },{ colu…

算法学习——LeetCode力扣动态规划篇4(377. 组合总和 Ⅳ、322. 零钱兑换、279. 完全平方数、139. 单词拆分)

算法学习——LeetCode力扣动态规划篇4 377. 组合总和 Ⅳ 377. 组合总和 Ⅳ - 力扣&#xff08;LeetCode&#xff09; 描述 给你一个由 不同 整数组成的数组 nums &#xff0c;和一个目标整数 target 。请你从 nums 中找出并返回总和为 target 的元素组合的个数。 题目数据保…

苹果手机系统文件浏览技巧:实现高效的文件查找与管理

​ 目录 引言 用户登录工具和连接设备 查看设备信息&#xff0c;电池信息 查看硬盘信息 硬件信息 查看 基带信息 销售信息 电脑可对手机应用程序批量操作 运行APP和查看APP日志 IPA包安装测试 注意事项 引言 苹果手机与安卓手机不同&#xff0c;无法直接访问系统文件…