FairyGUI中创建遮罩

最新推荐文章于 2024-05-15 21:34:12 发布
最新推荐文章于 2024-05-15 21:34:12 发布
阅读量1.2w 收藏 3
点赞数 2
分类专栏： Unity3D 文章标签： unity FairyGUI UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14903317/article/details/69743376
版权

在做UI的时候我们经常会用到遮罩.在UGUI中我们通过Mask组件来实现,FairyGUI中也有同样的功能.

下面让我们在FairyGUI编辑器中创建一个List组件,并导入到Unity中显示,没有添加任何遮罩,List的遮挡区域是一个方形.

这里写图片描述

现在我们为List添加一个遮罩来限制List的显示区域和触摸区域.首先导入一张带Alpha通道的不规则图片在FairyGUI编辑器中.

这里写图片描述

然后选中我们的遮罩图,并在编辑器右边的信息界面中勾选中[将我作为组件的遮罩].

这里写图片描述

再次导入Unity中看看效果.

这里写图片描述

现在可以看到List的显示区域和触摸区域已经被遮挡了.

通过观察可以发现FairyGUI遮罩的原理与UGUI中Mask组件一样.是使用透明通道来实现遮罩.Alpha值为0的地方将不会显示.同样可以使用这种方式制作头像遮罩等等.

成都骚壳壳
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
fairyGUI界面控件的基本制作和功能实现
u013354943的博客
12-25 2万+
fairyGUI界面控件的基本制作和功能实现 —1.学习地址：官网和泰课在线 fairyGUI官网： http://www.fairygui.com/tutorial 泰课在线： http://www.taikr.com/cloud/search?q=fairyGUI 2.按钮   一般按钮有4个态：（点开按钮模块可查看）up/down/over/select
FairyGUI个人学习手册——只有重点（2）
qq_43685296的博客
11-09 2645
组件被拖到其他组件中去，检查器上能设置的属性一般是固定的。例如一个按钮，我们可以改变它的标题、图标、是否选中等，这些都是编辑器提供的固定属性。但如果我在按钮中放置了额外的文本或者装载器，而且需要设定他们在实例化后的属性时，就需要用自定义属性，将组件的子元件甚至更深层次的元件的属性暴露出来。在自定义属性旁点击编辑弹出窗口。
cocos2d-Lua FairyGUI之图形(五)
qq_24726043的博客
12-14 1211
图形 参考：图形 注意： 可点击，使用接口为: addEventListener 可用于作为背景的遮罩层，类似于LayerColor，防止透点 可用于作为自定义遮罩，用于处理不规则点击 动态创建，一定要设置图形大小 创建矩形示例： -- 如果为全屏的，主要用于作为遮罩层使用 local width = display.width -- 宽度 local height = display.height -- 高度 local lineSize = 0
Ue4 FairyGUI 自定义遮罩
Main_hc的专栏
08-05 1128
FairyGUI 当前版本在Ue4不支持自定义遮罩，可以看setMask这个函数 这里没有实现了
【Unity之FairyGUI】你了解FGUI吗，跨平台多功能高效UI插件
最新发布
秩沅
05-15 1155
跨平台多功能高效UI插件FGUI
FairyGUI-遮罩与滚动视图
成长ing中的w的专栏
05-10 3272
组件GComponent关于溢出部分处理，选择“可见”模式，再指定遮罩层，就实现了遮罩功能；如果设定成滚动，则变成了滚动视图。 导出资源 代码实现 using System.Collections; using System.Collections.Generic; using UnityEngine; using FairyGUI; /* * Author:W * 滚动视图 * GComponent组件有关于溢出处理 * 作用1：设置遮罩 * 作用2：设置滚动，滚动视图 *
Unity跨平台UI解决方案：可能是最全的FairyGUI系列教程.Part2
空名先生
05-27 1万+
回顾 上一节详情请看这里：Unity跨平台UI解决方案：可能是最全的FairyGUI系列教程.Part1 上一节介绍了：FairyGUI编辑器使用（控制台，纹理集....）、元件、图片、动画、占位、装载器、视频/模型 现在小空带大家直接切入主题！了解字体、组件、滚动容器、控制器、关联系统、按钮、进度条、列表、树、窗体、动效、适配等 文本和富文本和输入文本 普通文本的鼠标/触摸感应是没有的，只是个单纯的文本，当然文本的字体样式设置，字体大小颜色行距字距，对齐方式，粗体斜体下划线，以及UBB语法支
Unity跨平台UI解决方案：可能是最全的FairyGUI系列教程(1)
2401_84102653的博客
04-04 852
由于题目很多整理答案的工作量太大，所以仅限于提供知识点，详细的很多问题和参考答案我都整理成了 PDF文件本文已被CODING开源项目：《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》收录一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
FairyGUI的使用技巧和优化建议
UWA—简单优化，优化简单！
11-21 3495
这是侑虎科技第468篇文章，感谢作者黄程供稿。欢迎转发分享，未经作者授权请勿转载。如果您有任何独到的见解或者发现也欢迎联系我们，一起探讨。（QQ群：465082844） 作者联系方式：sniperbat@gmail.com，作者也是U Sparkle活动参与者，UWA欢迎更多开发朋友加入U Sparkle开发者计划，这个舞台有你更精彩！ FairyGUI是一支持跨平台的游戏GUI解决方案。由编...
openlayers遮罩示例
01-29
- **创建遮罩**：创建一个`ol.Feature`对象，表示遮罩的形状，如矩形或圆。然后，使用`ol.style.Style`设置遮罩的颜色、透明度和形状。 - **添加遮罩到图层**：将遮罩特征添加到一个单独的图层，这个图层可以有自己...
Qt之实现遮罩窗口，实现了窗口遮罩效果
07-24
在Qt编程中，实现遮罩窗口（mask window）是一种常见的需求，主要用于在界面操作时提供视觉提示或防止用户误操作。遮罩窗口通常是一个半透明的覆盖层，它允许底层窗口的部分可见，但限制用户的交互。本文将详细介绍...
FairyGUI插件
08-17
FairyGUI是一款UI制作的编辑器，它是一个跨平台的UI编辑器，支持多个开发平台，当然，对我们而言，它支持Unity，还有Egret，Egret和Unity有一点关系，它支持从Unity导入数据。
Unity FairyGUI 曲面UI 多功能界面 界面demo最全
11-28
Unity FairyGUI 资源包里面介绍了很多种常用非常用的界面美观的UI demo，其中囊括了曲面UI，多功能界面等，可以说是UnityUI 界面demo最全的资源包
AE创建遮罩和蒙版.docx
01-26
学习的过程是痛苦的，得到的成功是喜悦的，希望大家可以互勉共同进步，也希望大家一起交流学习哦！AE我们一起学习
Unity 光圈遮罩聚焦ui引导
07-08
1. 创建Shader：在Unity中创建一个新的Shader，并在Shader Graph或自定义CG代码中编写渲染逻辑。 2. 模拟模糊：在Shader中，可以使用高斯模糊或者其他模糊算法来处理遮罩外的像素，使它们变得模糊。 3. 清晰焦点：...
遮罩下拉导航特效代码
03-20
在这个项目中，jQuery被用来实现遮罩下拉导航的动态效果，包括菜单的展开与收起、遮罩层的显示与隐藏，以及响应式的适配能力。 响应式设计是现代网页开发的必备特性，它确保网页能在不同设备（如手机、平板电脑、...
弹出半透明黑色遮罩层
Truong的专栏
01-24 4777
a:link{text-decoration:none}   .black_overlay{              display: none;              position: absolute;              top: 0%;              left: 0%;              width: 100%;
FairyGUI列表裁剪粒子
SendSI的专栏
04-02 1680
教程网址.https://www.fairygui.com/docs/unity/insert3d 这是原文:首先将列表转换为一个组件，在组件内拖入一个矩形图形覆盖列表的视口，然后将这个图形设置为组件的自定义遮罩。 这里分下步骤: 1.将列表转换为一个组件， 2.在组件内拖入一个矩形图形覆盖列表的视口 3.然后将这个图形设置为组件的自定义遮罩。 4.修改Shader文件 1.2.3的步骤 第4步,直接copy啦,有能力者自己再写的完美点 Shader "fgui_Particles/fgui_CutPa
FairyGUI
热门推荐
any
09-02 2万+
FairyGUI是一款专业的 UI编辑器 FairyGUI UI编辑器 操作简单，使用习惯与Adobe系列软件保持一致，美术设计师可以轻松上手。在编辑器即可组合各种复杂UI组件，以及为UI设计动画效果，无需编写任何代码。可一键导出到Unity，Starling，Egret， LayaAir，Flash等多个主流应用和游戏平台。 我们的目标：99%的UI制作任务都直接可视化完成！
FairyGUI 自定义遮罩
04-04
FairyGUI 是一款强大的 UI 编辑器和 UI 框架，其中的遮罩功能可以让我们在 UI 中实现一些非常有趣的效果。在 FairyGUI 中，我们可以使用自定义图形作为遮罩，这篇文章将会介绍如何实现自定义遮罩。 1. 创建自定义遮罩 首先，在 FairyGUI 编辑器中创建一个 UI 节点，并将其属性中的 Mask Type 设置为 Image，这将使该节点成为一个遮罩层。然后，为该节点添加一个 Image 组件，并将其作为遮罩的图像。 接下来，我们需要编写脚本来指定遮罩的形状。我们可以创建一个自定义脚本，继承自 FairyGUI 的 IMask 接口，并实现其中的一个方法：OnPopulateMesh。在这个方法中，我们需要创建一个 Mesh 对象，并设置其顶点和三角形，以定义遮罩的形状。 下面是一个简单的例子： ```csharp using UnityEngine; using FairyGUI; public class CustomMask : MonoBehaviour, IMask { public void OnPopulateMesh(VertexHelper vertexHelper) { Mesh mesh = new Mesh(); Vector3[] vertices = new Vector3[4]; int[] triangles = new int[6]; float width = 200f; float height = 100f; vertices[0] = new Vector3(0f, 0f); vertices[1] = new Vector3(0f, height); vertices[2] = new Vector3(width, height); vertices[3] = new Vector3(width, 0f); triangles[0] = 0; triangles[1] = 1; triangles[2] = 2; triangles[3] = 0; triangles[4] = 2; triangles[5] = 3; mesh.vertices = vertices; mesh.triangles = triangles; vertexHelper.AddUIVertexStream(new List<UIVertex>(), mesh); } } ``` 在这个例子中，我们创建了一个矩形的遮罩，并将其顶点和三角形添加到了 Mesh 对象中。然后，我们使用 VertexHelper 对象将这个 Mesh 对象传递给遮罩层，以便在 UI 中显示出来。 2. 将自定义脚本添加到遮罩层 在脚本编写完成后，我们需要将其添加到遮罩层中。在 FairyGUI 编辑器中，我们可以选择遮罩层节点，并在属性中的 Mask 中选择 Custom Mask。然后，在 Custom Mask 中选择我们刚才编写的自定义脚本。 3. 测试效果 现在，我们可以在场景中测试我们的自定义遮罩了。我们可以在遮罩层的子节点中添加一些 UI 元素，并在运行时观察遮罩的效果。如果一切正常，我们应该能够看到 UI 元素被遮罩的效果。 总结 FairyGUI 的自定义遮罩功能非常强大，可以让我们在 UI 中实现各种有趣的效果。通过编写自定义脚本，我们可以创建各种形状的遮罩，并将其应用到 UI 中。希望这篇文章能够帮助你理解 FairyGUI 的自定义遮罩功能，以及如何使用它来实现自己的 UI 效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值