UE5 UMG UI编辑器工作流

创建UI控件

1.在内容菜单(Content Browser)面板,点击添加(Add)或者右键空白处,依次选择用户界面(User Interface)/ 控件蓝图(Widget Blueprint)。

2.在弹出来的窗口中,点击User Widget即可创建一个UI控件,可以自定义命名(规范一点可以命名为WBP_XXX)。

初识UMG UI 编辑器

双击UI控件蓝图打开UMG 设计器:

UMG主要由七个部分组成:

选项卡 用途
1.设计器(Designer) 设计UI布局的画布,用于搭建并显示UI,可以摆放UI在屏幕中的位置
2.调色板(Palette) 可供使用的控件列表,引擎自带的或用户自定义的控件模版
3.细节面板(Details) 控件的属性,包括旋转变换属性等
4.层级面板(Hierarchy) 当前创建的所有控件列表都显示在这里,UI之间的层级关系
5.动画面板(Animations) 为UI创建的动画都在这里显示
6.时间轴(Timeline) 控件动画的属性和关键帧,可以制作帧动画
7.编辑器模式(Editor Mode) 有设计器和图表两种编辑模式切换,图表模式与蓝图编辑器具有几乎相同的功能。
复制代码
tip: 画布上的操作,通过按住右键并移动鼠标即可上下左右平移画布,通过鼠标滚轮滑动可进行缩放画布。

搭建UI界面

在进行UI 设计之前,你应该先往画布中放置一个Canvas Panel作为根物体。

可以在调色板里面搜索Canvas Panel或者在展开面板下找到:鼠标左键按住并拖拽到画布区域或层级面板中松开即可。

之后你就可以在画布中放置你所需的其他控件了,比如文本、按钮等等。

你还可以重命名控件、拖动控件、调整大小,也可以通过细节面板修改相关信息。

在设计好UI 界面之后,记得点击编辑器左上角的编译并保存。

显示UI界面

当你很高兴的运行游戏时却发现看不见你刚才设计的UI,这是因为要将UI显示到Game视口中,还要做一点额外的蓝图操作。

1.在关卡编辑器主工具栏处依次点击蓝图/打开关卡蓝图 。

2.右键空白处搜索并添加Event BeginPlay 节点

3.将鼠标放置到Event BeginPlay节点的执行引脚上,按住左键并拖拽到其余空白处松开并搜索Create Widget 节点,点击Class参数下拉列表,搜索我们要创建的UI实例"WBP_HUD"。

4.同样的操作将Create Widget节点的执行引脚连接到Add to Viewport 节点,并将其返回值Return Value连接到Target。

5.点击左上角编译并保存,关闭该窗口,点击主编辑界面的运行按钮,这时就能在游戏视口上看到制作的UI界面了。

更新UI界面

相关推荐
传奇开心果编程1 小时前
【SwiftUI提高练中学】第13课 实时活动与灵动岛:ActivityKit 实战
学习·ui·ios·swiftui·swift
phltxy6 小时前
C 语言动态内存管理:从申请空间到安全释放
c语言·开发语言·ui
郝学胜-神的一滴8 小时前
C++ Templates 01:拨开迷雾,读懂C++模板经典著作
开发语言·c++·程序人生·游戏·游戏引擎·软件构建
淡海水10 小时前
02-01-原理篇-Mark-Sweep与变种算法
算法·unity·c#·游戏引擎·.net·gc
李少兄12 小时前
文档排版与数据处理:阿拉伯数字与罗马数字的转换
ui·xhtml·wps
狗凯之家源码网12 小时前
网址导航系统源码评测:个性 UI 与轻量化架构实战
ui·架构·网址导航系统
传奇开心果编程13 小时前
【SwiftUI入门练中学】第17课 通知与后台任务
学习·ui·ios·swiftui·swift
wshzd1 天前
LLM之Agent(107)|DeepSeek-Harness(十五)流式输出管道:从 StreamChunk 到 UI
人工智能·ui
我命由我123451 天前
Photoshop - Photoshop 快速共享作品
学习·ui·职场和发展·求职招聘·职场发展·学习方法·photoshop
我命由我123451 天前
Photoshop - 将Photoshop图像置入其他应用程序
学习·ui·职场和发展·求职招聘·职场发展·学习方法·photoshop