UI 材质动效系列教程(1)——项目介绍

1133天前
转载文章 / UI / 动效设计 (本文章为转载文章,如果若您的权利被侵害,请联系管理员删除的)
10758
1
6
 | 

转载:虚幻引擎





要理解UE材质并不容易,特别是对初学者和习惯了其他软件的美术师来说(例如Figma、Photoshop、

Illustrator、After Effects), 希望本项目提供的材质函数和示例能帮助你跨越鸿沟,开启你的“材质之旅”!


UI 材质动效系列教程(共3篇),结合项目UI Material Lab提供了大量示例对UI美术师和初学者来

解析如何构建UI材质及动效。第1部分主要介绍如何获取和使用该项目,并将介绍相关基础知识,以便能上手操作。


UI Material Lab是什么?

1695116855707006_2.png


UI Material Lab是一系列材质函数和技术方法的集合。该项目旨在加深美术师的理解;项目提供的

材质函数都是可复用的案例。此外,它还提供了很多用法示例和注释,帮助初学者更好地学习和理解相关知识。


面向人群


    • 刚开始接触材质的2D/UI美术师

    • 愿意使用引擎的设计师

    • 想要快速打造精美UI的小型开发团队和独立开发者

    • 有材质开发经验,并想构建一个可复用函数库以提高效率的开发者


项目目的


    1. 教育

          帮助人们了解更多材质知识和常用材质技术

          助力初学者走向成功


    2. 提供参考材质库

          为使用材质的人提供一个函数库

          提供示例内容、实用的材质函数,温故知新,了解新方法,开拓新思路。


    3. 提供灵感

          为美术家和设计师提供新的想法

          为乐于尝试不同事物的人提供灵感

          了解虚幻引擎的潜力


获取项目


UI Material Lab项目可以在虚幻商城免费下载


如何使用

打开项目后,点击运行查看完整的UI效果列表,然后点击顶部标签页浏览它们。


169511685538217_3.png


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


1695116855250747_4.png


浏览各个标签页,探索不同函数及其应用


    • “MaterialFunctions(材质函数)”文件夹包含UI Material Lab项目的核心内

      容:所有材质函数(按类型分组)

    • “Materials(材质)”文件夹包含在编辑器中运行时可以看到的所有材质示例,

      按标签组织文件夹结构

    • “Widgets(控件)”文件夹包含用于显示UI Material Lab的控件,包括结构性

      控件(标签、卡片等)以及一些应用



在“Materials”文件夹中,每个示例都保存在自己的文件夹中。在每个示例的文件夹中,你都

可以找到一个主材质(包含所有逻辑的主要材质)和所有材质实例(材质的不同版本),材质

实例可以通过修改主材质中的不同参数来创建。


1695116855228609_5.png

1695116855224159_6.png


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


1695116856899512_7.png


应用在两张卡片上的两个材质实例


查找特定材质

想在列表中查找拥有特定效果的材质?


    1. 打开“Materials”文件夹

    2. 根据标签找到正确的子文件夹

    3. 根据效果名称找到效果文件夹

    4. 打开对应的材质和材质实例


1695116856308992_8.png

1695116856757300_9.png


查找正确的文件夹


1695116856944524_10.png


查找主材质和材质实例


使用材质函数


    1. 创建或打开一个材质

    2. 材质必须为UI材质,否则部分函数将无法使用

    3. 右键单击或点击标签打开函数列表

    4. 在“UIMaterialLab(UI Material Lab)”下拉菜单中找到所有可用的材质函数

    5. 点击你想添加到图表中的函数


QQ截图20230919180621.png


将材质域设为用户界面



QQ截图20230919180725.png


所有材质函数都位于UI Material Lab类别


接下来呢?

接下来,我们建议你尝试不同的材质函数,探索不同的材质示例。


你可以在“Materials”文件夹中找到图块材质示例。你还可以看一下“Applications(应用)”

标签页显示的控件,它们位于Widgets -> Components(组件)文件夹,它们使用的材质位于

Widgets -> ComponentMaterials(组件材质)文件夹。你还可以查看本教程的剩余两部分内容!



如何将它迁移到你自己的项目中

你可以使用“迁移”命令将UI Material Lab迁移到你自己的项目中。


    1. 选择“UIMaterialLab(UI Material Lab)”文件夹

    2. 右键单击并选择“迁移”

    3. 选择你想迁移的内容:可能你只想移动“MaterialFunctions”文件夹

    4. 选择目标文件夹:项目的“内容”文件夹

    5. 完成迁移过程并验证资产是否已正确迁移到你的项目中


注:“迁移”选项只能将内容迁移至相同版本(5.1)或更高版本的虚幻引擎中,无法迁移至旧版本中。

169511685749540_13.png

1695116857637183_14.png

1695116857367959_15.png

1695116857801975_16.png

1695116855228609_5.png


常见问题


就材质构建而言,这是性能最佳的一种方法吗?


是也不是。材质实验室只是一个工具,性能取决于你怎么使用这个工具。它有提高性能的潜力,

比如通过减少纹理拾取次数和使用SDF。但是使用SDF的方式或多或少也能提高性能。


这个项目的主要目的是促进学习,因此有时候它不一定会采用最优的方式,这是为让教程更加清晰、

便于理解。例如,在锐化SDF时,我们可以用fwidth计算代替Smoothstep(性能开销比较大)。

但是这可能会导致材质函数不太容易理解,而且不一定能在所有平台上正常运作。

如果你觉自己在材质方面已经得心应手,我们鼓励你根据自己的需求调整这些函数,做相应的优化。

欢迎在本教程页的评论区提出优化建议!


这些材质函数的性能开销有多大?


这要看具体情况。性能取决于很多因素。在未来的更新中,我们计划添加函数开销标签,

为每个材质函数分配复杂性标签(低开销、中等开销、高开销)。但这只是粗略估计,最好

对UI进行性能分析。


以下是分析材质性能时的一些基本指导原则:


    • 不要过于依赖材质编辑器中显示的指令数:一条指令只代表一项操作,

    • 不同操作会占用不同数量的GPU时钟周期和寄存器


    • 纹理采样可能会产生很大的开销,如有可能,应考虑使用SDF和梯度材质函数


    • 你想渲染的控件的每个像素都需要运行材质,控件越大,相同材质的运行

      次数就越多,因此使用全屏效果时一定要深思。

    • ALU指令(算术运算)复杂度(可能随GPU架构而异)参考:

      1. 无影响(就大多数GPU而言)

        饱和、绝对值、乘以2/4、除以2/4(有些硬件指令的输入或输出还可以接收修饰符,例如“输出乘以2”)


      2. 低

           相加、相减、相乘、最小值、最大值、向下取整、向上取整、四舍五入、取小数

           限制、阶跃、插值、点积

           IF(又称无分支三元比较)


      3. 中

           相除、正弦、余弦、平方根、log2、exp2

           符号、叉积、字符串长度

           距离、平滑阶梯


      4. 高

           幂、取余、正切

           反三角(asin、acos、atan、atan2)


    • 作为常量传递的值(非参数)将在编译时进行优化(因此不用担心乘以

      0.5和除以2的区别,如果它们是常量,那么都一样)

    • 仅在必要时使用“自定义”节点(例如无法以节点形式提供的操作):

      它们不能像节点一样在编译时优化,你无法预览每一步操作,对团队成员来说可能不容易理解


声明:乐魔UI(Lemooui)内网友所发表的所有内容及言论仅代表其本人,并不反映任何UI(Lemooui)之意见及观点。
举报
收藏
文章-动效设计
10758
1
6
标签
没有标签
全部评论
发表评论
设置密码
注册会员
我已阅读并接受《乐魔UI协议》
微信登录
二维加载中...

使用微信扫一扫登录

“乐魔UI”

建议反馈
提交取消
举报
提交取消