Unity-UGUI笔记：Mask、RectMask2D和自定义Mask

一、用途

用来对UI对象进行遮罩显示的组件，它可以用来限制子物体的显示区域来实现一些特殊的效果。

二、分类以及介绍

Unity提供了两个Mask的UI组件：Mask、RectMask2D。
1.Mask：常用的遮罩组件，可以通过纹理来变成不同形状的遮罩。
组件属性：Show Mask Graphic：勾选后可以显示遮罩对象的图像。

2.RectMask2D：RectMask2D也是Unity UGUI中常用的2d遮罩组件，但与Mask不同的是，RectMask2D只能限制子对象在矩形区域中显示（无法使用其他形状的遮罩图形）。RectMask2D的属性有以下几个：
Padding：控制子物体在这招范围内的显示布局

Softness：遮罩边缘的柔化度，值越大边缘越柔化。

三、简单自定义遮罩实现

除了上述Unity自带的遮罩组件，还可以通过Shader来实现自定义的遮罩效果。本文通过UI-Unlit-Detail的模板Shader来实现简单的自定义Mask。
原理：在UI-Unlit-Detail中输出的颜色信息是两个纹理RGB通道一起混合的，若仅显示第一个纹理，第二个纹理仅用来作为一个遮罩，则不需要两个RGB一起混合，只需要将第二个纹理的alpha通道和第一个纹理混合，从而实现遮罩效果。

之后创建新的材质，将材质的Shader改为该Shader，然后将材质赋予Image上就行了。

但是发现，图片还是没有遮罩效果，根据逻辑理应该显示圆形的遮罩。
原因：因为自定义Shader实现这些效果，需要将Canvas空间下的UI的顶点坐标设置到UV1中。我们在更改遮罩里面显示的图片大小时，遮罩大小不会发生改变，但遮罩上显示的是改变的图片的大小，这都是通过纹理变换来实现的，纹理变换要依靠uv坐标，所以要将该UI，也就是这个Image的顶点坐标设置到UV1中，从而提供给着色器处理。
如何设置：在Image中添加组件Position As UV1：该组件能将Canvas空间下的UI的顶点坐标设置到UV1中

然后就实现遮罩了。