UGUI学习--进阶--异形按钮与Canvas Group

·来源于唐老狮的视频教学，仅作记录和感悟记录，方便日后复习或者查找

一、异形按钮是什么

就是长得像异形的按钮（划掉）

就是可以交互响应点击的区域不是矩形的按钮。

比如这里上面就是异形按钮，可以看到只有点击有像素的区域才会发生响应

下边是还没做成异形按钮，可以看到没有像素的区域依然可以被点到

二、制作异形按钮的两种方法

1.通过透明图片子物体

因为按钮的点击后产生的事件都是自下而上传递的。就是说一个有按钮组件的物体，如果它有子物体而且子物体是图片控件且可以被射线检测，那点击这个图片控件仍然可以把点击事件上传给到父物体当中

所以我们可以把按钮本身图片的给关掉，然后用很多个透明图片作为子物体去勾勒它的形态。

这种方法看起来麻烦，但是是目前比较通用可行的解决方案

注意：子物体图片只是透明的，但是是需要有图片的

2.代码控制

这种方法只有是2的次方的大小的图片可以使用好像，因为它需要满足能够进行Crunch format的压缩格式，而不是2的次方的就没办法这么压缩，所以不能用这个方法。报这个警告的时候就说明不能用了

2.1.把图片设置为可读的

先确保它的大小是2的次方的

然后把可读可写打开

2.2.在脚本中用内置方法设置

public class specialButton : MonoBehaviour
{
    public Image image;    //获取要设为异形按钮的图片

    private void Start()
    {
        image.alphaHitTestMinimumThreshold = 0.1f;    //规定图片可以被射线检测的像素的最小阈值
    }
}

比阈值小的像素就不会被点击和检测

这种方法虽然看起来简单，但是会消耗更多的性能，同时对图片的大小格式有要求。不如用透明图片子物体设置范围更通用

三、Canvas Group是什么

我们可能会遇到希望控制一个面板中所有的控件同时进行淡入淡出效果，或者整体禁用的需求。但是我们可能常常只能一个一个去设置它们。而Canvas Group可以帮助我们去解决这个问题

比如我们这个面板上有这么多控件，如果我们要控制它们同时进行淡入淡出，去一个一个控制肯定就太麻烦了

加上Canvas Group之后我们就可以很轻松地实现这个需求了

四、Canvas Group的参数与使用

1.相关参数

• Alpha：用于控制当前组件及其子物体中所有控件的透明效果
• Interactable：用于控制当前组件及其子物体中所有控件是否禁用
• Blocks Raycasts：整体射线检测设置
• Ignore Parent Group：如果这个挂了Canvas Group的物体的子物体也挂了一个Canvas Group且这个子物体的Canvas Group把这个选项打勾了，那这个子物体下的子物体就不会受到这个子物体的父物体挂载的Canvas Group的影响变化了。只会受到这个子物体挂载的Canvas Group的影响

2.使用

先创建一个父物体（常作为面板），然后在面板下创建很多的控件

然后给这个父物体挂载Canvas Group脚本即可。之后根据需要的效果去更改上面的参数就好了

五、总结

①异形按钮就是非矩形的按钮，可以通过取消按钮图片的射线检测并给他添加透明的图片作为子物体去描述它的可点击区域，或者通过把它设置为可读可写后通过代码直接修改射线检测的最低像素阈值。一般来说用透明图片作为子物体来设置点击区域的方法更通用

②Canvas Group提供了给我们整体控制组件实现淡入淡出、禁用等效果的简单解决方案