【Unity】 UGUI进阶（一）自定义不规则按钮

---

UGUI事件处理流程

1. EventSystem每帧调用BaseInputModule中的Process方法。
   （实现类：StandaloneInputModule / TouchInputModule）

2. 计算光标接触的物体（Graphic）。

   • Process方法调用BaseRaycaster的Raycast方法获取所有Graphic。
     （实现类：GraphicRaycaster / PhysicsRaycaster / Physics2DRaycaster）
   • 通过Graphic的 IsRaycastLocationValid方法确定光标选中的Graphic。

3. 通过ExecuteEvents引发物体的相关事件。

   • 调用Execute方法获取相关接口类型对象，再调用其接口方法。

什么是EventSystem？每次创建UGUI，编辑器都会自动创建一个EvenetSystem节点，该节点下挂载了一个EventSystem组件和一个Standalone Input Module组件，UGUI的事件源头就是这个EventSystem类，而Standalone Input Module是EventSystem的子类，系统调用EventSystem的Update时通过多态访问子类Standalone Input Module的功能。

什么是Graphic？ Image、Text等需要渲染到屏幕上的物体都是Graphic的子类。值得注意的是，Button并不是Graphic的子类，因为Unity在计算Input时考虑的是实际渲染到屏幕上的物体，所以真正产生输入的是Button上的图片Image和文字Text。

Graphic Raycaster画布中有一个默认组件是Graphic Raycaster（图形射线检测器），该组件使得画布中被射线指定的物体能够被检测到（通过IsRaycastLocationValid方法实现）。同理，当一个物体被放到画布外面时，其射线检测也将会失效。

IsRaycastLocationValid是用来判断物体是否被射线选中的，该方法可以被重写，因为其本身是一个虚方法。

自定义图片组件

在游戏中经常会遇到使用不规则图形作为按钮的情况，比如地图分区点击，下面通过实例来定义一个类似的组件。

自定义组件

首先在脚本中添加一个MapImage组件。

内容如下：

using UnityEngine;
using UnityEngine.UI;

namespace y7play
{
    /// <summary>
    /// 自定义地图组件
    /// </summary>
    public class MapImage : Image
    {
        /// <summary>
        /// 重写射线检测方法
        /// </summary>
        /// <param name="screenPoint"></param>
        /// <param name="eventCamera"></param>
        /// <returns></returns>
        public override bool IsRaycastLocationValid(Vector2 screenPoint, Camera eventCamera)
        {
            return GetComponent<PolygonCollider2D>().OverlapPoint(screenPoint);
        }
    }
}

创建一个Button，并将Button中原有的Image组件换成我们的MapImage组件：

给Button添加一个Polygon Collider 2D组件：

通过编辑模式画一张地图（绘画功底有限，简单做个示例）：

编辑结束后关闭编辑模式，运行游戏进行测试。此时，当我们点击绿色框线时就会触发按钮事件，而点击绿色框线外的区域时则不会触发。

总结

通过这种方法，我们可以制作更复杂的按钮，比如我们可以提供多个碰撞器，或者自己写一套算法，来判断什么情况下可以被选中。

---

更多内容请查看总目录【Unity】Unity学习笔记目录整理