引用：1：UGUIshader扣洞_那个妹子留步的博客-CSDN博客
? ? ? ? ? ?
制作新手引导时，遇到需要在界面显示多个挖洞的情况。
?在翻阅一些博客之后，找到一种实现方法。具体思路是：用shader实现多个挖洞，主挖洞的位置上覆盖一个自己实现，继承于Mask组件的用于点击穿透的组件。
多个挖洞的shader：
Shader "Custom/Holeshader"
{
Properties
{
[PerRendererData] _MainTex ("Sprite Texture", 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
//add
// _Center("Center", vector) = (0, 0, 0, 0)//单个扣洞 面板赋值
_Silder ("_Silder", Range (0,1000)) = 1000 // sliders
//add
[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
{
Name "Default"
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma target 2.0
#include "UnityCG.cginc"
#include "UnityUI.cginc"
#pragma multi_compile __ UNITY_UI_ALPHACLIP
struct appdata_t
{
float4 vertex : POSITION;
float4 color : COLOR;
float2 texcoord : TEXCOORD0;
UNITY_VERTEX_INPUT_INSTANCE_ID
};
struct v2f
{
float4 vertex : SV_POSITION;
fixed4 color : COLOR;
float2 texcoord : TEXCOORD0;
float4 worldPosition : TEXCOORD1;
UNITY_VERTEX_OUTPUT_STEREO
};
fixed4 _Color;
fixed4 _TextureSampleAdd;
float4 _ClipRect;
float _Silder;
// float2 _Center;//单个
uniform float2 _PointsArr[10];
uniform uint _PointCount;
v2f vert(appdata_t IN)
{
v2f OUT;
UNITY_SETUP_INSTANCE_ID(IN);
UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
OUT.worldPosition = IN.vertex;
OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);
OUT.texcoord = IN.texcoord;
OUT.color = IN.color * _Color;
return OUT;
}
sampler2D _MainTex;
fixed4 frag(v2f IN) : SV_Target
{
half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
#ifdef UNITY_UI_ALPHACLIP
clip (color.a - 0.001);
#endif
//-------------------add----------------------
//循环扣洞
[loop]
for(uint index;index<_PointCount;index++){
color.a*=(distance(IN.worldPosition.xy,_PointsArr[index].xy) > _Silder);
//1像素渐变透明 以免洞边缘尖锐
float d = distance(IN.worldPosition.xy,_PointsArr[index].xy);
if( d > _Silder && d < (_Silder+1)){
color.a *= (d-_Silder);
}
}
//单个扣洞
// color.a*=(distance(IN.worldPosition.xy,_Center.xy) > _Silder);
// //1像素渐变透明 以免洞边缘尖锐
// float d = distance(IN.worldPosition.xy,_Center.xy);
// if( d > _Silder && d < (_Silder+1)){
// color.a *= (d-_Silder);
// }
color.rgb*= color.a;
//-------------------add----------------------
return color;
}
ENDCG
}
}
}继承于Mask的HoleMask：
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class HoleMask : Mask
{
float alpahThreshold = 0.3f;
public override bool IsRaycastLocationValid(Vector2 sp, Camera eventCamera)
{
if (!isActiveAndEnabled)
{
return true;
}
//当没有指定精灵时返回true，因为不指定Spirte的时候，Unity将其区域填充为默认的白色，全部区域都是可以响应点击的
Image _image = this.GetComponent<Image>();
Sprite _sprite = this.GetComponent<Image>().sprite;
if (_sprite == null || _image == null)
{
return true;
}
//坐标系转换
Vector2 localPositionPivotRelative;
RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, sp, eventCamera, out localPositionPivotRelative);
Rect pixelAdjustedRect = this.GetComponent<Image>().GetPixelAdjustedRect();
// 转换为以屏幕左下角为原点的坐标系
var localPosition = new Vector2(localPositionPivotRelative.x + rectTransform.pivot.x * rectTransform.rect.width,
localPositionPivotRelative.y + rectTransform.pivot.y * rectTransform.rect.height);
var spriteRect = _sprite.textureRect;
var maskRect = rectTransform.rect;
var x = 0;
var y = 0;
// 转换为纹理空间坐标
switch (_image.type)
{
case Image.Type.Sliced:
{
var border = _sprite.border;
// x 轴裁剪
if (localPosition.x < border.x)
{
x = Mathf.FloorToInt(spriteRect.x + localPosition.x);
}
else if (localPosition.x > maskRect.width - border.z)
{
x = Mathf.FloorToInt(spriteRect.x + spriteRect.width - (maskRect.width - localPosition.x));
}
else
{
x = Mathf.FloorToInt(spriteRect.x + border.x +
((localPosition.x - border.x) /
(maskRect.width - border.x - border.z)) *
(spriteRect.width - border.x - border.z));
}
// y 轴裁剪
if (localPosition.y < border.y)
{
y = Mathf.FloorToInt(spriteRect.y + localPosition.y);
}
else if (localPosition.y > maskRect.height - border.w)
{
y = Mathf.FloorToInt(spriteRect.y + spriteRect.height - (maskRect.height - localPosition.y));
}
else
{
y = Mathf.FloorToInt(spriteRect.y + border.y +
((localPosition.y - border.y) /
(maskRect.height - border.y - border.w)) *
(spriteRect.height - border.y - border.w));
}
}
break;
case Image.Type.Simple:
default:
{
// 转换为统一UV空间
x = Mathf.FloorToInt(spriteRect.x + spriteRect.width * localPosition.x / maskRect.width);
y = Mathf.FloorToInt(spriteRect.y + spriteRect.height * localPosition.y / maskRect.height);
}
break;
}
// 如果texture导入过程报错，则删除组件
try
{
//if (_sprite.texture.GetPixel(x, y).a < alpahThreshold)
//{
// Debug.Log("click work");
//}
return _sprite.texture.GetPixel(x, y).a < alpahThreshold;
}
catch (UnityException e)
{
Debug.LogError("Mask texture not readable, set your sprite to Texture Type 'Advanced' and check 'Read/Write Enabled'" + e.Message);
return !RectTransformUtility.RectangleContainsScreenPoint(rectTransform, sp, eventCamera);
}
}
}
界面摆放：
mask物体上挂载带shader的材质：
?obj物体上挂载HoleMask组件（Image图形就是个圆形）：
?代码调用:
void Main()
{
int len = 4;
Vector4[] vec4Points = new Vector4[len];//传给shader的值
vec4Points[0] = new Vector4(200, -300, 0, 0);
vec4Points[1] = new Vector4(100, 200, 0, 0);
vec4Points[2] = new Vector4(-200, 300, 0, 0);
vec4Points[3] = new Vector4(-100, -200, 0, 0);
maskImg.material.SetVectorArray("_PointsArr", vec4Points);
maskImg.material.SetInt("_PointCount", vec4Points.Length);
}?
