当前位置: 首页 > 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博客 文章目录 参考文献前言单线程…...

华为云AI开发平台ModelArts

华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用,操作系统:Ubuntu24.04,Neofj版本:2025.04.0。 Apt安装 Neofj可以进行官网安装:Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇,是在之前两篇博客的基础上展开,主要介绍如何在操作界面中创建和拖动物体,这篇博客跟随的视频链接如下: B 站视频:s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

A2A JS SDK 完整教程:快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...