UI点击事件
UGUI的事件本质上就是发送射线,由于UI的操作有一些复杂的手势,所以UGUI帮我们又封装了一层。创建任意UI时都会自动创建EventSystem对象,并且绑定EventSystem.cs和StandaloneInputModule.cs如下代码所示,EventSystem会将该对象绑定的所有InputModule脚本收集起来保存在SystemInputModules对象中。
然后在EventSystem的Update()方法中更新它们,通常情况下我们只需要一个StandaloneInputModule即可。
当存在可执行的Module 会调用它的m_CurrentInputModule.Process();方法。那么UI是如何确定出点击到那个元素上的呢?如下代码所示,在EventSystem中遍历所有module.Raycast()方法。
EventSystem.cs(部分代码)
public class EventSystem : UIBehaviour
{
//...略
public void RaycastAll(PointerEventData eventData, List<RaycastResult> raycastResults)
{
raycastResults.Clear();
//获得当前激活状态下每个Canvas上绑定的GraphicRaycaster的对象
var modules = RaycasterManager.GetRaycasters();
for (int i = 0; i < modules.Count; ++i)
{
var module = modules[i];
if (module == null || !module.IsActive())
continue;
//开始发送射线
module.Raycast(eventData, raycastResults);
}
//对发送射线的结果进行排序,保证在前面的UI优先处理
raycastResults.Sort(s_RaycastComparer);
}
private static readonly Comparison<RaycastResult> s_RaycastComparer = RaycastComparer;
private static int RaycastComparer(RaycastResult lhs, RaycastResult rhs)
{
if (lhs.module != rhs.module)
{
var lhsEventCamera = lhs.module.eventCamera;
var rhsEventCamera = rhs.module.eventCamera;
if (lhsEventCamera != null && rhsEventCamera != null && lhsEventCamera.depth != rhsEventCamera.depth)
{
// 比较camera的深度
if (lhsEventCamera.depth < rhsEventCamera.depth)
return 1;
if (lhsEventCamera.depth == rhsEventCamera.depth)
return 0;
return -1;
}
//比较射线结果的排序优先级
if (lhs.module.sortOrderPriority != rhs.module.sortOrderPriority)
return rhs.module.sortOrderPriority.CompareTo(lhs.module.sortOrderPriority);
//比较射线结果的渲染优先级
if (lhs.module.renderOrderPriority != rhs.module.renderOrderPriority)
return rhs.module.renderOrderPriority.CompareTo(lhs.module.renderOrderPriority);
}
if (lhs.sortingLayer != rhs.sortingLayer)
{
// 比较SortingLayer
var rid = SortingLayer.GetLayerValueFromID(rhs.sortingLayer);
var lid = SortingLayer.GetLayerValueFromID(lhs.sortingLayer);
return rid.CompareTo(lid);
}
//比较sortOrder
if (lhs.sortingOrder != rhs.sortingOrder)
return rhs.sortingOrder.CompareTo(lhs.sortingOrder);
//比较深度
if (lhs.depth != rhs.depth)
return rhs.depth.CompareTo(lhs.depth);
//比较距离
if (lhs.distance != rhs.distance)
return lhs.distance.CompareTo(rhs.distance);
//最后比较index
return lhs.index.CompareTo(rhs.index);
}
}
还记得每个Canvas要想监听点击事件必须绑定GraphicRaycaster脚本吗?上面代码中的RaycasterManager.GetRaycasters();方法就是获取当前到底有多少个绑定GraphicRaycaster脚本的对象,那么同时参与点击事件的Canvas越多效率也就越低了,游戏中有很多界面是叠在一起的,最上面的界面已经挡住了所有界面,但是由于下面的界面还有GraphicRaycaster对象,那么必然产生额外的计算开销,所以这种情况可以DeActive不需要参与点击事件的Canvas。
最后我们来看看到底如何判断点击的事件的,如下代码所示,首先遍历Canvas下每一个参与渲染的Graphic对象,如果勾选了raycastTarget并且点击射线与它们相交,此时先存起来。
由于多个UI有相交的情况,但由于Mesh都合批了第一个与射线相交的对象是没有意义的,但是我们只需要响应在最上面的UI元素,这里只能根据depth来做个排序了,找到最上面的UI元素,最后再抛出正确的点击事件。
GraphicRaycaster.cs(部分代码)
public class GraphicRaycaster : BaseRaycaster
{
//...略
[NonSerialized] static readonly List<Graphic> s_SortedGraphics = new List<Graphic>();
private static void Raycast(Canvas canvas, Camera eventCamera, Vector2 pointerPosition, IList<Graphic> foundGraphics, List<Graphic> results)
{
//遍历,将每个参与渲染的UI添加到s_SortedGraphics对象中。
int totalCount = foundGraphics.Count;
for (int i = 0; i < totalCount; ++i)
{
Graphic graphic = foundGraphics[i];
if (graphic.depth == -1 || !graphic.raycastTarget || graphic.canvasRenderer.cull)
continue;
if (!RectTransformUtility.RectangleContainsScreenPoint(graphic.rectTransform, pointerPosition, eventCamera))
continue;
if (eventCamera != null && eventCamera.WorldToScreenPoint(graphic.rectTransform.position).z > eventCamera.farClipPlane)
continue;
if (graphic.Raycast(pointerPosition, eventCamera))
{
s_SortedGraphics.Add(graphic);
}
}
//根据depth开始对它进行排序
s_SortedGraphics.Sort((g1, g2) => g2.depth.CompareTo(g1.depth));
totalCount = s_SortedGraphics.Count;
//最后将排序过的正确顺序保存起来
for (int i = 0; i < totalCount; ++i)
results.Add(s_SortedGraphics[i]);
s_SortedGraphics.Clear();
}
}
所以说GraphicRaycaster组件越多越卡,raycastTarget勾选的越多越卡,其实开发中很多UI是不需要响应点击事件的,但是却被无意地勾选上了。这里我提供一个我开发的经验,如下图11-1所示,我会在Scene界面中将所有勾选过raycastTarget的对象用蓝色矩形框标记出来,这样做UI的人可以很方便地看到,如果有不需要参与点击的UI元素,那么就及时取消勾选吧。