Untiy实用功能之UGUI不规则的按钮点击

2,891 阅读3分钟

这是我参与8月更文挑战的第25天,活动详情查看:8月更文挑战

概述

在日常开发中,可能有一些不规则按钮,而且这些不规则的按钮,区域外的部分还不能被点击,一个常见的例子就是地图板块按钮。我们都知道在Unity中Button组件的碰撞就是一个方形,那么应该如何制作不规则图案的按钮呢?接下来就让我们一起来看一下,本文中将是用两种方法来实现UGUI的不规则按钮的点击。

最终目标

本文最终的目标是点击下方图片照片红色圈出来的部分按钮没有反应,只有点击Unity图标的时候才有反应

image.png

方法一 alphaHitTestMinimumThreshold

第一种方法,我们使用的是unity中的image提供的一个alphaHitTestMinimumThreshold属性,这个属性提供了一个限制鼠标检测的一个alpha值,也就是说,当我们GetComponent().alphaHitTestMinimumThreshold = 0.1f;的时候(0.1是自定义的值),点击图片上像素的alpha值小于0.1的区域,程序就不会有响应。

首先我们给按钮添加一个点击事件,点击按钮时打印一条消息。

 //按钮注册点击事件
 this.gameObject.GetComponent<Button>().onClick.AddListener(() => 
 {
     Debug.Log("点击了Unity图标按钮!");
 });

此时我们可以看到,鼠标没有点击在Unity的图标上也会打印消息 展示13.gif 接下来我们设置一下alphaHitTestMinimumThreshold属性,运行

 //alphaHitTestMinimumThreshold 范围值:0 ~ 1 。
 this.gameObject.GetComponent<Image>().alphaHitTestMinimumThreshold = 0.1f;

有的同学可能会出现如下错误,不要怕,这是因为使用alphaHitTestMinimumThreshold属性,图片必须要是可读写的模式 image.png 设置图片可读写格式方法。

image.png 此时我们就会发现,点击Unity图标之外的地方按钮不执行。

展示14.gif 这种方法有几个问题:

  1. 由于是代码中需要读取图片的alpha值用于比较,因此图片在导入时需要开启Readable/Write Enable,这样会使运行时贴图大小翻倍,内存中会额外存储一份贴图数据,增大内存开销。
  2. 如果是点击区域内部需要有一些低于设置值的透明样式则无法满足。
  3. 点击区域的调整需要修改图片资源,十分不便。

方法二 Polygon Collider2D

不规则的按钮,实际上就是对不规则Collider的需求,在UGUI中正好有一个Polygon Collider2D组件,可以自定义图片的Collider,这样我们就可以实现不规则按钮的点击了。 首先我们先创建一个脚本,对IsRaycastLocationValid进行重写,IsRaycastLocationValid 的判断区域是RectTransform的区域。 如果 polygon Collider编辑出来的区域大于RectTransform , 必须调节RectTransform的区域。

public class CustomImage : Image
{
    private PolygonCollider2D _polygon;

    private PolygonCollider2D Polygon
    {
        get
        {
            if (_polygon == null)
                _polygon = GetComponent<PolygonCollider2D>();

            return _polygon;
        }
    }
    public override bool IsRaycastLocationValid(Vector2 screenPoint, Camera eventCamera)
    {
        Vector3 point;
        RectTransformUtility.ScreenPointToWorldPointInRectangle(rectTransform, screenPoint, eventCamera, out point);
        return Polygon.OverlapPoint(point);
    }
}

接着,我们创建一Button,但是此时需要将按钮自带的Image组件删除,替换成我们上面重写的脚本。如下

展示16.gif 此时Button组件的TargetGraphic中的Image会丢失,我们重新拖一下即可。此时的Button组件如下

image.png 接下来我们要给Button组件添加自定义碰撞,添加Polygon Collider2D,具体操作如下,

展示17.gif 接下来给按钮写一个脚本添加点击事件,和文章最上方的写法一样即可实现不规则的按钮点击了

源代码地址

GitHub下载地址:下载点击这里跳转

写在最后

所有分享的内容均为作者在日常开发过程中使用过的各种小功能点,分享出来也变相的回顾一下,如有写的不好的地方还请多多指教。欢迎大家相互学习进步。本片文章就先写到这里,希望对你能够有所帮助