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. java指定时间失效Calendar

    获取第二天的1:30的毫秒数 public static Long getEveryDayTime() { Calendar calendar = Calendar.getInstance(); ca ...

  2. 使用select需要注意的细节

    使用select需要注意的细节 在学校的时候就使用过select,但是在项目中使用的时候却犯了个错误. select如何使用就不进行总结了,网上教程太多,以下是项目中我写的一小段代码,便于总结. in ...

  3. ts中接口

    前言:ts定义接口的任意一个属性 interface IPerson { name: string age: number family?: any[] // Error,因为不是任意类型的子集 [p ...

  4. 数据分析02-(pandas介绍、jupyter notebook)

    数据分析-02 数据分析-02 pandas pandas介绍 pandas核心数据结构 Series DataFrame 核心数据结构操作 复合索引 Jupyter notebook 数据加载 处理 ...

  5. Three.js 进阶之旅:页面平滑滚动-王国之泪 💧

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 摘要 浏览网页时,常被一些基于鼠标滚轮控制的页面动画所惊艳到,比如greenso ...

  6. Linux系统下CUDA和cuDNN环境配置

    本人配置环境:linux服务器,ubantu18,显卡驱动11.0,安装CUDA11.0和cuDNN8.2.1. 一.安装CUDA11.0 1.先多找几篇博客,了解大概的流程,避免踩坑. 2.官网下载 ...

  7. vue【解决方案】页面/路由跳转后,滚动条消失,页面无法滚动

    原因解析: vue项目中,页面/路由跳转后,body 的内联样式变成 overflow:hidden 解决方案: 使用路由守卫,在页面/路由跳转后,将body 的overflow设置为auto src ...

  8. 2022-06-15:薯队长最近在参加了一个活动,主办方提供了N个礼物以供挑选, 每个礼物有一个价值,范围在0 ~ 10^9之间, 薯队长可以从中挑选k个礼物。 返回:其中价值最接近的两件礼物之间相差

    2022-06-15:薯队长最近在参加了一个活动,主办方提供了N个礼物以供挑选, 每个礼物有一个价值,范围在0 ~ 10^9之间, 薯队长可以从中挑选k个礼物. 返回:其中价值最接近的两件礼物之间相差 ...

  9. 2021-04-19:手写代码:最小生成树算法之Kruskal。

    2021-04-19:手写代码:最小生成树算法之Kruskal. 福大大 答案2021-04-19: 并查集.边从小到大,找最小边,无环. 代码用golang编写.代码如下: package main ...

  10. 2022-01-15:中心对称数 III。 中心对称数是指一个数字在旋转了 180 度之后看起来依旧相同的数字(或者上下颠倒地看)。 写一个函数来计算范围在 [low, high] 之间中心对称数的个

    2022-01-15:中心对称数 III. 中心对称数是指一个数字在旋转了 180 度之后看起来依旧相同的数字(或者上下颠倒地看). 写一个函数来计算范围在 [low, high] 之间中心对称数的个 ...