Unity UI拖拽模型选择功能
更新时间:2020年6月25日 10:35 点击:1660
指定一块区域,玩家鼠标or手指拖拽这个区域,模型会进行偏移,并用于进行人物、道具的选择
给模型定义一些属性
using System.Collections; using System.Collections.Generic; using UnityEngine; public class UIModelUtil : MonoBehaviour { public Animator animator; public int id; public int index; }
模型控制
using System.Collections; using System.Collections.Generic; using UnityEngine; public class UIModelControl : MonoBehaviour { public Transform modelsParent; public Transform centerPos; public float interval; public bool loop; List<UIModelUtil> models; bool isPressing; public UIDrag dragComp; Vector3 mousePos; private void Awake() { if(models == null) { int i = 0; models = new List<UIModelUtil>(); foreach(UIModelUtil util in modelsParent.GetComponentsInChildren<UIModelUtil>()) { models.Add(util); //util.index = i; Vector3 pos = Vector3.zero; pos.x = i * interval; util.transform.localPosition = pos; i++; } } } private void Start() { JumpToSelect(); } private void Update() { //接受拖拽事件 if (isPressing) { float x = GetInputDeltaX(); int dir = 0; if (x > 0) dir = 1; else if (x < 0) dir = -1; //分辨率修正 if (dir == 0) return; x = Mathf.Abs(x) / (Screen.width) * 800f; if (x > 800f) x = 800f; //偏移 float currectX = Mathf.Lerp(0, interval, x / 800f) * dir; Vector3 pos = modelsParent.position; pos.x += currectX; Transform right = GetRight().transform; Transform left = GetLeft().transform; //不循环时候设置边框 if (models.Count > 2 || !loop || models.Count == 1) { if (right.localPosition.x + interval / 10 < -pos.x) pos.x = -(right.localPosition.x + interval / 10); else if (left.localPosition.x - interval / 10 > -pos.x) pos.x = -(left.localPosition.x - interval / 10); //modelsParent.position = pos; } //只有两个循环的时候 else if (models.Count == 2 && loop) { Transform selected = GetSelect().transform; //当前是右边那个且向右拖拽 if (selected == right && dir < 0) { Vector3 leftPos = left.localPosition; leftPos.x = right.localPosition.x + interval; left.localPosition = leftPos; } //当前是左边那个且向左拖拽 else if (selected == left && dir > 0) { Vector3 rightPos = right.localPosition; rightPos.x = left.localPosition.x - interval; right.localPosition = rightPos; } } modelsParent.position = pos; AfterSelect(); } } void AfterSelect() { foreach(UIModelUtil util in models) { float dis = GetXDis(util); //设置显示 if (dis > interval) util.gameObject.SetActive(false); else { //越靠近中间越前 util.gameObject.SetActive(true); float t = Mathf.Abs(dis) / interval; float y = Mathf.Lerp(centerPos.position.z, modelsParent.position.z, t); Vector3 pos = util.transform.position; pos.z = y; util.transform.position = pos; } } //循环时候位置修正 if (loop && models.Count > 2) { Transform right = GetRight().transform; Transform left = GetLeft().transform; Transform selected = GetSelect().transform; if (selected == right) { Vector3 pos = right.position; pos.x += interval; left.position = pos; } else if (selected == left) { Vector3 pos = left.position; pos.x -= interval; right.position = pos; } } //设置UI选中状况 dragComp.OnSelected(GetSelect().id, GetSelect().index); } //通过id选中 UIModelUtil GetById(int id) { if (models == null) return null; UIModelUtil target = null; foreach (UIModelUtil util in models) { if (util.id == id) return util; } return target; } //获取当前选中 UIModelUtil GetSelect() { if (models == null) return null; float min = 9999; UIModelUtil target = null; foreach(UIModelUtil util in models) { float dis = Mathf.Abs( GetXDis(util)); if(dis < min) { target = util; min = dis; } } return target; } //所有模型最右边的那个 UIModelUtil GetRight() { if (models == null) return null; float max = -9999; UIModelUtil target = null; foreach(UIModelUtil util in models) { float dis = util.transform.localPosition.x; if(dis > max) { target = util; max = dis; } } return target; } //所有模型最左边的那个 UIModelUtil GetLeft() { if (models == null) return null; float min = 9999; UIModelUtil target = null; foreach(UIModelUtil util in models) { float dis = util.transform.localPosition.x; if(dis < min) { target = util; min = dis; } } return target; } //UI控件按下触发 public void OnPress() { if (isPressing) return; isPressing = true; if (Application.isEditor) mousePos = Input.mousePosition; else mousePos = Input.GetTouch(0).position; if (backing != null) StopCoroutine(backing); } //UI控件释放触发 public void OnRelease() { backing = StartCoroutine(ToSelect()); isPressing = false; } Coroutine backing; //释放后偏移 IEnumerator ToSelect() { UIModelUtil selected = GetSelect(); float dis = GetXDis(selected); float time = Mathf.Lerp (0, 1f, Mathf.Abs(dis) / interval); float timer = 0; Vector3 from = modelsParent.localPosition; Vector3 to = from; to.x = -selected.transform.localPosition.x; while(timer < time) { timer += Time.deltaTime; float t = timer / time; Vector3 pos = Vector3.Lerp(from, to, t); modelsParent.localPosition = pos; AfterSelect(); yield return null; } backing = null; } //获取手指偏移量 float GetInputDeltaX() { Vector3 pos; if (Application.isEditor) pos = Input.mousePosition; else pos = Input.GetTouch(0).position; Vector3 delta = pos - mousePos; //Debug.Log(pos +"/"+mousePos +"/"+ delta.x); mousePos = pos; return delta.x; } //计算偏移中心位置的X轴距离 float GetXDis(UIModelUtil util) { return util.transform.position.x - centerPos.position.x; } // 跳转到选中的id public void JumpToSelect() { int id = CharacterManager.characterId; Vector3 pos = modelsParent.localPosition; UIModelUtil selected = GetById(id); pos.x = -selected.transform.localPosition.x; modelsParent.localPosition = pos; AfterSelect(); } }
UI接受点击事件:
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; public class UIDrag : MonoBehaviour,IPointerDownHandler, IPointerUpHandler { public UIModelControl control; virtual public void OnPointerDown(PointerEventData data) { control.OnPress(); } virtual public void OnPointerUp(PointerEventData data) { control.OnRelease(); } virtual public void OnSelected(int id, int index) { } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
相关文章
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 本文主要介绍了element表格行列拖拽的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-02
- 这篇文章主要介绍了解决vant-UI库修改样式无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-03
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
这篇文章主要介绍了No module named ‘win32gui‘ 的解决方法(踩坑之旅),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-18- 这篇文章主要介绍了c#从数据库里取得数据并异步更新ui的方法,大家参考使用吧...2020-06-25
- 这篇文章主要为大家详细介绍了vue+element ui实现锚点定位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-29
- 这篇文章主要为大家详细介绍了easyUI下拉列表点击事件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-22
- 由于业务需要,要求实现树形菜单,且菜单数据由后台返回,下面这篇文章主要给大家介绍了关于js如何构造elementUI树状菜单的数据结构的相关资料,需要的朋友可以参考下...2021-05-13
详解element-ui 表单校验 Rules 配置 常用黑科技
这篇文章主要介绍了element-ui 表单校验 Rules 配置 常用黑科技,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11javascript轻量级库createjs使用Easel实现拖拽效果
这篇文章主要介绍了javascript轻量级库createjs使用Easel实现拖拽效果的相关资料,需要的朋友可以参考下...2016-02-21- 这篇文章主要为大家详细介绍了C#控件Picturebox实现鼠标拖拽功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
jQuery EasyUI编辑DataGrid用combobox实现多级联动
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧...2016-09-01jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
这篇文章主要介绍了jQuery Easyui使用之可折叠面板动态加载无效果的解决方案,非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧...2016-08-24- 这篇文章主要为大家详细介绍了Unity时间戳的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
解析element-ui中upload组件传递文件及其他参数的问题
这篇文章主要介绍了element-ui中upload组件如何传递文件及其他参数,分析一下我使用element-ui遇到的问题以及解决方法,需要的朋友可以参考下...2021-11-10- SwiftUI是一种使用Swift语言在苹果设备上构建用户界面的创新且简单的方式,下面这篇文章主要给大家介绍了关于SwiftUI图片缩放、拼图等处理的相关资料,需要的朋友可以参考下...2021-08-23
- 这篇文章主要介绍了基于elementUI竖向表格、和并列的案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-26
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
这篇文章主要介绍了如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上,需要的朋友可以参考下...2015-12-28- 这篇文章主要为大家详细介绍了jQuery UI结合Ajax创建可定制的Web界面,如何利用Ajax和jQuery UI创建具有各种定制功能的高度可定制的UI,感兴趣的小伙伴们可以参考一下...2016-06-24
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21