实现ui的引导有很多种方式,一般都是在再外层盖上一个 掩码层。 然后把需要引导的区域镂空出来。
镂空的区域可以用很多ui的拼接,个人感觉这种方式比较麻烦。下面给出一种解决方案,直接在着色器中实现镂空的区域。
直接把镂空的区域传给着色器,然后再着色器中把这个区域透明掉即可。
1. 根据ui控件,得到镂空区域 代码如下:
Vector3[] fourCornersArray = new Vector3[4];
if (bOnce)
{
mButton.GetWorldCorners(fourCornersArray);
}
else
{
mButton1.GetWorldCorners(fourCornersArray);
}
Camera cameraTmp = null;
if (mCanvas.renderMode == RenderMode.ScreenSpaceOverlay)
{
}
else
{
cameraTmp = mCanvas.worldCamera;
}
Vector2 pos0 = RectTransformUtility.WorldToScreenPoint(cameraTmp, fourCornersArray[0]);
// Vector2 pos1 = cameraTmp.WorldToScreenPoint(fourCornersArray[1]);
Vector2 pos2 = RectTransformUtility.WorldToScreenPoint(cameraTmp, fourCornersArray[2]);
// Vector2 pos3 = cameraTmp.WorldToScreenPoint(fourCornersArray[3]);
strLog = string.Format("x = {0}, y = {1}, z = {2}, w = {3}", pos0.x, pos0.y, pos2.x, pos2.y);
wndMask.SetRect(pos0.x, pos0.y, pos2.x, pos2.y);
2.在掩码层中,保存这个区域。然后把这个区域传给着色器。还可以根据这个区域,显示 引导箭头的位置
public void SetRect(float lef, float top, float right, float bottom)
{
clipRect = new Vector4(lef, top, right, bottom);
mMaterial.SetVector("_MaskCull", new Vector4(lef, top, right, bottom));
mMaterial.SetFloat("_bNeedSet", 1);
RectTransform rc = transform as RectTransform;
// Vector2 sPos = new Vector2(lef, top + (bottom - top) / 2);
Vector2 sPos = new Vector2(lef + (right - lef) / 2, top);
Vector2 localPoint;
Camera cameraTmp = null;
if (mCanvas.renderMode == RenderMode.ScreenSpaceOverlay)
{
}
else
{
cameraTmp = mCanvas.worldCamera;
}
RectTransformUtility.ScreenPointToLocalPointInRectangle(rc, sPos, cameraTmp, out localPoint);
//localPoint.x -= mLable.rect.width / 2;
localPoint.y -= mLable.rect.height / 2; 这边可以根据实际引导箭头要显示在 上下左右 ,进行处理即可
mLable.anchoredPosition = localPoint;
mLable.gameObject.SetActive(true);
}
3.在掩码层中根据这个区域,做事件的派发
if (Input.GetMouseButtonUp(0))
{
Vector2 vPos = Input.mousePosition;
if (vPos.x >= clipRect.x && vPos.y >= clipRect.y &&
vPos.x <= clipRect.z && vPos.y <= clipRect.w)
{
ExecuteEvents.Execute<ISubmitHandler>(mPanel.gameObject, new PointerEventData(EventSystem.current), ExecuteEvents.submitHandler);
}
}
4.着色器
Shader "Unlit/MyUIMask"
{
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
[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
//[HideInInspector]
_MaskCull ("Mask Cull", Vector) = (0,0,100,200)
_bNeedSet ("Need Mask Cull", Int) = 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 appdata_t
{
float4 vertex : POSITION;
float4 color : COLOR;
float2 texcoord : TEXCOORD0;
};
struct v2f
{
float4 vertex : SV_POSITION;
fixed4 color : COLOR;
half2 texcoord : TEXCOORD0;
float4 worldPosition : TEXCOORD1;
//-------------------add----------------------
float2 vScenePos : TEXCOORD2;
//-------------------add----------------------
};
fixed4 _Color;
fixed4 _TextureSampleAdd;
float4 _ClipRect;
//-------------------add----------------------
float4 _MaskCull;
int _bNeedSet;
//-------------------add----------------------
v2f vert(appdata_t IN)
{
v2f OUT;
OUT.worldPosition = IN.vertex;
OUT.vertex = mul(UNITY_MATRIX_MVP, OUT.worldPosition);
OUT.texcoord = IN.texcoord;
#ifdef UNITY_HALF_TEXEL_OFFSET
OUT.vertex.xy += (_ScreenParams.zw-1.0)*float2(-1,1);
#endif
if (_bNeedSet > 0)
{
//模拟硬件除W的过程,转换到NDC空间
OUT.vScenePos = OUT.vertex / OUT.vertex.w;
//NDC空间转换到屏幕空间,得到实际屏幕上位置的点
OUT.vScenePos = (OUT.vScenePos*_ScreenParams.xy + _ScreenParams.xy)/2;
}
OUT.color = IN.color * _Color;
return OUT;
}
sampler2D _MainTex;
fixed4 frag(v2f IN) : SV_Target
{
half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
float Alpha = 1;
if (_bNeedSet > 0)
{
Alpha *= (IN.vScenePos.x >= _MaskCull.x);
Alpha *= (IN.vScenePos.x <= _MaskCull.z);
Alpha *= (IN.vScenePos.y >= _MaskCull.y);
Alpha *= (IN.vScenePos.y <= _MaskCull.w);
}
color.a *= (1-Alpha);
color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
#ifdef UNITY_UI_ALPHACLIP
clip (color.a - 0.001);
#endif
return color;
}
ENDCG
}
}
}