UE5 UI教程学习笔记

参考资料:https://item.taobao.com/item.htm?spm=a21n57.1.0.0.2b4f523cAV5i43&id=716635137219&ns=1&abbucket=15#detail
基础工程:https://download.csdn.net/download/qq_17523181/88559312

1. 介绍

  • 工程素材
    在这里插入图片描述

2. 创建Widget

  • UE5 UI系统的发展:开始使用Slate系统,比较难用,UMG提供了蓝图制作UI的方式,Widgets是UMG的一个方案
    在这里插入图片描述
  • Widgets的几个开始节点
    在这里插入图片描述
  • 创建Widget,鼠标右键,选择Widget blueprint,文件命名个人喜好UI_做前缀
    在这里插入图片描述
  • 添加UI,在场景蓝图中,选择Create Widget节点,生成一个变量,添加到Viewport中
    在这里插入图片描述
  • 删除UI,把场景蓝图的Input设置下,便于加入键盘操作
    在这里插入图片描述
    在这里插入图片描述
  • 删除
    在这里插入图片描述

3. 设计窗口介绍

  • 组件窗口,属性窗口,设计与蓝图切换,层级窗口 以及生成点击事件等操作
  • 跳转到资源管理器的按钮
    在这里插入图片描述
  • 设置固定分辨率
    在这里插入图片描述
  • 组件窗口
  • 层级窗口
  • 动画窗口
  • 属性窗口
  • 设计工作一般在些窗口完成

4. Designer组件

  • Border:为下面的子组件制作一个边框

  • Button:按钮组件

  • Check Box:点击框

  • Image:图片框

  • Progress Bar:进度条

  • RadialSlider:圆圈滚动条

  • Text 与 RichTextBlock:文本与富文本,可通过建立样式文件,为富文本提供样式标签支持

  • Slider:滚动条

  • Input:输入类组件

  • Mics:缩略内容

  • Primitive - Circular Throbber:加载
    在这里插入图片描述

  • Primitive - Spacer:两个对象间的空格

  • Primitive - Throbber:横形加载等待条
    在这里插入图片描述

  • Special Effects:Background Blur:背景模糊
    在这里插入图片描述

  • Panels:组件里Slot属性是可以设置对象的位置、对齐、锚点等功能

  • Panels - Canvas Panel:用于UI的分组

  • Panels - Grid Panel:表格布局

  • Panels - Horizontal Box:横向布局

  • Panels - Scale Box:用于大小各异的内容,缩放布局,特别适合图片

  • Panels - Scroll Box:滚动条

  • 组件的基础属性:
    (1)
    – Visibility 可以设置占位隐藏等
    – Render Opacity 用于透明
    – Render Transform 渲染的变形

  • widget蓝图作为组件,可以自定义各组件的样式
    在这里插入图片描述

页面制作上,先用Canvas进行分组,接着用Panel工具进行格式布局,最后使用内容组件


5. 动画

  • 快捷键Shift+Ctrl+Space,调出动画窗口
    *
  • 左边,需要建立一个动画Animation
  • 中间,建立轨道,或分层文件夹等
  • 右边,时间轴动画
  • 最后,需要在蓝图里启动
    在这里插入图片描述

6. widgets蓝图

  • 事件预构造 、事件构造、事件初始化
  • Pre Construct可以在编辑器里产生作用
  • Construct在运行时产生作用,每次被添加时都会运行
  • Initialized是只运行一次
    在这里插入图片描述
  • 蓝图的function,建议不要对外,是内部使用为主;对外可以统一提供事件;利用function增加可读性,或者类的继承
  • 宏可以使用delay、move component to这样的延迟函数,而function不行
  • 变量与Bind功能
  • 由组件提供的event各类事件

7. widgets蓝图调试

  • Widget Reflector用于调试,相对比较复杂,布局出问题了,可以考虑用下
  • Compiler Results,查看错误抛出
  • 查找用到变量的地方
    在这里插入图片描述
  • 把print的时间设置0,看到值的变化

8. widgets的操作技巧

  • 利用Wrap With,为一个层增加一个父层
    在这里插入图片描述
  • Replace With可以替换
  • 层上右键鼠标,有选项可以全部折叠或展开
  • 一些命名上的建议
    在这里插入图片描述
  • 规划UI子模块

教程最后制作一个Demo,这里不展开
整体教程结构比较清晰,也比较基础
对照教程把Demo做完会更有收获
也可以下载其他案例再对照看看,https://blog.csdn.net/qq_17523181/article/details/128679332?spm=1001.2014.3001.5501
祝福大家一切顺利

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

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

相关文章

那些被玩烂了的设计模式

单例模式 单例模式是指一个类在一个进程中只有一个实例对象(但也不一定,比如Spring中的Bean的单例是指在一个容器中是单例的) 单例模式创建分为饿汉式和懒汉式,总共大概有8种写法。但是在开源项目中使用最多的主要有两种写法&am…

electron实现截图的功能

Electron是一种跨平台的桌面应用程序开发框架,可以使用HTML、CSS和JavaScript等Web技术构建桌面应用程序。下面是一种使用Electron实现截图的简单方法: 安装Electron和截图库 首先,需要安装Electron和一个截图库,例如electron-sc…

替换jar文件中的jar文件中的class

文件格式 testjar.jar在ruoyi.jar中。 AssetServiceImpl.class在testjar.jar 查找testjar.jar路径 jar -tvf ruoyi.jar | grep testjar.jar 解析testjar.jar jar -xvf ruoyi.jar BOOT-INF/lib/testjar.jar 查找class文件路径 jar -tvf testjar.jar | grep AssetServiceImp…

ELK: logstash gork filter 多个模式(pattern)匹配规则语法和多行日志匹配设置

项目里用logstash分析日志,由于有多种模式(pattern)需要匹配,网上搜了很多示例,发现这些都是老的写法,都会报错,后来查阅了官方文档,才发现,新版本只支持新语法。 错误的…

【MISRA-C 2012】浓缩版解读

文章目录 1、前言2、简介2.1、如何看待MISRA-C 20122.2、准则(guidelines)里面的指示(Directive)和规则(Rule)2.3、准则(guidelines)的级别(Category) 3、若干重要的Directive和Rule3.1、指示(Directive)Dir 2.1(必要) 所有的源文件编译过程不得有编译错…

聚类笔记/sklearn笔记:Affinity Propagation亲和力传播

1 算法原理 1.1 基本思想 将全部数据点都当作潜在的聚类中心(称之为 exemplar )然后数据点两两之间连线构成一个网络( 相似度矩阵 )再通过网络中各条边的消息( responsibility 和 availability )传递计算出各样本的聚类中心。 1.2 主要概念 Examplar聚类中心similarity S(i…

Java Excel Poi 单元格内置的数据格式

位置 //在类 org.apache.poi.ss.usermodel.BuiltinFormats 中的私有成员变量_formats中 private static final String[] _formats new String[]{"General", "0", "0.00", "#,##0", "#,##0.00", "\"$\"#,##…

【ARM CoreLink 系列 3.2 -- CCI-400,CCI-500, CCI-550 差异】

文章目录 CCI-400 和 CCI-500 差异ARM CCI-400ARM CCI-500ARM CCI-550CCI-400 和 CCI-500 差异 ARM的 CCI(Cache Coherent Interconnect)系列产品是用于多核处理器之间的高性能缓存一致性互连。CCI-400 和 CCI-500 是该系列中的两种设计,它们旨在允许多个处理器核心和其他资…

TopNet-(CVPR2023)前背景图像合成

文章目录 摘要引言算法架构结构损失函数 实验数据集评估SOTA比较模型是否过拟合到修复区域泛化到真实图片消融实验 讨论及结论限制 参考文献 摘要 作者调研自动放置目标到背景进行图像合成的问题。提供背景图、分割的目标,训练模型预测合理放置信息(位置…

JavaScript文档加载和文档准备的区别

你可能已经听说过JavaScript中的“文档加载”和“文档准备”这两个术语。虽然它们听起来很相似,但它们实际上有一些重要的区别。在本文中,我们将深入探讨这两个概念的区别,以及它们在实际编码中的应用。 引言 在开始讨论JS文档加载和文档准备…

批量添加PPT备注

我一直都觉得,用python高效办公,是件没必要的事。。。 但直到最近写课做PPT,做了80多页PPT,要把每一页PPT的备注粘贴进去时 我觉得,有什么关系呢,一页一页粘 但是粘到5页,我感觉ctlc\v频率有点儿…

程序员接单,宝藏好平台抄底攻略清单!五大平台精选。

前阵子“双十一”购物节狂欢促销,各种好货清单席卷而来。 程序员购不购物我不知道,但是这个兼职、接单清单相信你一定用得着。 搜罗海量信息,整理大量数据与评价,挖出了5个宝藏平台,绝对个个精选,保证量大…

图片转换成pdf格式的软件ABBYY16

ABBYY PDF这款提供多种图像处理选项,可提高源图像的质量,便于准确地识别光学字符。我们扫描纸质文档或从图像文件创建 PDF 时,务必选择合适的图像处理选项。而在ABBYY PDF 中包含下列图像处理选项。 识别文本 — 选择此选项会将文本层放在图…

(保姆级教程)Mysql中索引、触发器、存储过程、存储函数的概念、作用,以及如何使用索引、存储过程,代码操作演示

讲解 MySQL 中索引、触发器、存储过程、存储函数的使用 文章目录 1. 索引1.1 索引的分类1.2 索引的设计原则1.3 如何使用(create index) 2. 触发器2.1 触发器的分类2.2 如何使用(create trigger) 3. 存储过程3.1 如何使用&#xf…

SpringBoot调用HTTP接口

1. RestTemplate 首先引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency> 编写配置类 Configuration public class RestTemplateConfig {Beanpublic Re…

Git拉取远程仓库代码覆盖本地,也就是放弃本地修改

git撤销本地 、强制拉取远程代码覆盖本地-CSDN博客 说的最多的是用&#xff1a;git fetch --all 但是亲测是无效的&#xff0c;并不能将本地不存在但远程仓库存在的文件取回来。就是git fetch 项目地址&#xff0c;也是没用的&#xff01; 就算是重新pull整个项目&#xff0…

Django中间件

目录 一.介绍 1.什么是Django中间件 2.作用&#xff1a; 3.示例 二.Django请求生命周期流程图 三.Django中间件是Django的门户 四.中间件方法 1.必须掌握的中间件方法 &#xff08;1&#xff09;process_request: 示例&#xff1a; 2.需要了解的中间件方法 &#x…

新生儿散光:原因、科普和注意事项

引言&#xff1a; 散光是一种常见的眼睛问题&#xff0c;虽然在新生儿时期相对较少见&#xff0c;但了解其原因、科普相关知识&#xff0c;并提供一些建议的注意事项&#xff0c;对于婴儿的视力健康至关重要。本文将深入探讨新生儿散光的原因、相关科普知识&#xff0c;并为父…

大厂前沿技术导航

百度Geek说 - 知乎 腾讯技术 - 知乎 美团技术团队

YaRN方法:无需微调,高效扩展语言模型上下文窗口/蚂蚁集团与浙大发布原生安全框架v1.0,引领企业网络安全新时代 |魔法半周报

我有魔法✨为你劈开信息大海❗ 高效获取AIGC的热门事件&#x1f525;&#xff0c;更新AIGC的最新动态&#xff0c;生成相应的魔法简报&#xff0c;节省阅读时间&#x1f47b; &#x1f525;资讯预览 YaRN方法&#xff1a;无需微调&#xff0c;高效扩展语言模型上下文窗口 蚂蚁…