UGUI Mask组件使用

他人总结

Unity UGUI——遮罩效果（Mask）

我的总结

0.目的
让UI物体只显示遮罩部分

1.基本结构
▼Image带Mask组件，作为父物体
要部分显示的物体，作为子物体

2.注意
子物体要只显示Mask处的内容，Mask所在的父物体，必须加Image组件

3.原理（非须知内容，仅做参考）
目标物体，只有遮罩范围内的部分被渲染【详细解析版】Unity UGUI Mask组件实现原理

例子

只想让图片的头部显示——（呈现圆形，好放在怀表的盖子里）
请添加图片描述

主流方法

使用“圆形图片遮罩”（带Mask的圆形图片）——让Unity只渲染目标图片，在这个区域的图像。
Step1 用圆形图片做"遮罩"——在四周透明的圆形Image上加Mask组件
在这里插入图片描述
Step2 在Hierarchy层级视图的“遮罩”下放目标图片——目标图片就会只渲染“遮罩”部分

Step3 调整目标图片，目标图片被横向压缩了，显得人脸扁了——先“Set Native Size”还原比例后，发现图太大，头部显示不全，调整其尺寸为原先的1/4（125*81），调整目标图片局部坐标，使得头部尽量在“遮罩”内。

在这里插入图片描述
Step4 把怀表图，衬到头像底下——遮罩、头像、怀表底图，三部分缩放挪移后的效果图

注意， 1、圆形图片，四边得透明，只有中间的圆是实的。2、像素得高，否则，最终的结果会有锯齿。

其它方法

用带特定功能Shader的RawImage——建一个下面内容的Shader，把它拖到一个材质球上，让这个材质球作为目标图片RawImage的材质。
网上的Shader

Shader "ImageEffect/MaskIcon" 
{  
    Properties 
    {  
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Mask ("Base (RGB)", 2D) = "white" {}  
 
 
        _Color ("Tint", Color) = (1,1,1,1)
        _StencilComp ("Stencil Comparison", Float) = 8
        _Stencil ("Stencil ID", Float) = 0
        _StencilOp ("Stencil Operation", Float) = 0
        _StencilWriteMask ("Stencil Write Mask", Float) = 255
        _StencilReadMask ("Stencil Read Mask", Float) = 255
        _ColorMask ("Color Mask", Float) = 15
        [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
    }
 
    SubShader 
    {
        Tags
        { 
            "Queue"="Transparent" 
            "IgnoreProjector"="True" 
            "RenderType"="Transparent" 
            "PreviewType"="Plane"
            "CanUseSpriteAtlas"="True"
        }
 
        Stencil
        {
            Ref [_Stencil]
            Comp [_StencilComp]
            Pass [_StencilOp] 
            ReadMask [_StencilReadMask]
            WriteMask [_StencilWriteMask]
        }
 
        Cull Off
        Lighting Off
        ZWrite Off
        ZTest [unity_GUIZTestMode]
        Blend SrcAlpha OneMinusSrcAlpha
        ColorMask [_ColorMask]
 
        Pass
        {         
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
            #include "UnityUI.cginc"
            #pragma multi_compile __ UNITY_UI_ALPHACLIP
 
            struct a2v
            {
                fixed2 uv : TEXCOORD0;
                half4 vertex : POSITION;
                float4 color    : COLOR;
            };
 
            fixed4 _Color;
 
            struct v2f
            {
                fixed2 uv : TEXCOORD0;
                half4 vertex : SV_POSITION;
                float4 color    : COLOR;
            };
 
            sampler2D _MainTex;
            sampler2D _Mask;  
 
            v2f vert (a2v i)
            {
                v2f o;
                o.vertex = mul(UNITY_MATRIX_MVP, i.vertex);
                o.uv = i.uv;
 
                o.color = i.color * _Color;
                return o;
            }
 
            fixed4 frag (v2f i) : COLOR
            {
                half4 color = tex2D(_MainTex, i.uv) * i.color; 
                half4 mask = tex2D(_Mask, i.uv); 
                color.a *= mask.a;
                return color;
            }
            ENDCG
        }  
    }   
}

在这里插入图片描述
注意这里选择圆形图片

没搞清以上为什么不是圆形
以下是选择四周虚化图片的结果