UGUI 制作新手引导，屏幕遮罩，点击穿透

已于 2024-01-16 18:00:42 修改
阅读量1.3k 收藏 27
点赞数 26
文章标签： 着色器 uv 材质 游戏美术
于 2024-01-16 17:56:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37302769/article/details/135628153
版权

新手引导已经是游戏必备的功能了，这篇帖子分享一个制作新手引导的屏幕遮黑，只显示需要点击或者提示区域的部分

1：Shader

        首先创建一个unity shader，用于控制屏幕遮黑，并吧我们需要的区域剪裁为透明，先上源码

Shader "UI/GuideMask"
{
	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
		 
		_Origin("Origin Center",Vector) = (0,0,0,0)

		[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;
			float4 _Origin;

			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
			{
				float2 uv = IN.texcoord;
				half4 col = IN.color;
				//开始裁剪
				//外部直接给坐标 宽 高 GPU计算比率
				//float posX = (_Origin.x + _ScreenParams.x  / 2) / _ScreenParams.x;
				//float posY = (_Origin.y + _ScreenParams.y / 2) / _ScreenParams.y;
				float posX = _Origin.x / _ScreenParams.x;
				float posY = _Origin.y / _ScreenParams.y;
				float2 pos = float2(posX, posY);

				//float w = _Origin.z / _ScreenParams.x / 2;
				//float h = _Origin.w / _ScreenParams.y / 2;
				//if (uv.x > pos.x - w && uv.x < pos.x + w && uv.y > pos.y - h && uv.y < pos.y + h)
				//col.a = 0;
				float w = _Origin.z / _ScreenParams.x ;
				float h = _Origin.w / _ScreenParams.y;
				if (uv.x > pos.x && uv.x < pos.x + w && uv.y > pos.y && uv.y < pos.y + h)
				col.a = 0;


				half4 color = (tex2D(_MainTex,uv) + _TextureSampleAdd) * col;
				color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
				clip(col.a);
				#ifdef UNITY_UI_ALPHACLIP
					clip(color.a - 0.001);
				#endif

				return color;
			}
			ENDCG
		}
	}
}

        这个shader主要是控制一个Vector变量，x和y 代表屏幕二维坐标，z和w代表代表镂空区域的宽和高，其余地方为遮黑

        可以看到上面的代码有一部分注释区域，现在的代码逻辑是已xy的屏幕二维坐标，向右上方镂空矩形，如果把注释的代码替换掉他下面对应的几行，则是已xy的UI坐标，向四周镂空矩形，这个看个人方案取舍就行

       然后创建一个材质球，来应用这个shader，就可以看到这些参数了

        上图框选出来的Tint为遮罩颜色，一般设置黑色加一个透明度即可，下面的Origin Center则是上面说到的坐标和宽高了

        然后在UI层创建一个Image，并使用此材质，调整一下参数，就可以在Game视图看到效果了

        上面就是看到的效果了，参数为 100,100,300,500意思就是在屏幕坐标100,100的位置镂空一个300*500的矩形，注意，是屏幕坐标系，左下角为00点的，向右上方绘制

2：C#代码

        接下来创建一个c#脚本来控制我们要镂空的区域，需要一个RectTransform组件，根据组件的位置和大小，来控制镂空区域。但这层遮罩是在UI最高层的，我们还需要处理下点击事件，让其能按到指定的按钮，先上代码

using System;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

namespace MD.UI
{
    public enum GuideFinishType
    {
        None, 
        Btns, //点击触发按钮
        Anywhere,//点击任意位置
    }
    public class UIGuideMask : MonoBehaviour, IPointerClickHandler
    {
        [SerializeField] RectTransform outTarget;
        [SerializeField] List<Button> canClickButton;
        [SerializeField] GuideFinishType finishType;

        [SerializeField] bool isFollow; //是否高亮跟随目标

        public event Action onClickCb; //点到目标的回调

        private Material material;
        private Vector4 outValue;
        private Camera uiCamera;

        void Awake()
        {
            Image image = GetComponent<Image>();
            if (image == null)
            {
                Debug.LogError("UIGuideMask need image");
            }
            material = image.material;
            if (material == null)
            {
                Debug.LogError("UIGuideMask need  Shader GuideMask Material ");
            }

        }


        public void SetOutTarget(RectTransform target)
        {
            if (target == null)
            {
                outTarget = null;
                gameObject.SetActive(false);
            }
            else
            {
                outTarget = target;
                gameObject.SetActive(true);
                ApplyOutMask();
            }
        }
        public void SetClickBtn(List<Button> btns)
        {
            canClickButton = btns;
        }
        public void AddClickBtn(Button btn)
        {
            if (canClickButton == null) canClickButton = new List<Button>();

            canClickButton.Add(btn);
        }
        public void Finish()
        {
            outTarget = null;
            canClickButton.Clear();
            finishType = GuideFinishType.None;

            gameObject.SetActive(false);
            onClickCb?.Invoke();
        }


        void Update()
        {
            if (isFollow)
            {
                ApplyOutMask();
            }
        }


        void ApplyOutMask()
        {
            if (outTarget != null)
            {
                if (uiCamera == null)
                {
                    uiCamera = GameObject.Find("UICamera").GetComponent<Camera>();
                }

                Vector3[] corners = new Vector3[4];
                outTarget.GetWorldCorners(corners);
                Vector3 screenPos = RectTransformUtility.WorldToScreenPoint(uiCamera, corners[0]);

                outValue.x = screenPos.x;
                outValue.y = screenPos.y;
                outValue.z = outTarget.rect.width;
                outValue.w = outTarget.rect.height;

                material.SetVector("_Origin", outValue);

            }
        }

        public void OnPointerClick(PointerEventData eventData)
        {
            if (eventData == null) return;

            if (finishType == GuideFinishType.Anywhere)
            {
                Finish();
            }
            else if (finishType == GuideFinishType.Btns )
            {
                if (canClickButton != null && canClickButton.Count > 0)
                {
                    List<RaycastResult> results = new List<RaycastResult>();
                    EventSystem.current.RaycastAll(eventData, results);

                    for (int i = 0; i < results.Count; i++)
                    {
                        for (int j = 0; j < canClickButton.Count; j++)
                        {
                            if (results[i].gameObject == canClickButton[j].gameObject)
                            {
                                ExecuteEvents.Execute(canClickButton[j].gameObject, eventData, ExecuteEvents.pointerClickHandler);
                                onClickCb?.Invoke();
                            }
                        }
                    }
                }
            }

        }
    }


}

        代码的核心点

        1）需要一个参数，RectTransform outTarget  ，此对象就是镂空区域

        2）ApplyOutMask方法，这里通过获取到 outTarget 的左下角顶点的世界坐标，并将其转为UI的屏幕坐标，在获取到组件的宽高传参给shader

        3）结束类型，这里做了一个枚举 GuideFinishType， 无，指定按钮，任意区域

        4）需要一个可接收点击事件的列表 List<Button> canClickButton，只有这些按钮可以被点击到，其余控件不接受点击事件

        5）OnPointerClick方法，这个需要继承接口类IPointerClickHandler来实现，当被点击的时候就会执行，这里面首先进行了下一步的类型判断 如果是任意区域，则直接结束，如果是指定按钮，则会获取到点击位置的左右可接受点击事件的控件，在于我们可点击按钮比对，一致的话执行按钮的点击方法并结束

        6）提供了一些公开接口供外部调用，就不多说了， 自己看吧

4：测试

        

        先创建一个脚本，把四个按钮的点击事件注册上，可以看到log是可以点击到的

        打开遮罩层，设置好需要的对象，，打开Follow，可以看到上图，遮罩和镂空效果已经生效了，结束类型选择Btns 这样button3和button4就点不到了，另外两个可以正常接收点击事件

        如果需要只镂空一个按钮的位置，把OutTarget设置为按钮就可以了

        这种做法可以适配大部分的UI了，无论OutTarget的描点怎么设置，也不需要关心它的父级位置影响

demo下载地址 【免费】新手引导Demo，屏幕遮黑镂空资源-CSDN文库icon-default.png?t=N7T8https://download.csdn.net/download/qq_37302769/88750670

hozyyy
关注
  • 26
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
UGUI新手引导反向遮罩.unitypackage
07-14
UGUI做的反向遮罩，导入资源资源包即可使用，适应于新手引导及各种场合，有什么需要请在下方留言，更多有趣资源请关注我的博客
UGUI日志输出到屏幕
03-28
Unity UGUI 日志输出到屏幕 兼容所有版本 内含说明文档
Unity | 简单高效的强制新手引导
Valiancer
05-08 2446
游戏中的新手引导可以帮助玩家快速了解游戏规则和操作方式，对于玩家体验来说非常重要实现强制新手引导有很多种方式，这里基于 OnPopulateMesh 方法，相比 Shader、Mask 等方式，该方法通过减少 DrawCall 来提高 UI 渲染性能。
UGUI源码阅读（五）遮罩之Mask
最新发布
qilin598866753的博客
07-10 302
ugui Mask实现原理
[UnityUI]UGUI新手引导
宏哥的博客
03-15 1万+
1.假如ImageA在ImageB前面，且ImageA完全覆盖ImageB，点击两者的重叠部分，ImageA会收到点击事件，而ImageB不会
UGUI新手引导
u010166386的专栏
03-22 464
转载 ：http://blog.csdn.net/lyh916/article/details/50878799 效果图： 对于新手引导，主要分两种做法：需要使用shader的和不需要shader的，这里介绍的是后者 1.屏蔽点击 假如ImageA在ImageB前面，且ImageA完全覆盖ImageB，点击两者的重叠部分，ImageA会收到点击事件，
Unity3D--如何控制UGUI的触摸 使其可以控制穿透UGUI触摸到其它物体
LonelySu
03-14 7364
如何控制UGUI触摸 使可以控制穿透UGUI触摸到其它物体方法1： 其它物体通过 EventSystem.current.currentSelectedGameObject 来进行判断 那么就是UGUI当想穿透的时候，不能有selected触发方法2： 底层加一个Panel 凡是需要穿透的物体，加一个Cancas Group，然后关闭拦截，让其穿透方法3： 根据EventSystem.cu
ugui点击穿透判断
a554671102的博客
08-19 138
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; public class ClickTest : MonoBehaviour { // Use this for initializati...
Unity Shader实现新手引导遮罩镂空效果
08-25
Unity Shader 实现新手引导遮罩镂空效果的知识点总结 本篇文章主要介绍了 Unity Shader 实现新手引导遮罩镂空效果的方法，通过详细的示例代码，展示了如何使用 Unity Shader 实现圆形镂空、椭圆镂空和圆形目标位置...
Unity-UGUI制作的小地图-可放大缩小视角，大地图小地图切换
03-29
本项目“Unity-UGUI制作的小地图-可放大缩小视角，大地图小地图切换”旨在教大家如何利用UGUI组件来构建一个功能齐全的小地图系统，该系统能够支持相机视角的缩放以及在大地图和小地图之间进行切换，为玩家提供更...
【Unity3D】UGUI点击或拖动事件实现穿透效果
qq_42462315的博客
05-28 270
目的：项目中需要增加一个点击特效反馈，并且不影响原本游戏中各类点击或拖动事件。
unity3D 新手引导遮罩，支持圆形和矩形框
06-05
unity3D 新手引导遮罩，支持圆形和矩形框。图形位置和大小可以根据控件的位置和大小调节，通用所有分辨率设备。黑色区域遮挡，只有透明区域可以点穿。
Unity 新手引导
12-06
GuideMaskDemo.GuideMaskDemo. 自定义遮罩位置和大小，点击穿透。
Unity UGUI实现点击事件穿透
Zyt
02-06 1648
如果只传递一层的情况 Button的Text文本 或者Button下面有遮挡物 并且Raycast Target是true的情况它会传递给Text或者 其他遮挡物 而Button 不会收到点击消息 所以如果想要下层百分百生效 最好的情况是 把Button 下面的遮挡物 Raycast Target设置为false 因为如果一直往下传递的话 当前点击的位置无论叠加多少层Button 他都会响应 所以一直往下传递是不可控的情况。代码很简单如下 将此代码挂载到上层节点上即可。
关于UGUI点击穿透场景的问题
zyl766800的博客
08-03 205
之前项目使用NGUI开发，在UGUI里面，可以使用UICamera提供的检测方法来检测是否点击到了NGUI的元素。现在我们使用UGUI开发，而且使用了两种点击输入（inputmouse和射线检测）。针对这种情况，使用unity EventSystem来进行检测UGUI的点击，然后在我们的场景点击输入端进行检测即可。 private bool IsClickUGUI() { if (EventSystem.current != null) ...
UGUI新手引导开发(二、引导用ScriptableObject配置)
鳄鱼泪的博客
05-07 1027
前面讲了学习的别人的新手引导制作方案，然后现在我结合我们项目的新手引导制作方式，加上用ScriptableObject配置引导，稍微个人改动一下。 1.先看最基础的类，引导步骤信息类，我使用了我们项目中的几个枚举。 /// /// 引导类型 /// public enum GUIDE_TYPE { undefined = 0, click = 1, //
UGUI自带Mask实现新手引导简单遮罩(无需shader)
热门推荐
sika的学习理解
04-25 1万+
效果如下：大部分教程都有shader实现遮罩，shader可以控制更好效果的遮罩。unity自带的功能也能实现简单的新手引导遮罩，只是unity自带的遮罩会有锯齿。之后再更新加shader的版本。以下是具体步骤：1、将MainCamera 的背景设为solidcolor.改为黑色。2、添加两张背景，内容一摸一样3、UGUI渲染层级是根据场景层级的顺序，所以排列在前面的图看不到。选中底层的BG_Da...
Unity之引导功能遮罩事件穿透
weixin_44186849的博客
02-10 5397
Unity之新手引导shader遮罩事件穿透 效果图 设计思路 1.新手引导我们期待开发内容不影响正常的功能模块，意思就是分层，新手引导在正常功能之上 2.新手引导层级用一层深色bg显示遮住正常功能层级，在需要引导的位置留出高亮区域 3.在这个新手引导层做事件渗透，给指定的对象或UI做事件渗透，如果点击交互位置处于指定UI或对象范围内，让事件渗透新手引导层，到正常功能层。 场景搭建 搭建两个层级 一个正常功能层级为Canvas下，一个新手引导层级在GuideHolder下。 制作新手引导的预制体 材
Unity UGUI 新手指引
aa20274270的博客
09-21 1780
新手引导制作 : http://blog.csdn.net/ycguhang/article/details/13404511
unity 新手引导 遮罩
08-01
Unity新手引导遮罩是一种常见的界面设计元素，用于引导新手玩家了解游戏界面和操作。它通常被用于高亮显示特定的界面元素，并给予玩家相应的提示。 Unity中提供了一些内置的方法来创建新手引导遮罩。首先，开发人员可以使用UGUI（Unity的用户界面系统）来创建游戏界面，之后可以添加一张透明的图片作为新手引导的遮罩层。然后，可以使用Unity的2D或3D特效来绘制遮罩层所遮挡住的界面元素。这些特效可以使被遮挡的区域变得模糊或是使其颜色变暗，以突出要引导的界面元素。 在引导过程中，可以根据玩家操作的进度来动态地更新遮罩层的位置和形状。例如，当玩家点击一个按钮时，可以使遮罩层逐渐展开，直到完全显示该按钮为止。还可以使用动画效果来增强引导的效果，如淡入淡出或平滑移动的效果。 同时，为了提供更多的交互性，可以为遮罩层添加响应玩家操作的功能。比如，在遮罩层上添加一个按钮，当玩家点击该按钮时，遮罩层可以自动更新到下一个引导步骤，或者直接跳转至其他相关的功能界面。 总之，Unity的新手引导遮罩是一个非常实用的功能，可以帮助开发人员创建出更具吸引力和易于理解的游戏体验。它不仅可以引导玩家了解游戏的操作流程，还可以提供更好的用户体验，使玩家更容易上手游戏。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值