【Unity实战篇 】| 游戏中实现镂空遮罩效果【矩形、圆形镂空遮罩】

最新推荐文章于 2025-03-14 10:07:53 发布
最新推荐文章于 2025-03-14 10:07:53 发布
阅读量1.4w 收藏 15
点赞数 14
分类专栏： Unity 实战100例 教程⭐️ 文章标签： unity 游戏 游戏引擎 镂空遮罩 遮罩镂空 强引导 新手引导
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhangay1998/article/details/131848810
版权
本文介绍了如何在Unity中创建矩形和圆形镂空遮罩效果，作为游戏中的新手引导。通过重写OnPopulateMesh方法绘制图形，并利用ICanvasRaycastFilter接口实现镂空区域的事件穿透，提高了UI性能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

请添加图片描述

在这里插入图片描述

前言

  • 本文来写一下怎样在Unity中完成一个 镂空遮罩 的效果。
  • 镂空遮罩 比较常用的有两种：矩形镂空遮罩、圆形镂空遮罩。
  • 镂空遮罩 在游戏中常被当做新手引导必备的内容，可以给玩家更多不一样的体验。
  • 下面就一起来看一下怎样做出这种效果吧！

【Unity实战篇 】 | 游戏中实现镂空遮罩效果【矩形、圆形镂空遮罩】

一、制作原理

在开始制作镂空遮罩前先来看一下Graphic类的OnPopulateMesh方法，借助OnPopulateMesh方法进行重写就可以在Unity中自由绘制图形。


                

                
                
        

        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
            

        


    


                



	

		

			

				
					
Unity中实现引导的镂空效果

				
			

			

				

					L的博客
				

				

					02-11
					
					6004
					
				

			

		

		

			
				
一：实现思路

创建有8个顶点的Mesh，内外边界都是四边形(矩形)。只生成内、外边之间的Mesh，内层矩形就产生了镂空部分，外层的４个顶点，是组件自身RectTransform的四个顶点，内层的４个顶点，使用镂空目标(_target)RectTransform的四个顶点。确定内层的顶点的时候需要注意，多数情况下_target和HollowOutMask都不在同一个本地坐标空间，所以需要使用C...

			
		

	



                

            
              



	

		

			

				
					
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进阶课程【二】Mask 组件的使用 UI遮罩效果以及透明抠图效果

					
最新发布

				
			

			

				

					weixin_44328367的博客
				

				

					03-14
					
					502
					
				

			

		

		

			
				
本篇内容主要讲Unity组件之Mask简单用法和遇到的一些坑，以及一些平常不注意到的功能。下面让我们出发吧默认组件状态就是酱紫的，我没动任何东西哦，unity版本是2021.3.44f1  开始基础功能介绍，很简单。： 表示显示遮罩图形。

			
		

	





	

		

			

				
					
Unity中实现2D遮罩

				
			

			

				

					L的博客
				

				

					05-05
					
					3620
					
				

			

		

		

			
				
可以使用SpriteMask用作控制图形显示区域，SpriteRenderer用作显示图形，在SpriteRenderer中选择MaskInteraction遮罩类型。

			
		

	



		

			
		



	

		

			

				
					
Unity 遮罩

				
			

			

				

					Lost_the_wind的博客
				

				

					04-10
					
					2240
					
				

			

		

		

			
				
untiy的三张遮罩方式

			
		

	





	

		

			

				
					
Unity UGUI的Mask（遮罩）组件的介绍及使用

				
			

			

				

					alianblank的博客
				

				

					07-10
					
					6308
					
				

			

		

		

			
				
Mask（遮罩）组件是Unity UGUI中的一个重要组件，用于限制子对象的可见区域。通过设置遮罩组件，可以实现一些特殊效果，如显示部分图片、裁剪文本等。

			
		

	





	

		

			

				
					
小功能⭐️Unity遮罩

				
			

			

				

					星河造梦坊
				

				

					09-05
					
					1727
					
				

			

		

		

			
				
Unity遮罩

			
		

	





	

		

			

				
					
unity3D 新手引导遮罩，支持圆形和矩形框

				
			

			

				

					06-05
				

			

		

		

			
				
本教程将探讨如何在Unity3D中实现一个新手引导系统，特别关注于使用遮罩技术来创建圆形和矩形框的引导效果。遮罩功能使得我们可以控制用户交互的区域，只允许用户在特定区域内进行操作，其余部分则被黑色遮挡，提供...

			
		

	





	

		

			

				
					
Unity实现新手引导镂空效果

				
			

			

				

					08-25
				

			

		

		

			
				
Unity实现新手引导镂空效果是指在Unity中实现镂空效果的方法，主要用于实现新手引导的镂空效果，通过创建Mesh和计算相对坐标来实现镂空的效果。同时，通过实现ICanvasRaycastFilter接口，可以控制镂空范围上的事件。...

			
		

	





	

		

			

				
					
Unity游戏开发-头像等圆形遮罩

				
			

			

				

					02-12
				

			

		

		

			
				
在Unity游戏开发中，圆形遮罩是实现各种视觉效果的重要技术之一，尤其是针对用户头像这类图形元素。圆形遮罩能够使得图像在视觉上呈现出圆形的边框，从而突出圆形区域内的内容，这种效果通常用于头像、UI元素、装饰...

			
		

	





	

		

			

				
					
Unity的渲染组件-精灵遮罩

				
			

			

				

					Mr_PEaSutBUtteR的博客
				

				

					05-26
					
					854
					
				

			

		

		

			
				
Alpha只有0 ，1。画面没有透明度变化。Alpha值从A到C依次增大到255；所以这幅画面有透明度的变化，4个值，从背景默认为0（完全透明），到C最大为1，此时Alpha Cutoff起作用。

			
		

	





	

		

			

				
					
Unity关于新手引导中实现遮罩镂空效果

				
			

			

				

					qq_38139885的博客
				

				

					01-17
					
					1563
					
				

			

		

		

			
				
【代码】Unity关于新手引导中实现遮罩镂空效果。

			
		

	





	

		

			

				
					
Unity遮罩概念

				
			

			

				

					weixin_44031002的博客
				

				

					02-02
					
					955
					
				

			

		

		

			
				
值得一提的是，遮罩的使用不仅限于UI元素，也可以通过自定义材质来实现3D物体的遮罩效果，这种方法在某些情况下可能更为简便和灵活。遮罩组件的工作原理是通过一个父对象的形状来限制其子对象的显示范围。：这是用于UI元素的遮罩，它可以使子UI元素只显示在父元素的形状内。例如，如果你有一个矩形的Mask组件，那么它的子元素只会在矩形区域内显示。总的来说，Unity中的遮罩是一种强大的工具，它可以让开发者创造出丰富的视觉效果，同时也提供了一种简单有效的方式来控制复杂UI元素的可见性。

			
		

	





	

		

			

				
					
Unity使用反向遮罩实现镂空shader

				
			

			

				

					Tel17610887670的博客
				

				

					02-01
					
					1067
					
				

			

		

		

			
				
2，使用两张image，遮罩层在父节点，被遮罩层在子节点，然后分别添加材质球与镂空图片。

			
		

	





	

		

			

				
					
unity中的图层遮罩

				
			

			

				

					c3872931的博客
				

				

					09-28
					
					704
					
				

			

		

		

			
				
在Unity中，图层遮罩通常用于限制特定的图层与其他图层之间的交互。这可以帮助你实现一些特定的效果，比如只让光线投射与特定图层的物体相交，或者只让特定图层的物体响应碰撞等等。这些图层也可以与物理射线投射一起使用，以确保物体之间的碰撞只会在指定的图层之间发生。：在渲染和相机方面，你可以使用图层遮罩来确定相机只渲染特定图层的物体，或者只渲染相应图层的物体，这在制作复杂的游戏场景和效果时非常有用。总之，图层遮罩是Unity中一个非常有用的工具，它可以帮助你更好地控制游戏中不同物体之间的交互和渲染行为。

			
		

	





	

		

			

				
					
【UGUI源码分析】Unity遮罩之Mask详细解读

				
			

			

				

					ZhangLei的博客
				

				

					09-08
					
					4955
					
				

			

		

		

			
				
博客园博文链接 https://www.cnblogs.com/iwiniwin/p/15131528.html
遮罩，顾名思义是一种可以掩盖其它元素的控件。常用于修改其它元素的外观，或限制元素的形状。比如ScrollView或者圆头像效果都有用到遮罩功能。本系列文章希望通过阅读UGUI源码的方式，来探究遮罩的实现原理，以及通过Unity不同遮罩之间实现方式的对比，找到每一种遮罩的最佳使用场合。
Unity UGUI主要提供两种遮罩，分别是Mask和Rect Mask 2D。在2D游戏开发中，可能还会用到S

			
		

	





	

		

			

				
					
Unity中实现新手引导的镂空遮罩

				
			

			

				

					TxNet
				

				

					03-29
					
					5594
					
				

			

		

		

			
				
一：实现思路
创建有8个顶点的Mesh，内外边界都是四边形(矩形)。只生成内、外边之间的Mesh，内层矩形就产生了镂空部分，外层的４个顶点，是组件自身RectTransform的四个顶点，内层的４个顶点，使用镂空目标(_target)RectTransform的四个顶点。确定内层的顶点的时候需要注意，多数情况下_target和HollowOutMask都不在同一个本地坐标空间，所以需要使用Cal...

			
		

	





	

		

			

				
					
Unity镂空遮罩shader代码，支持圆形和矩形

				
			

			

				

					09-19
				

			

		

		

			
				
Unity中实现镂空遮罩Shader通常会涉及到Alpha Blending（透明混合）和Masking（掩模）。下面是一个简单的示例，展示如何创建一个基本的镂空遮罩Shader，可以处理圆形和矩形形状。假设我们已经有了一个基础的Sprite Renderer组件，我们将创建一个名为`UIMaskedShader`的Shader：

```glsl
Shader "Custom/UIMaskedShader" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
        _Color ("Color", Color) = (1,1,1,1)
        _MaskTex ("Mask Texture", 2D) = "white" {}
    }

    SubShader {
        Tags { "Queue"="Transparent" "RenderType"="Opaque" }
        LOD 100

        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct appdata {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            sampler2D _MaskTex;
            fixed4 _Color;

            v2f vert (appdata v) {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target {
                fixed4 col = tex2D(_MainTex, i.uv);
                fixed4 mask = tex2D(_MaskTex, i.uv);
                
                // Alpha blending using the mask texture as a threshold
                col.a *= step(mask.r, 0.5); // For circular masks (0.5 alpha value)
                // Adjust for rectangular masks if needed (mask.r would be different)

                return lerp(col, fixed4(0,0,0,0), col.a) * _Color; // Blend with transparent color when alpha is low
            }
            ENDCG
        }
    }
    FallBack "Diffuse"
}

// To use for a circular mask:
void DrawMesh(....., Material mat, int iVert, int iNumVertices, int iStartIndex, int iNumIndices) {
    mat.SetTexture("_MaskTex", yourCircularMaskTexture);
    .....
}

// For a rectangular mask:
void DrawMesh(....., Material mat, int iVert, int iNumVertices, int iStartIndex, int iNumIndices) {
    mat.SetTexture("_MaskTex", yourRectangularMaskTexture);
    .....
}
```

在这个例子中，你需要提供两个纹理贴图，一个是主颜色纹理 `_MainTex`，另一个是镂空掩码纹理 `_MaskTex`。`step`函数用于圆形遮罩，当像素值低于0.5（对于256色深度的图像，0.5对应半透明）时，将其alpha值设为0，达到镂空效果。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 10

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
呆呆敲代码的小Y

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值