首页 > 其他分享 >Unity UGUI的Mask(遮罩)组件的介绍及使用

Unity UGUI的Mask(遮罩)组件的介绍及使用

时间:2023-07-10 16:44:30浏览次数:41  
标签:遮罩 对象 mask Image Mask Unity public

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

操作步骤:

  1. 创建一个Image对象作为遮罩对象,设置其形状为圆形。
  2. 创建一个RawImage对象作为子对象,设置其图片为需要显示的图片。
  3. 将遮罩对象和子对象添加到Canvas中。
  4. 将子对象的父对象设置为遮罩对象。
  5. 设置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;
    }
}

操作步骤:

  1. 创建一个Text对象作为遮罩对象,设置其文本内容。
  2. 创建一个Text对象作为子对象,设置其文本内容。
  3. 将遮罩对象和子对象添加到Canvas中。
  4. 将子对象的父对象设置为遮罩对象。
  5. 设置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);
    }
}

操作步骤:

  1. 创建一个Image对象作为遮罩对象,设置其形状为矩形。
  2. 创建一个RawImage对象作为子对象,设置其图片为需要显示的图片。
  3. 将遮罩对象和子对象添加到Canvas中。
  4. 将子对象的父对象设置为遮罩对象。
  5. 在代码中动态修改遮罩对象的形状。

示例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;
    }
}

操作步骤:

  1. 创建一个Image对象作为遮罩对象,设置其形状为圆形。
  2. 创建一个RawImage对象作为子对象,设置其图片为需要显示的图片。
  3. 将遮罩对象和子对象添加到Canvas中。
  4. 将子对象的父对象设置为遮罩对象。
  5. 设置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;
    }
}

操作步骤:

  1. 创建一个Image对象作为遮罩对象,设置其形状为矩形。
  2. 创建一个RawImage对象作为子对象,设置其图片为需要显示的图片。
  3. 将遮罩对象和子对象添加到Canvas中。
  4. 将子对象的父对象设置为遮罩对象。
  5. 设置Mask组件的Alpha Cutoff属性为0.5。

6. 注意事项

  • 遮罩对象和子对象需要添加到同一个Canvas中。
  • 子对象的父对象必须设置为遮罩对象。
  • 遮罩对象的形状可以通过修改RectTransform的sizeDelta属性来调整。
  • 遮罩对象的形状可以是任意形状的UI元素,如Image、RawImage等。

7. 参考资料

标签:遮罩,对象,mask,Image,Mask,Unity,public
From: https://www.cnblogs.com/alianblank/p/17541550.html

相关文章

  • Unity UGUI的Slider(滑动条)件组的介绍及使用
    UnityUGUI的Slider(滑动条)件组的介绍及使用1.什么是Slider组件?Slider(滑动条)是UnityUGUI中的一种常用UI组件用,于在用户界面中实现滑动选择的功能。通过拖动滑块,用户可以选择一个数值范围的内值。2.Slider组件的工作原理Slider组件由两部分组成:滑动区域和滑块。滑动区域用于显......
  • Unity UGUI的Toggle(复选框)组件的介绍及使用
    UnityUGUI的Toggle(复选框)组件的介绍及使用1.什么是Toggle组件?Toggle(复选框)是UnityUGUI中的一个常用组件,用于实现复选框的功能。它可以被选中或取消选中,并且可以代码通过其制控状态。2.Toggle组件的工作原理组Toggle件由两个部分组成:背景记标和。景背用于显示复选框的外观表......
  • WINUI 引入 CommunityToolkit.WinUI.UI进行数据验证
     先在xaml命名空间中引入  xmlns:ui="using:CommunityToolkit.WinUI.UI"textbox中进行IP验证如下:<TextBoxx:Name="textBox"Width="200"Height="30"Background="AliceBlue"ui:TextBoxExten......
  • OpenCV计算机视觉学习(14)——浅谈常见图像后缀(png, jpg, bmp)的区别(opencv读取语义分割m
    如果需要处理的原图及代码,请移步小编的GitHub地址传送门:请点击我如果点击有误:https://github.com/LeBron-Jian/ComputerVisionPractice 本来不想碎碎念,但是我已经在图像后缀上栽倒两次了。而且因为无意犯错,根本找不到问题。不论是在深度学习的语义分割中,还是在图......
  • Unity UGUI的Image(图片)组件的介绍及使用
    UGUI的Image(图片)组件的介绍及使用1.什么是UGUI的Image(图片)组件?UGUI的Image(图片)组件是Unity引擎中的一种UI组件,用于显示2D图像。它提供了一种简单而灵活的方式来在游戏中加载和显示图片。2.为什么要使用UGUI的Image(图片)组件?使用UGUI的Image组件可以方便地在游戏中展示各种图片......
  • Unity UGUI的Text(文本)组件的介绍及使用
    UGUI的Text(文本)组件的介绍及使用什么是UGUI的Text(文本)组件?UGUI(UnityGraphicUserInterface)是Unity引擎的一套用户界面系统,而Text(文本)组件是UGUI中用于在游戏界面中显示文本的组件。该组件可以用于显示游戏中的文字、数字、标签等信息。为什么要使用UGUI的Text(文本)组件?使用UG......
  • 记录Unity2021接入穿山甲SDK的几个问题
    Unity2021接入穿山甲SDK,打包一直有报错,费了不少心力,查了N多帖子(绝大部分没什么用),特别感谢ChatGPT提供的线索,最终打包成功,记录几个遇到的问题1、导入最新版本的ExternalDependencyManager,在Github下载源码:https://github.com/googlesamples/unity-jar-resolver;2、ExternalDepend......
  • Unity3D如何在一个项目建多个场景
    推荐:将NSDT场景编辑器加入你的3D工具链3D工具集:NSDT简石数字孪生设置多个场景您可以添加多个场景、编辑查看场景的方式以及更改场景设置。要创建新场景,请参阅创建、加载和保存场景。添加场景有两种方法可以向项目添加新场景:*右键单击以在“项目”窗口中打开场景资源的菜单......
  • Unity 2022 LTS 在Mac上打不开
    问题描述:macm1安装后无法打开提示:Licenseerror解决办法:卸载原来下载的unity,在com站点下载UnityHub,登录......
  • 在CSS中创建一个遮罩层并阻止点击穿透的常见方案
    使用position:fixed和z-index:创建一个具有全屏尺寸的<div>元素,并将其设置为position:fixed,top:0,left:0,width:100%,height:100%,然后使用z-index将其放在其他元素之上。通过设置透明度、背景颜色或使用其他视觉效果,可以实现遮罩层的效果。这样的遮罩层将位于所有其他......