UE5 - UI Material Lab 学习笔记

1、学习资料收集

UI Material Lab : https://www.unrealengine.com/marketplace/zh-CN/product/ui-material-lab

视频1:https://www.bilibili.com/video/BV1Hm4y1t7Kn/?spm_id_from=333.337.search-card.all.click&vd_source=707ec8983cc32e6e065d5496a7f79ee6

视频2(1小时多):https://www.bilibili.com/video/BV1hh41177G2/?spm_id_from=333.337.search-card.all.click&vd_source=707ec8983cc32e6e065d5496a7f79ee6

官方教学:https://dev.epicgames.com/community/learning/tutorials/Wz8V/unreal-engine-intuitive-material-building-with-the-ui-material-lab-part-1 内容为视频2部分,有其他图文资料

其他视频:https://www.youtube.com/watch?v=eeedwACiTO4

其他视频:https://www.youtube.com/watch?v=8VwS8mBCUSk


2、UI Material Lab 介绍

https://www.bilibili.com/video/BV1Hm4y1t7Kn/?spm_id_from=333.337.search-card.all.click\&vd_source=707ec8983cc32e6e065d5496a7f79ee6

  • Transforms:各类形变(动画、缩放、对称、旋转、填充)

  • Gradients:曲线(线型、角度、射线、映射、方形切割)

  • Time:时间(线性、Ease、时间效果)

  • SDFs:距离力场(距离、布尔、形状、波纹、效果)

  • Masks:遮罩(遮蔽、风扇、旋转、环、格子、射线)

  • Patterns:图案(栅格、装饰线条、六角形、网格)

  • Distortions:扭曲(倾斜、歪斜、极坐标、波浪、UV)

  • Utilities:其他(随机、像素、阶梯、乒乓)

  • Applications:应用


3、UI Material Lab 技术说明

https://www.bilibili.com/video/BV1hh41177G2/?spm_id_from=333.337.search-card.all.click\&vd_source=707ec8983cc32e6e065d5496a7f79ee6

3.1、基本介绍

  • UV:TexCoord、GetUserInterfaceUV
  • Material functions:把重复的节点做成函数,MF_UI_SDF_Circel与MF_UI_RemappableGradient等函数,有很多输入可以配置,完成一些效果
  • 材质与动画组合使用:使用Controls,结合Animations实现动画

3.2、节点基础介绍

  • 用MF_UI_SDF_Box,输入Size、Stroke thickness、KeepAspectRatio,输出Outline,形成一个正方形边框
  • 使用CustomRotator、MF_UI_Scale,调整UV旋转和大小,形成菱形边框
  • 使用MF_UI_SquareGradient,实现一个4格的效果;这里注意UVs变量的使用,不同与一些材质系统,这里不是完全连成一条线的
  • 继续在下方UVs处理里,加入MF_UI_LinearTime、Step、progress mark(变量)等处理,形成动画
  • 在Material输出前,加入progress mask+Min,形成菱形边框动画效果
  • 继续细分,生成2个粗细不同的菱形边框,一个组合遮罩动画后,和另一个组合的效果
  • 继续组合
  • 使用Lerp,即透明度从0-1过渡,颜色从A-B过渡,的方式,给图像上色,之后再透明度遮罩后,出现效果

这个例子展现了UI Material Lab的一些不同之处,一个是节点之间可以通过变量的形式进行跳转,有点像蓝图;一个是MF_开头的预设好的处理函数可以使用


4、利用UI Material Lab 做L屏幕软透视效果

L屏幕的透视,是把下面的屏幕做一个倒金字塔(梯形)内缩,当站在L屏前看时,就有了透视效果,效果大致如下

  • 需要在项目的相机里加入SceneCaptureComponent2D,并新增一个Render Target,绑定
  • 建立2个Material,top负责上面部分(遮盖),dowm负责下面部分(倒梯形)
  • 顶部Material,建立一个Box,设置大小与位置,遮罩住的显示
  • 底部Material
  • Scale数值是根据Skew数值与屏幕中线比例数值共同决定的,0.5这个数值是Skew透视变量,需要不断调整,以达到透视效果
  • 目前不了解Skew的具体算法,但是可以通过调整Skew amount参数来决定透视度,调整MF_UI_Scale的Scale参数,来达到画面衔接问题

![在这里插入图片描述](https://img-blog.csdnimg.cn/bc5dc473ba3e4069be1cc8880b5fe0bb.png![在这里插入图片描述](https://file.jishuzhan.net/article/1725115863167668226/4696e2f6b6e273ddaa5a82a1bea8b8ba.webp)

  • 最后就是把这2个Shader放到UMG里面
相关推荐
小梦白35 分钟前
RPG59.玩家拾取物品三:可拾取物品的提示UI
ui·ue5
iFulling11 小时前
【计算机网络】第四章:网络层(上)
学习·计算机网络
香蕉可乐荷包蛋11 小时前
AI算法之图像识别与分类
人工智能·学习·算法
xiaoli232711 小时前
课题学习笔记1——文本问答与信息抽取关键技术研究论文阅读(用于无结构化文本问答的文本生成技术)
笔记·学习
人生游戏牛马NPC1号11 小时前
学习 Flutter (四):玩安卓项目实战 - 中
android·学习·flutter
LGGGGGQ13 小时前
嵌入式学习-PyTorch(7)-day23
人工智能·pytorch·学习
stm 学习ing13 小时前
Python暑期学习笔记3
笔记·python·学习
屁股割了还要学13 小时前
【C语言进阶】内存函数
c语言·开发语言·学习·算法·青少年编程
靴子学长13 小时前
Lotus-基于大模型的查询引擎 -开源学习整理
python·学习·自然语言处理
Littlewith14 小时前
Node.js:创建第一个应用
服务器·开发语言·后端·学习·node.js