首页 > 其他分享 >UE5 UMG UI编辑器工作流

UE5 UMG UI编辑器工作流

时间:2024-08-26 16:50:55浏览次数:9  
标签:控件 点击 编辑器 画布 UMG UI UE5 面板

创建UI控件

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

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

初识UMG UI 编辑器

双击UI控件蓝图打开UMG 设计器:
Pasted image 20240822114021
UMG主要由七个部分组成:
Pasted image 20240822115221

选项卡用途
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或者在展开面板下找到:鼠标左键按住并拖拽到画布区域或层级面板中松开即可。
Pasted image 20240822141729

之后你就可以在画布中放置你所需的其他控件了,比如文本、按钮等等。
Pasted image 20240822143147
你还可以重命名控件、拖动控件、调整大小,也可以通过细节面板修改相关信息。

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

显示UI界面

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

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

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

4.同样的操作将Create Widget节点的执行引脚连接到Add to Viewport节点,并将其返回值Return Value连接到Target。
Pasted image 20240822153013
5.点击左上角编译并保存,关闭该窗口,点击主编辑界面的运行按钮,这时就能在游戏视口上看到制作的UI界面了。
Pasted image 20240822153431

更新UI界面

标签:控件,点击,编辑器,画布,UMG,UI,UE5,面板
From: https://blog.csdn.net/qq_42437783/article/details/141568475

相关文章

  • UE5蓝图 离线实时语音转文字插件 教程 c/c++插件 毫秒级响应 比http更节约资源
    UE5蓝图实现离线实时语音转文字插件教程如何用UE5蓝图实现离线实时语音转文字,实时接收麦克风音频并且快速的转换成文字。那么我来分享一下ez2txt这个插件。bilibili使用教程效果展示:蓝图:只要启动麦克风就可以了,其他的繁琐步骤插件都封装好了。参数说明Rule1_m......
  • 网站提示411 Length Required:请求未包含Content-Length头怎么办
    当遇到“411LengthRequired”错误时,这意味着服务器要求客户端在请求中包含 Content-Length 头信息,以指示请求体的长度。这个错误通常出现在HTTP的POST、PUT和PATCH请求中,因为这些请求通常包含请求体。解决方案检查请求确认请求是否包含请求体。如果请求体为空,可......
  • 网站提示426 Upgrade Required:客户端需要升级协议才能完成请求怎么办
    当遇到“426UpgradeRequired”错误时,这意味着服务器要求客户端使用更高级的协议来完成请求。这种情况通常发生在客户端尝试使用较旧的协议版本时,而服务器只支持更新的协议版本。解决方案检查客户端协议版本确认客户端使用的协议版本。如果客户端使用的是HTTP/1.1而服务......
  • 网站提示428 Precondition Required:必须在请求中设置先决条件怎么办
    当遇到“428PreconditionRequired”错误时,这意味着服务器要求客户端在请求中包含特定的先决条件(precondition)。这种错误通常出现在客户端尝试执行某项操作时,服务器需要确认某些条件得到满足。解决方案检查请求头确认请求头中是否包含了服务器要求的先决条件。例如,服务器......
  • layui弹框在按钮的旁边
    想让弹框随着按钮位置变化而变化,通过offset设置<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><t......
  • layui中layer.open改变第一个按钮的样式
    (1)改变所有弹框第一个按钮颜色,在css中操作.layui-layer-btn.layui-layer-btn0{background-color:#d3d3d3;/*灰色背景*/color:#000;/*按钮文字颜色*/} (2)只改变一个弹框按钮颜色,在success中操作success:function(layero){//在弹框打开后,选择按钮......
  • 用ComfyUI打造一键换装神器,轻松搭建本地工作流!
    前言最近快手推出了一个一键换装的模型,还原度还挺高的,效果也很不错,于是自己上手用ComfyUI也搭建了一套这样的工作流,练练手,搭建出来之后发现效果也还挺不错的,分享给大家:我们先来看看快手实际演示的效果:通过上传一张模特图,然后选择一个想要替换的服装;就可以将服装替换到模......
  • vue element-ui表格table 表格动态 添加行、删除行、添加列、删除列 自定义表头
         vuetable表格动态添加行、删除行、添加列、删除列自定义表头; 增加一行、删除一行、添加一列、删除一列;每行带输入框input代码1、HTML部分:<template><divclass="app-container"><el-table:data="tableData"borderstyle="width:600px;margin-to......
  • 折腾 Quickwit,Rust 编写的分布式搜索引擎-官方教程
    快速上手在本快速入门指南中,我们将安装Quickwit,创建一个索引,添加文档,最后执行搜索查询。本指南中使用的所有Quickwit命令都在CLI参考文档中进行了记录。https://quickwit.io/docs/main-branch/reference/cli使用Quickwit安装程序安装QuickwitQuickwit安装程序会......
  • UE5学习笔记17-让人物的视线和鼠标移动时的方向一致,并且不让人物模型旋转,只改变视线方
    一、创建标准动画帧    1.我想让人物在装备武器后根据鼠标的移动方向改变人物的视线方向,并且人物模型不会改变朝向    2.我的动画中存在一个四个方向瞄准的动画,将左下,坐上,左转,右上,右下,右转,中上,中下,中,的动画的某一帧保留,具体流程如下(记得复制一份动画资源,可......