思路:用Image组件做遮罩层,利用Shader裁剪掉按钮区域的渲染。
一、工程截图
二、设计用于挖洞的Shader
//新手引导遮罩层&挖洞 Shader "Custom/UIGuideMask" { Properties { //背景颜色 _BackgroundColor("Background Color", Color) = (0.0, 0.0, 0.0, 0.5) //rect.xy=(0,0),为屏幕左上角坐标 //rect.zw=(CanvasWidth, CanvasHeight),为屏幕右下角坐标 _ScreenClipRect ("Screen Clip Rect", Vector) = (0,0,0,0) } SubShader { Tags { "RenderType"="Opaque" } LOD 100 ZWrite Off Blend SrcAlpha OneMinusSrcAlpha Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" #include "UnityUI.cginc" struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; }; fixed4 _BackgroundColor; float4 _ScreenClipRect; v2f vert(appdata v) { v2f o; //省略下面这句会报警告: Output value 'vert' is not completely initialized UNITY_INITIALIZE_OUTPUT(v2f, o); o.vertex = UnityObjectToClipPos(v.vertex); return o; } fixed4 frag(v2f i) : SV_Target { //i.vertex.xy被Unity自动转成了屏幕坐标 fixed4 col = _BackgroundColor; col.a *= (1 - UnityGet2DClipping(i.vertex.xy, _ScreenClipRect)); clip(col.a - 0.001); return col; } ENDCG } } }
三、引导类
using System; using UnityEngine; using UnityEngine.UI; /// <summary> /// 新手引导遮罩层 /// </summary> [ExecuteInEditMode, RequireComponent(typeof(Image))] [DisallowMultipleComponent] public class UIGuideMask : MonoBehaviour, ICanvasRaycastFilter { private RectTransform canvasRT; private float canvasHeight; private Material material; private RectTransform targetRect; public Action OnClickTargetRect; private void Awake() { var canvas = GetComponentInParent<Canvas>(); canvasRT = canvas.GetComponent<RectTransform>(); canvasHeight = canvasRT.sizeDelta.y; var image = GetComponent<Image>(); material = image.material; } private void OnDisable() { targetRect = null; OnClickTargetRect = null; } private void Update() { if (Input.GetMouseButtonUp(0)) { Vector2 mousePosition = Input.mousePosition; if (ContainsScreenPoint(mousePosition)) { //如果用户点击了引导区域,则调用回调函数 //可在外部回调函数判断是否继续下一步引导 OnClickTargetRect?.Invoke(); } } } // 显示引导 public void Show(RectTransform target, Action callback) { this.targetRect = target; this.OnClickTargetRect = callback; //获取对象的世界坐标 Vector3[] fourCornersArray = new Vector3[4]; target.GetWorldCorners(fourCornersArray); Vector3 ltPos = fourCornersArray[1];//左上角 Vector3 rdPos = fourCornersArray[3];//右下角 //注意: //C#获取到的屏幕(0,0)在左下角, //Shader中的屏幕(0,0)在左上角。 ltPos = RectTransformUtility.WorldToScreenPoint(null, ltPos); rdPos = RectTransformUtility.WorldToScreenPoint(null, rdPos); //与Shader中的屏幕原点保持一致(即,Y轴反向) ltPos.y = canvasHeight - ltPos.y; rdPos.y = canvasHeight - rdPos.y; //裁剪区域 Vector4 clipRect = new Vector4(); clipRect.x = ltPos.x; clipRect.y = ltPos.y; clipRect.z = rdPos.x; clipRect.w = rdPos.y; material.SetVector("_ScreenClipRect", clipRect); } // 判断屏幕坐标点是否在目标区域内 public bool ContainsScreenPoint(Vector2 screenPoint) { if (targetRect == null) return false; bool result = RectTransformUtility.RectangleContainsScreenPoint(targetRect, screenPoint); return result; } // 事件是否向下渗透 // true:不渗透。false:渗透 public bool IsRaycastLocationValid(Vector2 sp, Camera eventCamera) { return !ContainsScreenPoint(sp); } }
四、测试类
using System.Collections; using System.Collections.Generic; using UnityEngine; public class TestGuide : MonoBehaviour { public UIGuideMask guide; public List<RectTransform> guideList = new List<RectTransform>(); void Start() { BeginGuide(); } private void BeginGuide() { if (guideList.Count == 0) return; var rt = guideList[0]; guideList.RemoveAt(0); guide.Show(rt, ()=> { BeginGuide(); }); } }
运行测试 (因为做了事件向下渗透判断,所以引导区的按钮是能响应鼠标事件的)