【UGUI】如何实现非矩形不规则Button

        在Unity中,按钮的点击范围默认是矩形的,而我们想要实现非矩形不规则的按钮该怎么做呢?比如这样的按钮:

 

        在Unity官方API中,给出了这样的解决方案:

        Image.alphaHitTestMinimumThreshold        

        在 Unity 中,Image.alphaHitTestMinimumThreshold 属性用于指定 Image 组件在进行 alpha 值命中测试时的透明度阈值。默认情况下,该属性值为 0,表示所有不透明像素都可以通过 alpha 值命中测试。如果将该属性设置为大于 0 的值,则只有当图像中的像素透明度大于等于该阈值时,该像素才会被视为不透明像素,并且图像才会通过 alpha 值命中测试。

        Image.alphaHitTestMinimumThreshold 属性在使用 Image 组件进行交互时非常有用。当用户单击或触摸某个 Image 对象时,Unity 会检查该对象在单击或触摸点下是否具有不透明像素。如果是这样,则该对象被视为已被单击或触摸。如果不是,则该对象不会响应单击或触摸事件。

        该属性通常用于优化交互性能。如果设置该属性为较高的值,则可以减少 alpha 值命中测试的计算量,从而提高应用程序的性能。但是,如果将该属性设置得太高,则可能会导致一些不透明像素被视为透明像素,从而影响应用程序的交互。

        在API中指出,“In order for greater than 0 to values to work, the sprite used by the Image must have readable pixels. This can be achieved by enabling Read/Write enabled in the advanced Texture Import Settings for the sprite and disabling atlassing for the sprite.”为了使大于 0 的值起作用,Image 使用的 sprite 必须具有可读像素。这可以通过在精灵的高级纹理导入设置中启用读/写并禁用精灵的图集来实现。即将图片素材导入Unity后,进行如下设置:

        Unity的Sprite Packer是一种将多个小的图片(也称为精灵)打包成单个纹理的工具,可以提高游戏的性能和减少内存使用量。

        Sprite Packer有两种模式:

        Disabled:默认情况下,Sprite Packer是禁用的,不会对Sprite进行任何优化,这对于小型项目或测试非常有用。

        Sprite Atlas:Sprite Packer高级模式,称为Sprite Atlas,将自动将Sprite打包到较少的纹理中,这种模式适合大规模项目。

        通过使用Sprite Packer,游戏可以避免在运行时加载多个小纹理而导致的性能问题,并且可以更有效地使用内存。

        以下仅通过正六边形图片素材进行实现及测试,小伙伴们可以导入任意不规则图片素材(背景透明)进行测试:

        第一步,创建一个Image(GameObject > UI > Image),并将图片素材拖入Image组件下的Source Image属性中。

         第二步,为Image添加Button组件。

         第三步,给Image贴代码,新建C#脚本,命名为ButtonTest,双击打开cs文件,代码如下:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class ButtonTest : MonoBehaviour
{
    public int count = 0;
    // Start is called before the first frame update
    void Start()
    {
        //也可以适当把阈值设小一点,比如0.1f
        GetComponent<Image>().alphaHitTestMinimumThreshold = 0.5f;
    }

    // Update is called once per frame
    void Update()
    {
        
    }
    //测试
    public void OnClick()
    {
        count++;
    }
}

        第四步,添加点击事件(如下图),运行测试。

        可见,当我们单击图片按钮范围之外时,count不会增加,而当我们单击图片按钮范围内时,count加1。细心的小伙伴们可能会发现,当单击图片左下角或左边范围之外小距离时,count也进行了加1,而单击图片右上角或右边范围之内小距离时,count不会加1,这里给出解决方案:将图片素材进行以下设置。

        FullRect模式指定了UI元素的mesh(网格)大小将填满整个矩形区域,而Tight模式则会将mesh的大小缩小到紧贴着UI元素的边缘。

        更具体地说,FullRect模式创建一个完整的网格,该网格的大小与UI元素的矩形区域相同。这意味着网格会完全覆盖UI元素的矩形区域,包括任何空白区域。

        相反,Tight模式将创建一个只覆盖UI元素实际可见内容的网格。这意味着网格不会覆盖UI元素周围的任何空白区域,而只会包含UI元素的实际内容。

猜你喜欢

转载自blog.csdn.net/m0_51942776/article/details/130310257