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在这里插入图片描述

  • 最后就是把这2个Shader放到UMG里面
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/179257.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

webstorm/idea配置leetcode刷题

File -> settings -> Plugins -> 搜索leetcode 安装插件(截图显示我已经安装过了),安装完成后点击OK操作,在编辑器四个边角就会出现一个leetcode的插件 File -> settings -> Tools-> Leetcode plugin 点击…

Vue3问题:如何实现拼图验证+邮箱登录功能?前后端!

前端功能问题系列文章,点击上方合集↑ 序言 大家好,我是大澈! 本文约3500字,整篇阅读大约需要5分钟。 本文主要内容分三部分,第一部分是需求分析,第二部分是实现步骤,第三部分是问题详解。 …

C语言判断闰年(ZZULIOJ1028: I love 闰年!)

题目描述 根据一个年份,判断是否是闰年。 输入:输入为一个整数,表示一个年份。 输出:如果是闰年,输出"Yes",否则输出"No"。输出单独占一行。 样例输入 Copy 2012 样例输出 Copy Yes 分…

MySQL(18):MySQL8.0的其它新特性

MySQL从5.7版本直接跳跃发布了8.0版本。 MySQL8.0 新增特征 1.更简便的NoSQL支持。 NoSQL泛指非关系型数据库和数据存储。随着互联网平台的规模飞速发展,传统的关系型数据库已经越来越不能满足需求。从5.6版本开始,MySQL就开始支持简单的NoSQL存储功能…

python爬虫 之 JavaScript 简单基础

文章目录 在网页使用JavaScript 代码的方式常用的JavaScript 事件常用的JavaScript 对象 在网页使用JavaScript 代码的方式 在网页中使用 JavaScript 代码的方式主要有三种: 内联方式(Inline): 在 HTML 文件中直接嵌入 JavaScrip…

使用 MATLAB HDL Coder 和 FPGA 快速实现自动白平衡(AWB)

使用 MATLAB HDL Coder 和 FPGA 快速实现自动白平衡(AWB) 在此项目中,我们将使用 MATLAB Simulink 和 HDL 编码器创建自定义 IP -- AWB。 MATLAB 设计 自动白平衡模块的设计是使用 HDL Coder 在 MATLAB 和 Simulink 中创建的。HDL Coder能够生…

ubuntu设置脚本开机自启动

rc-local.service flexmitd1:~$ cd /lib/systemd/system/ flexmitd1:/lib/systemd/system$ ls |grep rc-local.service rc-local.service rc-local.service.d flexmitd1:/lib/systemd/system$ pwd /lib/systemd/system flexmitd1:/lib/systemd/system$确保有rc-local.service文…

宝藏来袭,在线制作电子宣传册大公开

随着科技的进步,电子宣传册已经成为了企业宣传和推广的重要工具之一。它们不仅易于制作和更新,而且可以轻松地在网络上传播,让更多的人了解您的品牌和产品。 现在,给大家推荐一款FLBOOK在线制作电子杂志平台。无需任何专业的设计技…

kubectl 本地远程链接k8s多个集群,远程管控多集群,查看日志 部署服务(windows版)

文章目录 一、前言二、windows上安装kubectl和mobaxterm2.1 准备安装包2.2 安装kubectl2.3 链接k8s集群2.4 查看某一个pod的容器日志2.5 切换context 上下文配置,实现在多个k8s集群间动态切换 一、前言 现如今是一个万物皆上云 的时代,各种云层出不穷&am…

四川芸鹰蓬飞商务信息咨询有限公司是可靠的选择

随着电商行业的快速发展,越来越多的消费者选择通过线上平台购物。在这个大背景下,四川芸鹰蓬飞商务信息咨询有限公司以其独特的抖音电商服务,为广大消费者带来了更加便捷、安全的购物体验。 一、服务的优势 专业团队:公司拥有一支…

零基础学会酒店预订小程序制作

" 如果你想要开发一个酒店预订小程序,以下是一个简单的步骤指南,帮助你通过第三方制作平台/工具如乔拓云网来实现这一目标: 1. 找一个合适的第三方制作平台/工具: 在如今的市场上,有许多第三方制作平台/工具可供选…

JavaEE进阶学习:Spring核心和设计思想

Spring 是什么 我们通常所说的 Spring 指的是 Spring Framework(Spring 框架),它是⼀个开源框架,有着活跃而庞大的社区,这就是它之所以能长久不衰的原因。Spring 支持广泛的应用场景,它可以让 Java 企业级…