Unity UGUI的RectMask2D(2D遮罩)组件的介绍及使用

1. 什么是RectMask2D组件?

RectMask2D是Unity UGUI中的一个组件,用于实现2D遮罩效果。它可以限制子对象在指定的矩形区域内显示,超出区域的部分将被遮罩隐藏。

2. RectMask2D的工作原理

RectMask2D组件通过裁剪子对象的渲染区域来实现遮罩效果。它使用一个矩形区域作为遮罩范围,只有在该范围内的子对象才会被显示出来。

3. RectMask2D的常用属性

  • Show Mask Graphic: 是否显示遮罩的图形,可以用于调试遮罩范围。
  • Softness: 遮罩边缘的柔化程度,值越大边缘越柔化。
  • Padding: 遮罩范围与子对象之间的边距。

4. RectMask2D的常用函数

  • PerformClipping(): 执行裁剪操作,将子对象的渲染区域限制在遮罩范围内。

5. 完整例子代码

例子1:基本使用

using UnityEngine;
using UnityEngine.UI; public class Example : MonoBehaviour
{
public RectMask2D rectMask; private void Start()
{
rectMask.enabled = true;
}
}

操作步骤

  1. 创建一个空物体,并添加RectMask2D组件。
  2. 将需要被遮罩的子对象作为该物体的子对象。
  3. 将RectMask2D组件拖拽到Example脚本的rectMask变量上。
  4. 运行游戏,子对象将只在遮罩范围内显示。

例子2:动态调整遮罩范围

using UnityEngine;
using UnityEngine.UI; public class Example : MonoBehaviour
{
public RectMask2D rectMask;
public RectTransform maskRect; private void Update()
{
rectMask.rectTransform.sizeDelta = maskRect.sizeDelta;
}
}

操作步骤

  1. 创建一个空物体,并添加RectMask2D组件。
  2. 将需要被遮罩的子对象作为该物体的子对象。
  3. 创建一个UI元素,作为遮罩范围的参考。
  4. 将RectMask2D组件拖拽到Example脚本的rectMask变量上。
  5. 将遮罩范围的RectTransform组件拖拽到Example脚本的maskRect变量上。
  6. 运行游戏,遮罩范围将根据参考元素的大小动态调整。

例子3:遮罩范围内的交互

using UnityEngine;
using UnityEngine.UI; public class Example : MonoBehaviour
{
public RectMask2D rectMask;
public Button button; private void Start()
{
button.onClick.AddListener(OnButtonClick);
} private void OnButtonClick()
{
Debug.Log("Button Clicked!");
}
}

操作步骤

  1. 创建一个空物体,并添加RectMask2D组件。
  2. 将需要被遮罩的子对象作为该物体的子对象。
  3. 创建一个Button,并将其作为子对象。
  4. 将RectMask2D组件拖拽到Example脚本的rectMask变量上。
  5. 将Button组件拖拽到Example脚本的button变量上。
  6. 在OnButtonClick函数中添加自定义的交互逻辑。
  7. 运行游戏,只有在遮罩范围内点击按钮才会触发交互。

例子4:遮罩范围内的滚动视图

using UnityEngine;
using UnityEngine.UI; public class Example : MonoBehaviour
{
public RectMask2D rectMask;
public ScrollRect scrollRect; private void Start()
{
scrollRect.enabled = true;
}
}

操作步骤

  1. 创建一个空物体,并添加RectMask2D组件。
  2. 将需要被遮罩的子对象作为该物体的子对象。
  3. 创建一个ScrollRect,并将其作为子对象。
  4. 将RectMask2D组件拖拽到Example脚本的rectMask变量上。
  5. 将ScrollRect组件拖拽到Example脚本的scrollRect变量上。
  6. 运行游戏,可以在遮罩范围内滚动视图。

例子5:遮罩范围内的动画效果

using UnityEngine;
using UnityEngine.UI; public class Example : MonoBehaviour
{
public RectMask2D rectMask;
public Animator animator; private void Start()
{
animator.enabled = true;
}
}

操作步骤

  1. 创建一个空物体,并添加RectMask2D组件。
  2. 将需要被遮罩的子对象作为该物体的子对象。
  3. 创建一个Animator,并将其作为子对象。
  4. 将RectMask2D组件拖拽到Example脚本的rectMask变量上。
  5. 将Animator组件拖拽到Example脚本的animator变量上。
  6. 创建动画效果并在遮罩范围内播放。

注意事项

  • RectMask2D组件只能作用于UGUI的子对象。
  • 遮罩范围的大小和位置可以通过RectTransform组件进行调整。
  • 遮罩范围的形状可以通过修改遮罩物体的形状来实现。

参考资料

Unity UGUI的RectMask2D(2D遮罩)组件的介绍及使用的更多相关文章

  1. 关于 Unity UGUI 中修改 Mask 组件下 Image 等子节点组件的材质无效的问题

    前几天同事做了一个效果,希望在原本使用了遮罩组件 Mask 的技能图标(让技能图标变成圆形)上在添加一个置灰的功能,但问题来了:因为是动态根据游戏中玩家的条件才动态置灰,以修改 Mask 下子节点 I ...

  2. Unity UGUI Layout自动排版组件用法介绍

    Unity UGUI布局组件 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享 ...

  3. Unity UGUI

    超详细的基础教程传送门:(持续更新中) Unity UGUI之Canvas&EventSystem:http://blog.csdn.net/qq992817263/article/detai ...

  4. 使用Unity创造动态的2D水体效果

    者:Alex Rose 在本篇教程中,我们将使用简单的物理机制模拟一个动态的2D水体.我们将使用一个线性渲染器.网格渲染器,触发器以及粒子的混合体来创造这一水体效果,最终得到可运用于你下款游戏的水纹和 ...

  5. Unity UGUI —— 无限循环List

    还记得大学毕业刚工作的时候是做flash的开发,那时候看到别人写的各种各样的UI组件就非常佩服,后来自己也慢慢尝试着写,发现其实也就那么回事.UI的开发其实技术的成分相对来说不算多,但是一个好的UI是 ...

  6. 基于Unity·UGUI实现的RecycleList循环列表UI容器

    在UI功能开发实践中,列表UI容器是我们经常使用一种UI容器组件.这种组件就根据输入的数据集合生成对应数据项目.从显示的方向来说,一般就分为水平排布和垂直排布的列表容器两种.列表容器为了在有限的界面空 ...

  7. Unity UGUI图文混排源码(三) -- 动态表情

    这里是根据图文混排源码(二)进一步修改的,其他链接也不贴了,就贴一个链接就好了,第一次看这文章的同学可以先去看看其他几篇文章 Unity UGUI图文混排源码(二):http://blog.csdn. ...

  8. Unity UGUI图文混排源码(二)

    Unity UGUI图文混排源码(一):http://blog.csdn.net/qq992817263/article/details/51112304 Unity UGUI图文混排源码(二):ht ...

  9. Unity UGUI实现图文混排

    目前在unity实现图文混排的好像都是通过自定义字体然后在文本获取字符的位置,用图片替换掉图片标签,这样对于支持英文来说,并没有什么影响.然后对于中文来说就是一个相当麻烦的事了,毕竟图文混排多用于游戏 ...

  10. Unity UGUI鼠标穿透UI问题(Unity官方的解决方法)

    简述 最近在用UGUI的时候遇到了鼠标穿透的问题,就是说在UGUI和3D场景混合的情况下,点击UI区域同时也会 触发3D中物体的鼠标事件.比如下图中 这里给Cube加了一个鼠标点击改变颜色的代码,如下 ...

随机推荐

  1. vue中使用西瓜视频api

    https://v2.h5player.bytedance.com/en/api/ 1 npm install xgplayer 1 <div id="mse">< ...

  2. Windows屏幕解锁服务原理及实现(1)

    https://github.com/zk2013/windows_remote_lock_unlock_screen 将生成的DLL注册至注册表 HKEY_LOCAL_MACHINE\SOFTWAR ...

  3. ai问答:使用 Vue3 组合式API 和 TS 父子组件共享数据

    这是一个使用 Vue3 组合式 API 和 TypeScript 的简单父子组件共享数据示例 父组件 Parent.vue: <template> <div> <p> ...

  4. shell自动化脚本,启动、停止应用程序

    #!/usr/bin/env bash # 常量初始化 set_runtime_vars(){ # 日期时间 Now_Date=`date +"%Y-%m-%d %H:%M:%S" ...

  5. 2022-02-05:字典序的第K小数字。 给定整数 n 和 k,找到 1 到 n 中字典序第 k 小的数字。 注意:1 ≤ k ≤ n ≤ 10**9。 示例 : 输入: n: 13 k: 2

    2022-02-05:字典序的第K小数字. 给定整数 n 和 k,找到 1 到 n 中字典序第 k 小的数字. 注意:1 ≤ k ≤ n ≤ 10**9. 示例 : 输入: n: 13 k: 2 输出 ...

  6. python通过变量名称的反射,获取变量的引用

    有一些极端情况下,例如变量名称是动态的,我们无法直接调用变量名,如何获取到变量的引用呢? aa = [globals()["xxxx"]]

  7. WPF入门教程系列二十六——DataGrid使用示例(3)

    WPF入门教程系列目录 WPF入门教程系列二--Application介绍 WPF入门教程系列三--Application介绍(续) WPF入门教程系列四--Dispatcher介绍 WPF入门教程系 ...

  8. /etc/netplan/network-manager-all.yaml 配置服务器ip

    本文为博主原创,转载请注明出处: /etc/netplan 是用于配置 Ubuntu 系统网络接口的目录.在 Ubuntu 中,网络配置的默认工具为  Netplan,而 /etc/netplan 则 ...

  9. NeoVim 学习笔记

    NeoVim 学习笔记 这篇学习笔记将用于记录本人在学习使用 NeoVim 编辑器过程中所编写的学习心得与代码.该笔记将会存放在https://github.com/owlman/study_note ...

  10. Spark常用算子

    Spark是一个快速.通用.可扩展的分布式数据处理引擎,支持各种数据处理任务.Spark提供了许多强大的算子,用于对数据集进行各种转换和操作. 以下是Spark中常用的一些算子: 1. map:对RD ...