转载:虚幻引擎
要理解UE材质并不容易,特别是对初学者和习惯了其他软件的美术师来说(例如Figma、Photoshop、
Illustrator、After Effects), 希望本项目提供的材质函数和示例能帮助你跨越鸿沟,开启你的“材质之旅”!
UI 材质动效系列教程(共3篇),结合项目UI Material Lab提供了大量示例对UI美术师和初学者来
解析如何构建UI材质及动效。第1部分主要介绍如何获取和使用该项目,并将介绍相关基础知识,以便能上手操作。
UI Material Lab是什么?

UI Material Lab是一系列材质函数和技术方法的集合。该项目旨在加深美术师的理解;项目提供的
材质函数都是可复用的案例。此外,它还提供了很多用法示例和注释,帮助初学者更好地学习和理解相关知识。
面向人群
刚开始接触材质的2D/UI美术师
愿意使用引擎的设计师
想要快速打造精美UI的小型开发团队和独立开发者
有材质开发经验,并想构建一个可复用函数库以提高效率的开发者
项目目的
教育
帮助人们了解更多材质知识和常用材质技术
助力初学者走向成功
提供参考材质库
为使用材质的人提供一个函数库
提供示例内容、实用的材质函数,温故知新,了解新方法,开拓新思路。
提供灵感
为美术家和设计师提供新的想法
为乐于尝试不同事物的人提供灵感
了解虚幻引擎的潜力
获取项目
UI Material Lab项目可以在虚幻商城免费下载
如何使用
打开项目后,点击运行查看完整的UI效果列表,然后点击顶部标签页浏览它们。

项目将自动打开“Main”关卡,你只需要点击“在编辑器中运行”

浏览各个标签页,探索不同函数及其应用
“MaterialFunctions(材质函数)”文件夹包含UI Material Lab项目的核心内
容:所有材质函数(按类型分组)
“Materials(材质)”文件夹包含在编辑器中运行时可以看到的所有材质示例,
按标签组织文件夹结构
“Widgets(控件)”文件夹包含用于显示UI Material Lab的控件,包括结构性
控件(标签、卡片等)以及一些应用
在“Materials”文件夹中,每个示例都保存在自己的文件夹中。在每个示例的文件夹中,你都
可以找到一个主材质(包含所有逻辑的主要材质)和所有材质实例(材质的不同版本),材质
实例可以通过修改主材质中的不同参数来创建。


由主材质创建出来的两个材质实例

应用在两张卡片上的两个材质实例
查找特定材质
想在列表中查找拥有特定效果的材质?
打开“Materials”文件夹
根据标签找到正确的子文件夹
根据效果名称找到效果文件夹
打开对应的材质和材质实例


查找正确的文件夹

查找主材质和材质实例
使用材质函数
创建或打开一个材质
材质必须为UI材质,否则部分函数将无法使用
右键单击或点击标签打开函数列表
在“UIMaterialLab(UI Material Lab)”下拉菜单中找到所有可用的材质函数
点击你想添加到图表中的函数

将材质域设为用户界面

所有材质函数都位于UI Material Lab类别
接下来呢?
接下来,我们建议你尝试不同的材质函数,探索不同的材质示例。
你可以在“Materials”文件夹中找到图块材质示例。你还可以看一下“Applications(应用)”
标签页显示的控件,它们位于Widgets -> Components(组件)文件夹,它们使用的材质位于
Widgets -> ComponentMaterials(组件材质)文件夹。你还可以查看本教程的剩余两部分内容!
如何将它迁移到你自己的项目中
你可以使用“迁移”命令将UI Material Lab迁移到你自己的项目中。
选择“UIMaterialLab(UI Material Lab)”文件夹
右键单击并选择“迁移”
选择你想迁移的内容:可能你只想移动“MaterialFunctions”文件夹
选择目标文件夹:项目的“内容”文件夹
完成迁移过程并验证资产是否已正确迁移到你的项目中
注:“迁移”选项只能将内容迁移至相同版本(5.1)或更高版本的虚幻引擎中,无法迁移至旧版本中。





常见问题
就材质构建而言,这是性能最佳的一种方法吗?
是也不是。材质实验室只是一个工具,性能取决于你怎么使用这个工具。它有提高性能的潜力,
比如通过减少纹理拾取次数和使用SDF。但是使用SDF的方式或多或少也能提高性能。
这个项目的主要目的是促进学习,因此有时候它不一定会采用最优的方式,这是为让教程更加清晰、
便于理解。例如,在锐化SDF时,我们可以用fwidth计算代替Smoothstep(性能开销比较大)。
但是这可能会导致材质函数不太容易理解,而且不一定能在所有平台上正常运作。
如果你觉自己在材质方面已经得心应手,我们鼓励你根据自己的需求调整这些函数,做相应的优化。
欢迎在本教程页的评论区提出优化建议!
这些材质函数的性能开销有多大?
这要看具体情况。性能取决于很多因素。在未来的更新中,我们计划添加函数开销标签,
为每个材质函数分配复杂性标签(低开销、中等开销、高开销)。但这只是粗略估计,最好
对UI进行性能分析。
以下是分析材质性能时的一些基本指导原则:
不要过于依赖材质编辑器中显示的指令数:一条指令只代表一项操作,
不同操作会占用不同数量的GPU时钟周期和寄存器
纹理采样可能会产生很大的开销,如有可能,应考虑使用SDF和梯度材质函数
你想渲染的控件的每个像素都需要运行材质,控件越大,相同材质的运行
次数就越多,因此使用全屏效果时一定要深思。
ALU指令(算术运算)复杂度(可能随GPU架构而异)参考:
无影响(就大多数GPU而言)
饱和、绝对值、乘以2/4、除以2/4(有些硬件指令的输入或输出还可以接收修饰符,例如“输出乘以2”)
低
相加、相减、相乘、最小值、最大值、向下取整、向上取整、四舍五入、取小数
限制、阶跃、插值、点积
IF(又称无分支三元比较)
中
相除、正弦、余弦、平方根、log2、exp2
符号、叉积、字符串长度
距离、平滑阶梯
高
幂、取余、正切
反三角(asin、acos、atan、atan2)
作为常量传递的值(非参数)将在编译时进行优化(因此不用担心乘以
0.5和除以2的区别,如果它们是常量,那么都一样)
仅在必要时使用“自定义”节点(例如无法以节点形式提供的操作):
它们不能像节点一样在编译时优化,你无法预览每一步操作,对团队成员来说可能不容易理解