UE5 UI教程学习笔记_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：滚动条

• 组件的基础属性：
  
  – 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
祝福大家一切顺利