UGUI - 实现不规则形状按钮的点击事件

 

一般情况

通常，我们的按钮都是矩形的，并且可触碰的范围也是矩形的，比如下图

 

 

 

特殊需求

比如下图这种特殊形状的按钮，需要只点击有颜色的部分响应，没有颜色的部分不响应

 

方法1

1. 设置Canvas

配置UI摄像机，Sorting Layer追加一层不规则按钮专用的图层

2. 配置作为按钮的Sprite（因为需要用到Collider）

 

3. 配置Collider

重点是自动生成的这些顶点数据，构成的判定区域是否为想要的

4. 使用EasyTouch等插件 or 自己实现摄像机发出的射线检测，响应碰撞事件

方法2

1. 首先创建一个Buon控件,命名为“bt1”,由于这里不需要它的Text子对象,所以可以
将其删除。选中bt后执行“ Component→ Physics2D→ Polygon Colloder2D”命令,为btl添加一
个多边形碰撞器组件。

2. 单击 Polygon Colloder2D组件中的 Edit Collider按钮,在 Scene界面中将想要的碰撞检
测区域勾选出来

3. 接下来要实现将按钮的碰撞区域和 Polygon Colloder2D组件勾选区域的挂钩,这一步要
重写Image类。新建一个脚本,将其命名为“ UGUIlmagePlus.cs”

using UnityEngine;
using UnityEngine.UI;

public class UGUIImagePlus : Image
{
    PolygonCollider2D imageCollider;

    protected override void Awake()
    {
        base.Awake();
        imageCollider = GetComponent<PolygonCollider2D>();
    }

    public override bool IsRaycastLocationValid(Vector2 screenPoint, Camera eventCamera)
    {
        //return base.IsRaycastLocationValid(screenPoint, eventCamera);
        var _hit = imageCollider.OverlapPoint(screenPoint);
        return _hit;
    }
}

4. 用UGUIlmagePlus.cs替换掉Button上的Image组件，重新为Button组件的Texture