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. 介绍

  • 工程素材
    UE5 UI教程学习笔记_第1张图片

2. 创建Widget

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

3. 设计窗口介绍

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

4. Designer组件

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

  • Button:按钮组件

  • Check Box:点击框

  • Image:图片框

  • Progress Bar:进度条

  • RadialSlider:圆圈滚动条

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

  • Slider:滚动条

  • Input:输入类组件

  • Mics:缩略内容

  • Primitive - Circular Throbber:加载
    UE5 UI教程学习笔记_第8张图片

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

  • Primitive - Throbber:横形加载等待条
    UE5 UI教程学习笔记_第9张图片

  • Special Effects:Background Blur:背景模糊
    UE5 UI教程学习笔记_第10张图片

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

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

  • Panels - Grid Panel:表格布局

  • Panels - Horizontal Box:横向布局

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

  • Panels - Scroll Box:滚动条

  • 组件的基础属性:
    UE5 UI教程学习笔记_第11张图片
    – Visibility 可以设置占位隐藏等
    – Render Opacity 用于透明
    – Render Transform 渲染的变形

  • widget蓝图作为组件,可以自定义各组件的样式
    UE5 UI教程学习笔记_第12张图片

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


5. 动画

  • 快捷键Shift+Ctrl+Space,调出动画窗口
    UE5 UI教程学习笔记_第13张图片
  • 左边,需要建立一个动画Animation
  • 中间,建立轨道,或分层文件夹等
  • 右边,时间轴动画
  • 最后,需要在蓝图里启动
    UE5 UI教程学习笔记_第14张图片

6. widgets蓝图

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

7. widgets蓝图调试

  • Widget Reflector用于调试,相对比较复杂,布局出问题了,可以考虑用下
  • Compiler Results,查看错误抛出
  • 查找用到变量的地方
    UE5 UI教程学习笔记_第16张图片
  • 把print的时间设置0,看到值的变化

8. widgets的操作技巧

  • 利用Wrap With,为一个层增加一个父层
    UE5 UI教程学习笔记_第17张图片
  • Replace With可以替换
  • 层上右键鼠标,有选项可以全部折叠或展开
  • 一些命名上的建议
    UE5 UI教程学习笔记_第18张图片
  • 规划UI子模块

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

你可能感兴趣的:(UE5,ue5,ui,笔记)