Unity UGUI的Mask(遮罩)组件的介绍及使用
Unity UGUI的Mask(遮罩)组件的介绍及使用
1. 什么是Mask组件?
Mask(遮罩)组件是Unity UGUI中的一个重要组件,用于限制子对象的可见区域。通过设置遮罩组件,可以实现一些特殊效果,如显示部分图片、裁剪文本等。
2. Mask组件的工作原理
Mask组件通过将子对象与遮罩对象进行比较,只显示与遮罩对象重叠的部分,从而实现遮罩效果。遮罩对象可以是任意形状的UI元素,如Image、RawImage等。
3. Mask组件的常用属性
- Show Mask Graphic:是否显示遮罩对象的图形。
- Mask Interaction:遮罩对象的交互方式,可选择None、Visible Inside Mask和Visible Outside Mask。
- Alpha Cutoff:遮罩对象的透明度阈值,用于控制遮罩的显示范围。
4. Mask组件的常用函数
- IsRaycastLocationValid:判断指定位置是否在遮罩范围内。
- GetModifiedMaterial:获取经过遮罩处理后的材质。
5. 示例代码
示例1:显示部分图片
using UnityEngine;
using UnityEngine.UI;
public class ImageMaskExample : MonoBehaviour
{
public Image mask;
public RawImage image;
void Start()
{
mask.sprite = Resources.Load<Sprite>("MaskImage");
image.texture = Resources.Load<Texture>("Image");
image.transform.SetParent(mask.transform);
mask.GetComponent<Mask>().showMaskGraphic = false;
}
}
操作步骤:
- 创建一个Image对象作为遮罩对象,设置其形状为圆形。
- 创建一个RawImage对象作为子对象,设置其图片为需要显示的图片。
- 将遮罩对象和子对象添加到Canvas中。
- 将子对象的父对象设置为遮罩对象。
- 设置Mask组件的Show Mask Graphic属性为false。
示例2:裁剪文本
using UnityEngine;
using UnityEngine.UI;
public class TextMaskExample : MonoBehaviour
{
public Text mask;
public Text text;
void Start()
{
mask.text = "Mask Text";
text.text = "Hello World";
text.transform.SetParent(mask.transform);
mask.GetComponent<Mask>().showMaskGraphic = false;
}
}
操作步骤:
- 创建一个Text对象作为遮罩对象,设置其文本内容。
- 创建一个Text对象作为子对象,设置其文本内容。
- 将遮罩对象和子对象添加到Canvas中。
- 将子对象的父对象设置为遮罩对象。
- 设置Mask组件的Show Mask Graphic属性为false。
示例3:动态遮罩
using UnityEngine;
using UnityEngine.UI;
public class DynamicMaskExample : MonoBehaviour
{
public Image mask;
public RawImage image;
void Start()
{
mask.sprite = Resources.Load<Sprite>("MaskImage");
image.texture = Resources.Load<Texture>("Image");
image.transform.SetParent(mask.transform);
mask.GetComponent<Mask>().showMaskGraphic = false;
// 动态修改遮罩对象的形状
mask.rectTransform.sizeDelta = new Vector2(200, 200);
}
}
操作步骤:
- 创建一个Image对象作为遮罩对象,设置其形状为矩形。
- 创建一个RawImage对象作为子对象,设置其图片为需要显示的图片。
- 将遮罩对象和子对象添加到Canvas中。
- 将子对象的父对象设置为遮罩对象。
- 在代码中动态修改遮罩对象的形状。
示例4:遮罩交互
using UnityEngine;
using UnityEngine.UI;
public class InteractionMaskExample : MonoBehaviour
{
public Image mask;
public RawImage image;
void Start()
{
mask.sprite = Resources.Load<Sprite>("MaskImage");
image.texture = Resources.Load<Texture>("Image");
image.transform.SetParent(mask.transform);
mask.GetComponent<Mask>().showMaskGraphic = false;
mask.GetComponent<Mask>().maskInteraction = MaskInteraction.VisibleInsideMask;
}
}
操作步骤:
- 创建一个Image对象作为遮罩对象,设置其形状为圆形。
- 创建一个RawImage对象作为子对象,设置其图片为需要显示的图片。
- 将遮罩对象和子对象添加到Canvas中。
- 将子对象的父对象设置为遮罩对象。
- 设置Mask组件的Mask Interaction属性为Visible Inside Mask。
示例5:透明度阈值
using UnityEngine;
using UnityEngine.UI;
public class AlphaCutoffMaskExample : MonoBehaviour
{
public Image mask;
public RawImage image;
void Start()
{
mask.sprite = Resources.Load<Sprite>("MaskImage");
image.texture = Resources.Load<Texture>("Image");
image.transform.SetParent(mask.transform);
mask.GetComponent<Mask>().showMaskGraphic = false;
mask.GetComponent<Mask>().alphaCutoff = 0.5f;
}
}
操作步骤:
- 创建一个Image对象作为遮罩对象,设置其形状为矩形。
- 创建一个RawImage对象作为子对象,设置其图片为需要显示的图片。
- 将遮罩对象和子对象添加到Canvas中。
- 将子对象的父对象设置为遮罩对象。
- 设置Mask组件的Alpha Cutoff属性为0.5。
6. 注意事项
- 遮罩对象和子对象需要添加到同一个Canvas中。
- 子对象的父对象必须设置为遮罩对象。
- 遮罩对象的形状可以通过修改RectTransform的sizeDelta属性来调整。
- 遮罩对象的形状可以是任意形状的UI元素,如Image、RawImage等。
7. 参考资料
- Unity官方文档:Mask
- Unity官方论坛:UGUI Mask组件使用教程
Unity UGUI的Mask(遮罩)组件的介绍及使用的更多相关文章
- Unity UGUI Layout自动排版组件用法介绍
Unity UGUI布局组件 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享 ...
- Unity UGUI
超详细的基础教程传送门:(持续更新中) Unity UGUI之Canvas&EventSystem:http://blog.csdn.net/qq992817263/article/detai ...
- 关于 Unity UGUI 中修改 Mask 组件下 Image 等子节点组件的材质无效的问题
前几天同事做了一个效果,希望在原本使用了遮罩组件 Mask 的技能图标(让技能图标变成圆形)上在添加一个置灰的功能,但问题来了:因为是动态根据游戏中玩家的条件才动态置灰,以修改 Mask 下子节点 I ...
- 画地为Mask,随心所欲的高效遮罩组件[Unity]
在上一篇博文"扔掉遮罩,更好的圆形Image组件"中,笔者改变Image的顶点数据,使得Image呈圆形显示,避免了Mask的使用,从而节省Drawcall消耗,提高渲染效率了.这 ...
- vux 中popup 组件 Mask 遮罩在最上层问题的解决
1. 问题描述:popup弹出层在遮罩层下面的 2.原因:因为滚动元素和mask遮罩层在同一级,vux框架默认把遮罩层放在body标签下的 3.解决方法:更改一下源码,把mask遮罩层放在popup同 ...
- vue----子组件引用vux popup mask遮罩在最上层解决办法 z-index问题
在一个页面的子组件中引用vux的popup组件时,出现mask遮罩在最上层的问题,百度了一下发现有两种解决办法,现提供第三种. popup在子组件引用时,vux将vux-popup-mask默认添加到 ...
- Unity UGUI —— 无限循环List
还记得大学毕业刚工作的时候是做flash的开发,那时候看到别人写的各种各样的UI组件就非常佩服,后来自己也慢慢尝试着写,发现其实也就那么回事.UI的开发其实技术的成分相对来说不算多,但是一个好的UI是 ...
- [Unity UGUI]ScrollRect效果大全
UGUI各种优化效果 本文所实现的UGUI效果需求如下: - 支持缩放滑动效果 - 支持动态缩放循环加载 - 支持大数据固定Item复用加载 - 支持不用Mask遮罩无限循环加载 - 支持Object ...
- Unity UGUI图文混排源码(三) -- 动态表情
这里是根据图文混排源码(二)进一步修改的,其他链接也不贴了,就贴一个链接就好了,第一次看这文章的同学可以先去看看其他几篇文章 Unity UGUI图文混排源码(二):http://blog.csdn. ...
- Unity UGUI图文混排源码(二)
Unity UGUI图文混排源码(一):http://blog.csdn.net/qq992817263/article/details/51112304 Unity UGUI图文混排源码(二):ht ...
随机推荐
- Semantic Kernel 入门系列:🥑突破提示词的限制
无尽的上下文 LLM的语言理解和掌握能力在知识内容的解读和总结方面提供了强大的能力. 但是由于训练数据本身来自于公共领域,也就注定了无法在一些小众或者私有的领域能够足够的好的应答. 因此如何给LLM ...
- 【Spring注解驱动】(一)IOC容器
前言 课程跟的是尚硅谷雷丰阳老师的<Spring注解驱动教程>,主要用于SSM框架向SpringBoot过渡,暑假有点懒散,争取这周看完. 1 容器 Spring的底层核心功能是IOC控制 ...
- Prometheus-Operator使用ServiceMonitor监控配置时遇坑与解决总结
摘要 本文范围: Prometheus-Operator & kube-prometheus 安装:以及在解决使用ServiceMonitor时遇到的坑. Prometheus Operato ...
- 数据结构与算法大作业:走迷宫程序(C语言,DFS)(代码以及思路)
好家伙,写大作业,本篇为代码的思路讲解 1.大作业要求 走迷宫程序 问题描述: 以一个 m * n 的长方阵表示迷宫, 0和1分别表示迷宫的通路和障碍. 设计一个程序, 对任意设定的迷宫, 求出一 ...
- SqliLabs 第二关 ,数字型注入!!!
首先打开网页,进行注入点的测试 输入?id=1 and 1=1发现1=2的时候出现了报错,说明服务器接收了我们的指令,并且进行了反馈,说明了有注入点的存在,然后对注入点进行测试 然后输入order b ...
- 2023-04-23:给定你一个整数数组 nums 我们要将 nums 数组中的每个元素移动到 A 集合 或者 B 集合中 使得 A 集合和 B 集合不为空,并且 average(A) == aver
2023-04-23:给定你一个整数数组 nums 我们要将 nums 数组中的每个元素移动到 A 集合 或者 B 集合中 使得 A 集合和 B 集合不为空,并且 average(A) == aver ...
- 2021-04-02:给定一个正方形或者长方形矩阵matrix,实现zigzag打印。[[0,1,2],[3,4,5],[6,7,8]]的打印顺序是0,1,3,6,4,2,5,7,8。
2021-04-02:给定一个正方形或者长方形矩阵matrix,实现zigzag打印.[[0,1,2],[3,4,5],[6,7,8]]的打印顺序是0,1,3,6,4,2,5,7,8. 福大大 答案2 ...
- pages.json 文件:globalStyle 全局配置
globalStyle 用于设置应用的状态栏.导航条.标题.窗口背景色等. 属性 类型 默认值 描述 平台差异说明 navigationBarBackgroundColor HexColor #F7F ...
- 巧用OpenSSH进行域内权限维持
最近在Windows服务器上安装OpenSSH,意外发现了一个很有意思的技巧,可用来做域内权限维持,废话不多说,直接上步骤. 01.利用方式 (1)在已经获得权限的Windows服务器上,使用msie ...
- Python基础 - 赋值运算符
以下假设变量a为10,变量b为20: 运算符 描述 实例 = 简单的赋值运算符 c = a + b 将 a + b 的运算结果赋值为 c += 加法赋值运算符 c += a 等效于 c = c + a ...