当前位置: 首页 > news >正文

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

相关文章:

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_from333.337.search-card.all.click&vd_source707ec8983cc32e6e065d5496a7f79ee6 视…...

oracle删除重复的数据

去除重复数据: group by 对要比对的字段进行查询是否重复 CREATE TABLE 临时表 AS (select 字段1,字段2,count(*) from 表名 group by 字段1,字段2 having count(*) > 1) 上面这句话就是建立了临时表,并将查询到的数据插入其中。 下面就可以进行…...

Python中的并发编程是什么,如何使用Python进行并发编程?

Python中的并发编程是指使用多线程或多进程来同时执行多个任务。这样可以提高程序的执行效率,特别是在处理I/O密集型任务时。Python提供了多种方式来实现并发编程,如threading模块和multiprocessing模块。 使用Python进行并发编程的方法如下&#xff1a…...

【LeetCode】136. 只出现一次的数字

136. 只出现一次的数字 难度:简单 题目 给你一个 非空 整数数组 nums ,除了某个元素只出现一次以外,其余每个元素均出现两次。找出那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法来解决此问题,且该算法只使用…...

HTTP服务器——tomcat的安装和使用

文章目录 前言下载tomcattomcat 文件bin 文件夹conf 文件lib 文件log 文件temp 文件webapps 文件work 目录 如何使用 tomcat 前言 前面我们已经学习了应用层协议 HTTP 协议和 HTTP 的改进版——HTTPS,这些协议是我们在写与服务器相关的代码的时候息息相关的&#x…...

代码随想录Day45 动态规划13 LeetCode T1143最长公共子序列 T1135 不相交的线 T53最大子数组和

LeetCode T1143 最长公共子序列 题目链接:1143. 最长公共子序列 - 力扣(LeetCode) 题目思路: 动规五部曲分析 1.确定dp数组的含义 这里dp数组的含义是结尾分别为i-1,j-1的text1和text2的最长公共子序列长度 至于为什么是i-1,j-1我之前已经说过了,这里再…...

写了个监控 ElasticSearch 进程异常的脚本!

服务器配置免密钥环境准备: 配置免密钥前,需要在服务器的 hosts 文件中配置目标主机名称与 IP 对应关系。 vim /etc/hosts IP1 hostname1 IP2 hostname2 ...... 将 mianmiyaojiaoben.zip 安装包解压在当前目录下 cd /usr/local/jiaoben unzip mianmi…...

第三篇 基于JSP 技术的网上购书系统—— 数据库系统设计(网上商城、仿淘宝、当当、亚马逊)

目录 1.逻辑关系设计 2.物理设计 2.1管理员表 2.2留言表 2.3会员登录表 2.4会员表 2.5订单表 2.6订单商品表 2.7产品表 2.8产品货架表 2.9收藏表 2.10类别表 2.11新闻表 数据库系统是用来保存数据的软件系统,当今比较流行的数据库系统,如 MS…...

电脑检测温度软件有哪些?

环境: Win10 专业版 问题描述: 电脑检测温度软件有哪些? 解决方案: 有很多电脑检测温度的软件可供选择,以下是一些常用的电脑温度监测工具: HWMonitor:一款免费的硬件监控软件&#xff0…...

设计模式 -- 单例模式(Singleton Pattern)

单例模式:最简单的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。这种模式涉及到一个单一的类,该类负责创建自己的对象,同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式…...

ubuntu给终端加代理服务器

ubuntu给终端加代理 访问google.com 是否可以访问通 curl https://www.google.com如果访问不通说明代理服务器没有配置好。 使用 gedit ~/.bashrc 打开网络配置 gedit ~/.bashrc找到文章的最后添加代理 export http_proxyhttp://127.0.0.1:7890 export https_proxyhttp://…...

centos 6.10 安装 readline 6.2.0

下载地址 解压文件 cd readline-6.2 ./configure -prefix /usr/local/readline-6.2 make && make install安装完成...

IDEA 2023搭建 SpringMVC +FreeMarker+JDBC

1.IDEA的版本,目前最新是2023,要选择旗舰版。笔者曾选择社区版,发现少了很多功能。只能重新安装。 2.安装好以后的第1件事,是设置Maven,并将下载地址改为淘定站,参照这篇一次包会——最新IDEA配置Maven指南…...

RabbitMQ传统数据持久化和Lazy queue的区别

问题引出: 在了解这个问题前我们需要一些前置知识: 关于MQ可靠性,在默认情况下,RabbitMQ会将接收到的信息保存在内存中以降低消息收发的延迟。这样会导致两个问题: 一旦MQ宕机,内存中的信息会丢失 内存空…...

docker部署lnmp环境

文章目录 前期准备:一、部署mysql1.1 获取 Mysql 5.7.22 镜像1.2 启动mysql容器 二、部署php2.1 获取php 7.2镜像2.2 启动php 容器2.3 php的扩展安装 三、部署nginx3.1 获取nginx:1.14镜像3.2 启动nginx容器3.3 编写nginx虚拟主机配置文件,使其支持php3.…...

数据结构 | 带头双向循环链表专题

数据结构 | 带头双向循环链表专题 前言 前面我们学了单链表,我们这次来看一个专题带头的双向循环链表~~ 文章目录 数据结构 | 带头双向循环链表专题前言带头双向循环链表的结构实现双向链表头文件的定义创建节点哨兵位初始化尾插尾删头插头删打印查找指定位置前插入…...

Redis使用Pipeline(管道)批量处理

Redis 批量处理 在开发中,有时需要对Redis 进行大批量的处理。 比如Redis批量查询多个Hash。如果是在for循环中逐个查询,那性能会很差。 这时,可以使用 Pipeline (管道)。 Pipeline (管道) Pipeline (管道) 可以一次性发送多条命令并在执…...

Linux中at命令添加一次性任务

1、工作原理 功能:在某个时间点,执行一次命令。 特点:任务是用户隔离的。 条件:必须要保证atd进程存在。 ps -ef |grep atd 原理:atd进程循环遍历队列里的任务,有任务,且到达执行时间&#xff…...

交换机基础知识之安全配置

交换机在网络基础设施中扮演着重要角色,它促进了设备之间数据包的流动。正因此,采取适当的安全措施来保护网络免受未经授权的访问和潜在攻击至关重要。本文将全面解读交换机基础安全配置知识,并提供实践方案,以保证安全的网络环境…...

Netty入门指南之Reactor模型

作者简介:☕️大家好,我是Aomsir,一个爱折腾的开发者! 个人主页:Aomsir_Spring5应用专栏,Netty应用专栏,RPC应用专栏-CSDN博客 当前专栏:Netty应用专栏_Aomsir的博客-CSDN博客 文章目录 参考文献前言单线程…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...

大话软工笔记—需求分析概述

需求分析,就是要对需求调研收集到的资料信息逐个地进行拆分、研究,从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要,后续设计的依据主要来自于需求分析的成果,包括: 项目的目的…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结: 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析: 实际业务去理解体会统一注…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章,二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑: 🔄 一、起源与初创期:Swagger的诞生(2010-2014) 核心…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...

书籍“之“字形打印矩阵(8)0609

题目 给定一个矩阵matrix,按照"之"字形的方式打印这个矩阵,例如: 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为:1,…...

java高级——高阶函数、如何定义一个函数式接口类似stream流的filter

java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用(Math::max) 2 函数接口…...

Vue 3 + WebSocket 实战:公司通知实时推送功能详解

📢 Vue 3 WebSocket 实战:公司通知实时推送功能详解 📌 收藏 点赞 关注,项目中要用到推送功能时就不怕找不到了! 实时通知是企业系统中常见的功能,比如:管理员发布通知后,所有用户…...

工厂方法模式和抽象工厂方法模式的battle

1.案例直接上手 在这个案例里面,我们会实现这个普通的工厂方法,并且对比这个普通工厂方法和我们直接创建对象的差别在哪里,为什么需要一个工厂: 下面的这个是我们的这个案例里面涉及到的接口和对应的实现类: 两个发…...