Unity之新手引导shader遮罩事件穿透

效果图

设计思路

1.新手引导我们期待开发内容不影响正常的功能模块，意思就是分层，新手引导在正常功能之上
2.新手引导层级用一层深色bg显示遮住正常功能层级，在需要引导的位置留出高亮区域
3.在这个新手引导层做事件渗透，给指定的对象或UI做事件渗透，如果点击交互位置处于指定UI或对象范围内，让事件渗透新手引导层，到正常功能层。

场景搭建

搭建两个层级

一个正常功能层级为Canvas下，一个新手引导层级在GuideHolder下。

制作新手引导的预制体

材质使用我们特制的带镂空效果的材质shader，并挂载一个事件渗透作用的脚本

代码

这里有两个比较重要的内容，一个是遮罩层是深色的，并要镂空指定区域做高亮，这里使用shader去制作效果图。二是在合适时机做指定区域的事件渗透。

GuideMask.cs

    /// <summary>/// 创建圆形点击区域/// </summary>/// <param name="pos">圆心的屏幕位置</param>/// <param name="rad">圆的半径</param>/// <param name="CallBack">点击的回调</param>public void CreateCircleMask(Vector3 pos, float rad, GameObject target){ShowGuideMask(()=> {ShowTween = true;ev.SetTargetImage(target);_rectTrans.sizeDelta = Vector2.zero;_materia.SetFloat("_MaskType", 0f);CurRadNum = rad;_materia.SetVector("_Origin", new Vector4(pos.x, pos.y, rad + 1000, 20));});}public  void ShowGuideMask(Action callback){ShowTween = false;if (_rectTrans == null){ResMgr.Instance.Load("GuideSystem", (obj) => {guide = Instantiate((GameObject)obj, ISceneManager.Instance.GuideHolder);_rectTrans = guide.GetComponent<RectTransform>();_rawImage = guide.GetComponent<RawImage>();_rawImage.color = new Color(1, 1, 1, 1);_materia = _rawImage.material;ev = guide.GetComponent<EventPenetrate>();callback();});}else{callback();}}

GuideMask.shader

Shader "UI/GuideMask"
{Properties{[PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}_Color("Tint", Color) = (1,1,1,1)_Blur("边缘虚化的范围", Range(1,1000)) = 100_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//中心_Origin("Circle",Vector) = (0,0,0,0)//裁剪方式 0圆形 1圆形_MaskType("Type",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 OffLighting OffZWrite OffZTest[unity_GUIZTestMode]Blend SrcAlpha OneMinusSrcAlphaColorMask[_ColorMask]Pass{Name "Default"CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma target 2.0#include "UnityCG.cginc"
#include "UnityUI.cginc"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;float4 _Origin;float _MaskType;   float _Blur;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;if (_MaskType == 0) {//if (distance(IN.worldPosition.xy, _Origin.xy) <= _Origin.z)//{//    color.a = 0;//}            float dis = distance(IN.worldPosition.xy, _Origin.xy);//过滤掉距离小于（半径-过渡范围）的片元clip(dis - (_Origin.z - _Blur));//优化if条件判断，如果距离小于半径则执行下一步，等于if(dis < _Radius)fixed tmp = step(dis, _Origin.z);//计算过渡范围内的alpha值color.a *= (1 - tmp) + tmp * (dis - (_Origin.z - _Blur)) / _Blur;}else if (_MaskType == 1) {//UnityGet2DClipping这个函数实现了判断2D空间中的一点是否在一个矩形区域中if (UnityGet2DClipping(IN.worldPosition.xy, _Origin)){color.a = 0;}}else if (_MaskType == 2){if (UnityGet2DClipping(IN.worldPosition.xy, _Origin)){color.a = 0;#ifdef UNITY_UI_CLIP_RECTcolor.a *= UnityGet2DClipping(IN.worldPosition.xy, _Origin);#endif}               }return color;}ENDCG}}
}

调用

 GuideMask.Instance.CreateCircleMaskoffset(button2.gameObject, 0, null);GuideMask.Instance.CloseGuideMask();

工程项目

链接：https://pan.baidu.com/s/1v4laE9QdqRGWKqfKJpnkxQ
提取码：s8qc

Unity之引导功能遮罩事件穿透相关推荐

小程序遮罩层（阻止事件穿透）
小程序遮罩层(阻止事件穿透) 若弹出层没有滚动事件直接在蒙板上加catchtouchmove="preventTouchMove" 即可 <view class=&quo ...
uni-app 遮罩层事件穿透解决办法catchtouchmove
前言: 最近在做遮罩层相关的组件时,发现出现遮罩层后,其比遮罩层层级低的其他组件依然能滑动滚动,这就很无语.后面我尝试通过各种布尔值试图阻断这种情况,后面越做越复杂,逻辑越做越乱.再后来发现了一个专门 ...
Android多页蒙版遮罩引导功能(源码+解析)
#Android多页蒙版遮罩引导功能(源码+解析) 需求:博主前段时间做的教育类型APP,需要引导用户(低龄化小朋友),播放器的播放,页面可以左右滑动,以及右上方进入答题卡入口(小朋友都是很聪明的,引 ...
Unity 引导功能
, 分享一个引导功能 public void Guide(Canvas canvas, RectTransform target, GuideType guideType,TranslateType ...
Unity 入门笔记 - 05 - 动画事件类音效对话框
Unity 入门笔记 - 05 - 动画事件&类&音效&对话框前言:无目录 Unity 入门笔记 - 05 - 动画事件&类&音效&对话框一.动画 ...
关于Unity的回放功能
关于Unity的回放功能最近公司的仿真项目需要用到回放的功能,但是在unity中的回放功能,无论是插件(EZRecordManager)还是其他人的代码,感觉都不太好,网上有两个博客讲的回放,在这里 ...
html全屏遮罩层,js遮罩层穿透怎么用JS弄遮罩层？全屏，有透明
也可直接点"搜索资料"搜索整个问题. 遮罩层 js 事件穿透搜索资料本地图片图片链接代码提交回答匿名回答自动保存中 html中的frameset,假如有上中下三个f ...
UGUI 事件穿透规则
UGUI 事件穿透规则 UGUI事件分为两大类:点击和拖拽. 点击包括 pointerdown, pointerup. 拖拽包括 begindrag, drag, enddrag. 点击事件无穿透:只 ...
u-boot的linux内核映像加载,基于U_Boot的Linux内核映像加载与引导功能实现.pdf
基于U_Boot的Linux内核映像加载与引导功能实现 20 10 8 ( ) Aug . 2010 10 4 Journal of Langfang T eachers College( N atu ...

Unity之引导功能遮罩事件穿透