虚幻引擎(UE4) UMG 创建菜单

查看详细文档地址

UMG

UMG是Unreal Motion Graphics UI Designer的缩写,它是一个可视化的UI制作工具。可以用于创建UI元素(例如游戏内的HUD,菜单或者其他能和角色交互的信息)。UMG是核心是Widgets,它采用一系列预先写好的函数来构建你的用户界面(像按钮、复选框、进度条、滑动条等)。这些Widget在专门的蓝图中编辑,提供了2种选项卡:一个可视化布局的设计界面和一个Widget相关属性功能的图表界面。

 

创建UMG

1 .在资源窗口中点击Add New 或者在空白处鼠标右键->UserInterface->Widget Blueprint。

RequiredSetup_1.1.png

2. 将创建的UMG命名为MainMenu,并双击打开:

3. Palette视图中列举了可以使用的UI部件,直接鼠标选中拖到下面的Hierarchy窗口中,这里已经添加好了几个部件,层级结构如下图:

Hierarchy1.png

       层级机构视图中画布上包含了一张图片,一个竖直的列表,3个按钮。当部件较多时,可以利用搜索功能快速查找对应的部件。

4. 选中Vertical Box复制粘贴,创建一个新的部件副本

Hierarchy2.png

5. 在新的部件副本中再额外添加一个按钮

Hierarchy3.png

6. 选中第一个Vertical Box,重命名为MainMenu,勾选复选框Is Variable,设置渲染层级ZOrder为1。

CreatingAMenu_3.6.png

        在这一步中我们重命名了部件名称,并将其设置为变量,还设置了渲染层级。这样做的好处是我们可以利用函数获取该变量,便于我们对其进行逻辑处理。

7. 选中其他Vertical Box,并对其重命名,如下:

Hierarchy5.png

8. 设置对应的文本信息

CreatingAMenu_3.9.png

9.按住Ctrl键选择多个按钮,设置鼠标光标悬停在按钮上时的颜色,并设置按钮布局类型为FILL(填充)

CreatingAMenu_3.10.png

10. 选中画布上添加的图片Image_0,在Detail界面设置图片资源

CreatingAMenu_3.11.png

       如果需要使用原图片的尺寸,请将Size To Content选项勾上。画布中就显示了当前的图片:

Hierarchy9.png

11. UI元素的布局可以在如下的选项卡中设置:

CreatingAMenu_3.13.png

12. 选中两个菜单列表,设置如下图,使两个菜单在不同尺寸的屏幕上都能停靠(横向靠左,纵向靠中)。

CreatingAMenu_3.14.png

13. 选择OptionMenu菜单,设置可见性Visibility为Hidden(我们希望默认情况下这个菜单不显示)。

CreatingAMenu_3.15.png

14. 你可以调整一些文字大小和对齐方式

CreatingAMenu_3.17.png

15.调整位置和尺寸,默认只显示一个菜单。

Hierarchy13.png

到此可视化的界面布局已经完成。接下来需要添加蓝图脚本将UMG添加进游戏中。

蓝图脚本

1. 添加按钮绑定

ScriptingMainMenu_4.2.png

2. 在打开关卡蓝图

ScriptingMainMenu_4.14.png

3.在事件图表中,游戏开始时,调用蓝图节点(CreateWidget)将UMG添加到游戏视图中:

4. 开始游戏

相关链接

可视化蓝图脚本

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

呦呦鹿鸣.

你的打赏是给予我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值