Unity 新手引导 遮罩效果

最新推荐文章于 2024-06-23 17:08:50 发布
最新推荐文章于 2024-06-23 17:08:50 发布
阅读量2.7k 收藏 18
点赞数 2
分类专栏： Unity 文章标签： unity3d shader ugui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li1214661543/article/details/112789372
版权

效果如图所示:固定大小模式，边缘大小可以调节

效果如图所示:动画缩放模式，边缘大小可以调节

结构如图所示：

资源下载

  1. 在UGUI中创建一个Image，颜色设置为黑色，调整透明度

  2. 在Image上添加脚本<Test> <GuideController> <RectGuide> <CircleGuide>

Test：测试脚本，用于调用类

using UnityEngine;

public class Test : MonoBehaviour
{
    GuideController guideController;
    Canvas canvas;
    public GameObject game;

    private void Start()
    {
        canvas = transform.GetComponentInParent<Canvas>();
        guideController = transform.GetComponent<GuideController>();

        guideController.Guide(canvas, game.GetComponent<RectTransform>(), GuideType.Circle, 10, 1f);
//画布，物体，形状（圆形、矩形），起势边距，时间
    }

    private void Update()
    {
        //guideController.Guide(canvas, game.GetComponent<RectTransform>(), GuideType.Circle);
//画布，物体，形状（圆形、矩形）

    }

}

GuideController：总控制脚本

using UnityEngine;
using UnityEngine.UI;

public enum GuideType
{
    Rect,//矩形
    Circle,//圆形
}

[RequireComponent(typeof(CircleGuide))]
[RequireComponent(typeof(RectGuide))]
public class GuideController : MonoBehaviour,ICanvasRaycastFilter
{
    private CircleGuide circleGuide;
    private RectGuide rectGuide;

    public Material rectMat;
    public Material circleMat;
    private Image mask;
    private RectTransform target;
    private void Awake()
    {
        mask = transform.GetComponent<Image>();
        if (mask == null) { throw new System.Exception("mask初始化失败"); }
        if (rectMat == null || circleMat == null) { throw new System.Exception("材质未赋值"); }
        rectGuide = transform.GetComponent<RectGuide>();
        circleGuide = transform.GetComponent<CircleGuide>();
    }

    public void Guide(Canvas canvas,RectTransform target,GuideType guideType)
    {
        this.target = target;
        switch (guideType)
        {
            case GuideType.Rect:
                mask.material = rectMat;
                rectGuide.Guide(canvas, target);
                break;
            case GuideType.Circle:
                mask.material = circleMat;
                circleGuide.Guide(canvas, target);
                break;

        }
    }

    public void Guide(Canvas canvas, RectTransform target, GuideType guideType,float scale,float time)
    {
        this.target = target;
        switch (guideType)
        {
            case GuideType.Rect:
                mask.material = rectMat;
                rectGuide.Guide(canvas, target, scale,time);
                break;
            case GuideType.Circle:
                mask.material = circleMat;
                circleGuide.Guide(canvas, target, scale, time);
                break;

        }
    }

    public bool IsRaycastLocationValid(Vector2 sp, Camera eventCamera)
    {
        if (target==null) { return true; }
        return !RectTransformUtility.RectangleContainsScreenPoint(target, sp);
    }
}

RectGuide：矩形控制脚本

using UnityEngine;

public class RectGuide : GuideBase
{
    protected float width;
    protected float height;

    float scalewidth;
    float scaleheight;

    public float widths, heights;//设置宽高 余量
    public override void Guide(Canvas canvas, RectTransform target)
    {
        base.Guide(canvas, target);
        //计算宽高
        width = (targetCorners[3].x - targetCorners[0].x) / 2;
        height = (targetCorners[1].y - targetCorners[0].y) / 2;
        material.SetFloat("_SliderX", width + widths);
        material.SetFloat("_SliderY", height + heights);
    }

    public override void Guide(Canvas canvas, RectTransform target, float scale, float time)
    {
        this.Guide(canvas, target);

        scalewidth = width * scale;
        scaleheight = height * scale;
        material.SetFloat("_SliderX", scalewidth);
        material.SetFloat("_SliderY", scaleheight);

        this.time = time;
        isScaling = true;
        timer = 0;

    }

    protected override void Update()
    {
        base.Update();
        if (isScaling)
        {
            this.material.SetFloat("_SliderX", Mathf.Lerp(scalewidth, width, timer));
            this.material.SetFloat("_SliderY", Mathf.Lerp(scaleheight, height, timer));
        }
    }
}

CircleGuide：圆形控制脚本

using UnityEngine;

public class CircleGuide : GuideBase
{
    private float r;//镂空半径
    private float scaleR;//变化之后的半径大小

    public float radius;//半径 余量


    public override void Guide(Canvas canvas, RectTransform target)
    {
        base.Guide(canvas, target);
        //计算半径
        float width = (targetCorners[3].x - targetCorners[0].x) / 2;
        float height = (targetCorners[1].y - targetCorners[0].y) / 2;
        r = Mathf.Sqrt(width * width + height * height);
        this.material.SetFloat("_Slider", r + radius);
    }

    public override void Guide(Canvas canvas, RectTransform target, float scale, float time)
    {
        this.Guide(canvas, target);
        scaleR = r * scale;
        this.material.SetFloat("_Slider", scaleR);

        this.time = time;
        isScaling = true;
        timer = 0;
    }

    protected override void Update()
    {
        base.Update();
        if (isScaling)
        {
            this.material.SetFloat("_Slider", Mathf.Lerp(scaleR, r, timer));
        }
    }

}

using UnityEngine;
using UnityEngine.UI;

[RequireComponent(typeof(Image))]
public class GuideBase : MonoBehaviour
{
    protected Material material;//材质
    protected Vector3 center;//镂空中心
    protected RectTransform target;
    protected Vector3[] targetCorners = new Vector3[4];//引导目标的边界

    protected float timer;
    protected float time;
    protected bool isScaling;

    protected virtual void Update()
    {
        if (isScaling)
        {
            timer += Time.deltaTime * 1 / time;
            if (timer >= 1)
            {
                timer = 0;
                isScaling = false;
            }
        }
    }

    public virtual void Guide(Canvas canvas, RectTransform target)
    {
        material = GetComponent<Image>().material;
        this.target = target;
        //获取四个点的世界坐标
        target.GetWorldCorners(targetCorners);
        //世界坐标转屏幕坐标
        for (int i = 0; i < targetCorners.Length; i++)
        {
            targetCorners[i] = WorldToScreenPoints(canvas, targetCorners[i]);
        }
        //计算中心点
        center.x = targetCorners[0].x + (targetCorners[3].x - targetCorners[0].x) / 2;
        center.y = targetCorners[0].y + (targetCorners[1].y - targetCorners[0].y) / 2;
        //设置中心点
        material.SetVector("_Center", center);
    }

    public virtual void Guide(Canvas canvas, RectTransform target,float scale,float time)
    {

    }

    public Vector2 WorldToScreenPoints(Canvas canvas, Vector3 world)
    {
        //把世界转屏幕
        Vector2 screenPoint = RectTransformUtility.WorldToScreenPoint(canvas.worldCamera, world);
        Vector2 localPoint;
        //屏幕转局部坐标
        RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas.GetComponent<RectTransform>(), screenPoint, canvas.worldCamera, out localPoint);
        return localPoint;
    }
}

shader脚本：

Shader "UI/CircleGuide"
{
    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
        _Center("Center",vector) = (0,0,0,0)
        _Slider("Slider",Range(0,2500)) = 2500
    }

        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_CLIP_RECT
                #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
                };

                sampler2D _MainTex;
                fixed4 _Color;
                fixed4 _TextureSampleAdd;
                float4 _ClipRect;
                float4 _MainTex_ST;
                float2 _Center;
                float _Slider;

                v2f vert(appdata_t v)
                {
                    v2f OUT;
                    UNITY_SETUP_INSTANCE_ID(v);
                    UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
                    OUT.worldPosition = v.vertex;
                    OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);

                    OUT.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);

                    OUT.color = v.color * _Color;
                    return OUT;
                }

                fixed4 frag(v2f IN) : SV_Target
                {
                    half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;

                    #ifdef UNITY_UI_CLIP_RECT
                    color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
                    #endif

                    #ifdef UNITY_UI_ALPHACLIP
                    clip(color.a - 0.001);
                    #endif
                    color.a *= (distance(IN.worldPosition.xy,_Center.xy) > _Slider);
                    color.rgb *= color.a;

                    return color;
                }
            ENDCG
            }
        }
}
Shader "UI/RectGuide"
{
    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

        _Center("Center",vector) = (0,0,0,0)
        _SliderX("SliderX",Range(0,1500)) = 1500
        _SliderY("SliderY",Range(0,1500)) = 1500
    }

        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_CLIP_RECT
                #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
                };

                sampler2D _MainTex;
                fixed4 _Color;
                fixed4 _TextureSampleAdd;
                float4 _ClipRect;
                float4 _MainTex_ST;

                float2 _Center;
                float _SliderX;
                float _SliderY;

                v2f vert(appdata_t v)
                {
                    v2f OUT;
                    UNITY_SETUP_INSTANCE_ID(v);
                    UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
                    OUT.worldPosition = v.vertex;
                    OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);

                    OUT.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);

                    OUT.color = v.color * _Color;
                    return OUT;
                }

                fixed4 frag(v2f IN) : SV_Target
                {
                    half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;

                    #ifdef UNITY_UI_CLIP_RECT
                    color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
                    #endif

                    #ifdef UNITY_UI_ALPHACLIP
                    clip(color.a - 0.001);
                    #endif
                    float2 dis = IN.worldPosition.xy - _Center.xy;
                    color.a *= (abs(dis.x) > _SliderX) || (abs(dis.y) > _SliderY);
                    color.rgb *= color.a;

                    return color;
                }
            ENDCG
            }
        }
}

资源下载

如有疑问 可以再评论区留言

Liam_Lsc
关注
  • 2
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
[Unity]新手指引遮罩实现
BuladeMian的博客，菜得抠脚，菜得真实
07-15 1348
两种实现方法 1.通过新建一个不同层级Sorting的UICanvas黑色遮罩的Plane和Button来复制目标按钮的功能 2.通过新建一个不同层级Sorting的UICanvas和4个不同的黑色遮罩的Plane把目标按钮围起来 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public cla...
Unity新手引导相关遮罩处理
u012400693的博客
11-30 4743
项目中需要添加新手引导的强制引导遮罩。 之前通过实现UnityEngine.ICanvasRaycastFilter这个接口 并且实现方法public bool IsRaycastLocationValid(Vector2 sp, Camera eventCamera) { //返回当前鼠标出发的区域是否在这个对应目标里面 return !Rect
unity3D 新手引导遮罩，支持圆形和矩形框
06-05
unity3D 新手引导遮罩，支持圆形和矩形框。图形位置和大小可以根据控件的位置和大小调节，通用所有分辨率设备。黑色区域遮挡，只有透明区域可以点穿。
新手引导遮罩挖孔 圆形和方形
m0_73817060的博客
04-08 487
/ 如果在挖孔内，则设置为透明或其他颜色。// 检查当前片元是否在挖孔矩形内。新手引导中，有时候需要挖孔遮罩。有时候需求是圆形挖孔，有时候需求是方形挖孔。// 计算挖孔矩形的UV坐标。由于shader 坐标原点 和UGUI坐标原点不一致，然后进行了调整。
Unity UGUI的Mask（遮罩）组件的介绍及使用
最新发布
Oona_01的博客
06-23 638
Mask组件通过将子对象与遮罩对象进行比较，只显示与遮罩对象重叠的部分，从而实现遮罩效果。Mask Interaction：遮罩对象的交互方式，可选择None、Visible Inside Mask和Visible Outside Mask。创建一个RawImage对象作为子对象，设置其图片为需要显示的图片。创建一个RawImage对象作为子对象，设置其图片为需要显示的图片。创建一个RawImage对象作为子对象，设置其图片为需要显示的图片。创建一个Image对象作为遮罩对象，设置其形状为圆形。
Unity3D Shader 引导遮罩,支持圆形、矩形、圆角矩形框
weixin_44802051的博客
02-07 2464
unity3D新手引导遮罩，支持圆形,矩形框,圆角矩形框。图形位置和大小可以根据控件的位置和大小调节，通用所有分辨率设备。黄色区域遮挡，只有白色区域可以点穿。
Unity之引导功能遮罩事件穿透
weixin_44186849的博客
02-10 5254
Unity之新手引导shader遮罩事件穿透 效果图 设计思路 1.新手引导我们期待开发内容不影响正常的功能模块，意思就是分层，新手引导在正常功能之上 2.新手引导层级用一层深色bg显示遮住正常功能层级，在需要引导的位置留出高亮区域 3.在这个新手引导层做事件渗透，给指定的对象或UI做事件渗透，如果点击交互位置处于指定UI或对象范围内，让事件渗透新手引导层，到正常功能层。 场景搭建 搭建两个层级 一个正常功能层级为Canvas下，一个新手引导层级在GuideHolder下。 制作新手引导的预制体 材
Unity关于新手引导中实现遮罩镂空效果
qq_38139885的博客
01-17 1063
【代码】Unity关于新手引导中实现遮罩镂空效果。
【Unity】新手引导遮罩
RICKShaozhiheng的专栏
06-01 6957
可参考这里UGUI 新手引导遮罩控件解释一下思路： public bool IsRaycastLocationValid(Vector2 sp, Camera eventCamera) { // 点击在箭头框内部则无效，否则生效 return !RectTransformUtility.RectangleContainsScreenPoint(arrow, sp, eventC
Unity中实现新手引导的镂空效果
qq_32587659的博客
09-16 728
using UnityEngine; using UnityEngine.UI; /// <summary> /// 实现镂空效果的Mask组件 /// </summary> public class HollowOutMask : MaskableGraphic, ICanvasRaycastFilter { [SerializeField] private RectTransform _target; private Vector3 _targe.
Unity 光圈遮罩聚焦ui引导
07-08
在Unity中，我们可以使用Canvas Renderer组件配合Mask组件来创建遮罩效果。Mask组件可以对Canvas上的子对象进行裁剪，只显示在遮罩内的部分。这允许我们创建各种形状的遮罩，如圆形、方形或者自定义的形状，来达到...
Unity Shader实现新手引导遮罩镂空效果
12-20
这两天实现了下新手引导需要的遮罩镂空shader效果，记录一下。 1、圆形镂空shader代码：     //计算片元世界坐标和目标中心位置的距离 float dis = distance(IN.worldPosition.xy, _Center.xy); //过滤掉距离小于（半径-过渡范围）的片元 clip(dis - (_Radius - _TransitionRange)); //优化if条件判断，如果距离小于半径则执行下一步，等于if(dis < _Radius) fixed tmp = step(dis, _Radius); //计算过渡范围内的alpha值 color.a *=
Unity 实现新手引导遮罩
04-30
Unity 实现新手引导遮罩
Unity中实现新手引导的镂空遮罩
TxNet
03-29 5252
一：实现思路 创建有8个顶点的Mesh，内外边界都是四边形(矩形)。只生成内、外边之间的Mesh，内层矩形就产生了镂空部分，外层的４个顶点，是组件自身RectTransform的四个顶点，内层的４个顶点，使用镂空目标(_target)RectTransform的四个顶点。确定内层的顶点的时候需要注意，多数情况下_target和HollowOutMask都不在同一个本地坐标空间，所以需要使用Cal...
Unity UI Unmask 新手引导适用（新手项，有示例工程，不写代码/shader，帮助理解）
weixin_40695640的博客
08-27 296
Unity UI Unmask 新手引导适用（新手项，有示例工程，不写代码/shader，帮助理解）
新手引导遮罩（学习笔记）
hsm19990531的博客
07-15 383
本文仅当学习笔记留存。
unity基础学习十九，引导模块的设计
u013617851的博客
05-23 2247
1.什么是XXX 2.为什么要有XXX 3.如何使用XXX，使用XXX的不同方案比较 4.源码实现 5.如何设计 6.关键点，重要节点，疑难杂症场景
Unity功能开发 新手引导
m0_72857966的博客
08-23 941
1、创建一个Image命名为guide_mask然后添加Guide脚本。配置完成后 启动看效果就行了 (tips)左上角会有测试按钮。2、把Image的颜色设置为黑色,Alpha透明度拉半就OK。
unity-新手引导
.
09-21 6280
关于 unity 项目的新手引导制作 比较老的新手引导的做法是上下左右四个遮罩组合，把需要 点击 的地方镂空出来。 这里的做法是顶层用一个遮罩全部遮挡住，遮罩上用个 Button 接收点击事件，然后后把事件传递给 目标控件效果图 预制件 逻辑代码（都是lua），完整版--===========================================================
unity 新手引导 遮罩
08-01
Unity新手引导遮罩是一种常见的界面设计元素，用于引导新手玩家了解游戏界面和操作。它通常被用于高亮显示特定的界面元素，并给予玩家相应的提示。 Unity中提供了一些内置的方法来创建新手引导遮罩。首先，开发人员可以使用UGUI（Unity的用户界面系统）来创建游戏界面，之后可以添加一张透明的图片作为新手引导的遮罩层。然后，可以使用Unity的2D或3D特效来绘制遮罩层所遮挡住的界面元素。这些特效可以使被遮挡的区域变得模糊或是使其颜色变暗，以突出要引导的界面元素。 在引导过程中，可以根据玩家操作的进度来动态地更新遮罩层的位置和形状。例如，当玩家点击一个按钮时，可以使遮罩层逐渐展开，直到完全显示该按钮为止。还可以使用动画效果来增强引导的效果，如淡入淡出或平滑移动的效果。 同时，为了提供更多的交互性，可以为遮罩层添加响应玩家操作的功能。比如，在遮罩层上添加一个按钮，当玩家点击该按钮时，遮罩层可以自动更新到下一个引导步骤，或者直接跳转至其他相关的功能界面。 总之，Unity的新手引导遮罩是一个非常实用的功能，可以帮助开发人员创建出更具吸引力和易于理解的游戏体验。它不仅可以引导玩家了解游戏的操作流程，还可以提供更好的用户体验，使玩家更容易上手游戏。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值