Unity中UGUI控件和3D物体拖拽实现
基本原理
Unity拖拽的基本原理:射线检测,鼠标位置增量转换为统一空间的位置增量,将位置增量添加到拖拽物体原位置上。
统一空间指的是将所有向量转换为同一空间下再进行计算。
项目演示
左测:UGUI Button
中间:UGUI Image
右侧:3D物体
UGUI拖拽实现
方式有两种:其一直接继承拖拽三个接口IBeginDragHandler,IDragHandler,IEndDragHandler,重写内部函数。 其二通过EventSystem实现。
其一:脚本继承了拖拽三个接口IBeginDragHandler,IDragHandler,IEndDragHandler直接上代码,在开始拖拽的函数中初始化拖拽物和鼠标的位置,在拖拽过程中,不断的将鼠标的位置增量转换到画布空间,并附加给拖拽物。代码如下(项目演示中中间image是用此种方法拖拽):
public class DragTest : MonoBehaviour,IBeginDragHandler,IDragHandler,IEndDragHandler
{
private Vector3 pos; //控件初始位置
private Vector2 mousePos; //鼠标初始位置(画布空间)
private Vector3 mouseWorldPos; //鼠标初始位置(世界空间)
private RectTransform canvasRec; //控件所在画布
private void Start()
{
canvasRec = this.GetComponentInParent
当然也可以转换到世界空间进行计算,相关代码如下:
//开始拖拽函数
//控件的世界坐标初始位置
pos = this.transform.position;
Camera camera = eventData.pressEventCamera;
//将屏幕空间鼠标位置eventData.position转换为鼠标在世界空间的鼠标位置
RectTransformUtility.ScreenPointToWorldPointInRectangle(canvasRec, eventData.position, camera, out mouseWorldPos);
//拖拽中函数
Vector3 newVec = new Vector3();
Camera camera = eventData.pressEventCamera;
RectTransformUtility.ScreenPointToWorldPointInRectangle(canvasRec, eventData.position, camera, out newVec);
//鼠标移动在世界空间的位置增量
Vector3 offset = newVec - mouseWorldPos;
//原始位置增加位置增量即为现在位置
this.transform.position = pos + offset;
其二通过EventSystem实现:控件添加EventTrigger组件,在代码中EventTrigger添加EventTriggerType.BeginDrag,EventTriggerType.Drag,EventTriggerType.EndDrag事件,并给各事件绑定函数,左侧的button就是用这种方式实现的,代码如下(其实核心模块的逻辑与上面方法无异):
public class EventSystemDrag : MonoBehaviour {
public Camera theCamera; //UI摄像机
public RectTransform canvas; //控件所在画布
private EventTrigger trigger; //事件触发组件
Vector3 mouseOriPos; //鼠标原始位置(世界空间)
Vector3 myOriPos; //控件原始位置(世界空间)
// Use this for initialization
void Start () {
trigger = this.GetComponent();
//事件触发器添加开始拖拽事件并添加开始拖拽函数
EventTrigger.Entry entry2 = new EventTrigger.Entry();
entry2.eventID = EventTriggerType.BeginDrag;
entry2.callback = new EventTrigger.TriggerEvent();
entry2.callback.AddListener((eventData) => { BeginDrag(eventData as PointerEventData); });
trigger.triggers.Add(entry2);
//事件触发器添加拖拽事件并添加拖拽函数
EventTrigger.Entry entry3 = new EventTrigger.Entry();
entry3.eventID = EventTriggerType.Drag;
entry3.callback = new EventTrigger.TriggerEvent();
entry3.callback.AddListener((eventData) => { OnDrag(eventData as PointerEventData); });
trigger.triggers.Add(entry3);
//事件触发器添加拖拽结束事件并添加拖拽结束函数
EventTrigger.Entry entry4 = new EventTrigger.Entry();
entry4.eventID = EventTriggerType.EndDrag;
entry4.callback = new EventTrigger.TriggerEvent();
entry4.callback.AddListener((eventData) => { EndDrag(eventData as PointerEventData); });
trigger.triggers.Add(entry4);
}
public void BeginDrag(PointerEventData eventData)
{
Vector2 vec = eventData.position;
RectTransformUtility.ScreenPointToWorldPointInRectangle(canvas, vec, theCamera,out mouseOriPos);
myOriPos = this.transform.position;
}
void OnDrag(PointerEventData eventData)
{
Vector2 vec = eventData.position;
Vector3 newVec = new Vector3();
RectTransformUtility.ScreenPointToWorldPointInRectangle(canvas, vec, theCamera, out newVec);
this.transform.position = myOriPos + newVec - mouseOriPos;
}
void EndDrag(PointerEventData eventData)
{
}
}
或者可以直接在Unity编辑器中添加事件和绑定函数,效果是一样的,如图:
3D物体拖拽
由于UI拖拽,关于射线部分,Unity底层已经封装好了接口,我们只用实现响应的接口即可。但是3D物体,需要我们自己写代码实现。
项目演示中右侧小球的部分属性如下图(设置了Tag,方便射线检测,小球必须添加碰撞体组件,否则射线无法检测到):
首先我们实现射线检测部分,代码如下:
//按下左键开始发出射线
if (Input.GetMouseButtonDown(0))
{
//射线由主摄像机发出,射向屏幕点击的点
Ray ray = theCamera.ScreenPointToRay(Input.mousePosition);
//射线撞击点
RaycastHit hit;
//如果射线撞击到碰撞体,且碰撞体的标签是我们设置需要拖拽的物体,那么进行主逻辑
if (Physics.Raycast(ray, out hit))
{
if (hit.collider.tag == "Drag")
{
//记录下当前鼠标位置
mousePos = Input.mousePosition;
isDrag = true;
go = hit.collider.gameObject;
//记录下拖拽物的原始屏幕空间位置
oriScreenPos = theCamera.WorldToScreenPoint(go.transform.position);
}
}
}
接着是移动的逻辑:
//左键一直处于按下状态,即为拖拽过程
if (Input.GetMouseButton(0))
{
//如果拖拽状态处于true,且有拖拽物
if (isDrag&& go)
{
//获取屏幕空间鼠标增量,并加上拖拽物原始位置(屏幕空间计算)
Vector3 newPos = oriScreenPos + Input.mousePosition - mousePos;
//将屏幕空间坐标转换为世界空间
Vector3 newWorldPos = theCamera.ScreenToWorldPoint(newPos);
//将世界空间位置赋予拖拽物
go.transform.position = newWorldPos;
}
}
移动结束,还原拖拽状态:
//松开左键
if (Input.GetMouseButtonUp(0))
{
isDrag = false;
go = null;
}
本文使用的屏幕空间计算,当然使用其他空间也是可以的,比如世界空间,但要注意坐标Z轴的处理。原因如下:世界空间坐标是三维向量(世界空间),而鼠标点击屏幕的坐标(屏幕空间),其实为二维向量,z方向为0值。那么拖拽中实际上拖拽物只有x,y值具有增量,而z值不变。或者开发者也可以根据自己的需求来修改z值。
小结
上面就是拖拽的基本原理,知识点两个:射线检测,空间转换计算。UI射线部分已经有Unity底层实现,3D物体需要我们自己实现。总之掌握原理,比闷头写代码强。我自己也在不断的学习中,欢迎大家来批评指正。