UE4官方文档UI学习:1.UMG UI设计器快速入门

最近开始学习UE4,整理了一下UE4的UMG官方文档的主要内容。

目录:

UE4官方文档UI学习:1.UMG UI设计器快速入门
UE4官方文档UI学习:2.UMG 创建主菜单


所需模板:蓝图第一人称(Blueprint First Person)


本节内容

1.创建Widget Blueprint
2.使用Create Widget 节点,和Add to Viewport 节点,把刚刚创建Widget Blueprint,添加到游戏视口并填充整个屏幕。
3.蓝图中设置变量的减法
4.蓝图中设置branch的条件判断
5.使用Promote to Variable保存为变量
6.使用Widget Blueprint的Designer给UI赋值变量


创建Widget Blueprint

内容浏览器(Content Browser)-- 新增(Add New) 按钮 – 用户界面(User Interface)-- 控件蓝图(Widget Blueprint) 并将其命名为 HUD。
UE4官方文档UI学习:1.UMG UI设计器快速入门


修改蓝图FirstPersonCharacter

该蓝图的路径:Content/FirstPersonBP/Blueprints/FirstPersonCharacter
第一步:增加变量 Health, Energy, Ammo, MaxAmmo
第二步:修改Event BeginPlay节点
1.为Event BeginPlay节点,选择Create Widget 节点,Class设置为刚刚新建的HUD类
UE4官方文档UI学习:1.UMG UI设计器快速入门
2.Create Widget 节点的Return Value 引脚,选择 Promote to Variable节点,也即是将其提升为变量。得到一个Set节点,命名为"HUD Reference",目的在于游戏启动时创建刚刚的HUD(Widget Blueprint),并存为一个变量以便后续访问。例如,如果要在游戏暂停时隐藏HUD,可以通过该变量访问HUD。
3.Set 节点的输出引脚,选择Add to Viewport 节点。目的是把这个Widget Blueprint,添加到游戏视口并填充整个屏幕。
UE4官方文档UI学习:1.UMG UI设计器快速入门

第三步:在Jump脚本中实现Energy的扣除
1.按住Alt拖入Energy变量,用于读取值
2.按住Ctrl拖入Energy变量,用于设置值
3.中间连接float-float,设置为0.25,从而实现每次跳跃扣除0.25
UE4官方文档UI学习:1.UMG UI设计器快速入门

第四步:按下F键实现Health扣除
1.空白处右键输入anykey,input key选择F键
UE4官方文档UI学习:1.UMG UI设计器快速入门
2.float-float扣除Health0.25的逻辑操作同上。

第五步:Spawn Projectile脚本中扣除子弹数量,并限制弹药为0时无法射击
1.同上在Play Sound at Location 节点后进行int-int对ammo扣除1的操作
UE4官方文档UI学习:1.UMG UI设计器快速入门

2.在 InputAction Fire事件后,选择Branch 节点 , 拖入Ammo变量,连接到Integer>Integer,设置为>0,连到Branch的Condition
UE4官方文档UI学习:1.UMG UI设计器快速入门
第六步:编译并保存FirstPersonCharacter


修改HUD的Designer

调整如下:
UE4官方文档UI学习:1.UMG UI设计器快速入门


修改HUD的Graph

1.空白处,右键单击 并添加 Get Player Character 节点
2.Get Player Character 节点的Return Value引脚,选择Cast to FirstPersonCharacter,用于检查目前玩家使用的角色蓝图是否是否确实是First Person Character 蓝图。
3.Cast to FirstPersonCharacter节点的As First Person Character引脚,选择Promote to Variable,得到Set节点,命名为"My Character"
4.连接到事件construct
UE4官方文档UI学习:1.UMG UI设计器快速入门
编译并保存后,接下来就可以通过"My Character"访问到FirstPersonCharacter蓝图中的变量。


返回HUD的Designer给UI赋值变量

Health进度条绑定到MyCharacter的Health
Energy进度条绑定到MyCharacter的Energy
两个text分别绑定到MyCharacter的Ammo和Max Ammo
UE4官方文档UI学习:1.UMG UI设计器快速入门


效果如下:
UE4官方文档UI学习:1.UMG UI设计器快速入门


参考资料:文档链接:https://docs.unrealengine.com/zh-CN/Engine/UMG/QuickStart/index.html