UnrealEngine蓝图进阶学习笔记（八）：创建UI界面及引用

发现虽然UE支持中文无比方便，但在搜索组件时搜索widget反而搜索不出，只能手打控件组件来搜索；

一、为钥匙的破解添加进度条UI显示

1.创建破解进度条UI

在蓝图文件夹新建widgets文件夹，创建”用户界面-控件蓝图“WB_CrackProgress；

编辑，将通用中的进度条拖拽至层级窗口画布画板中名为CrackProgressBar，瞄点选择正中，x、y轴归零，对齐改为（0.5，0.5），尺寸（70，10）；背景图绘制为无；

2.钥匙蓝图中获取UI控件

在组件中搜索控件组件命名为CrackProgressBarWidget，编辑位置高度为50，右侧设置用户界面的控制类选为以上UI；

用户界面的空间选项为场景时该UI仅正对着摄像机才能显示出全景，设置为屏幕时则一直正对摄像机；

右上角编辑图表：创建类型为key的EnterKeyRef变量，

编辑钥匙的事件蓝图，拖拽控件引脚创建GetUserWidgetObject（创建用户控件变量）节点，

3.设置UI绑定事件

编辑UI控件的设计器设置，点击添加绑定（自定创建函数）；

编辑蓝图，设置进度条；

此时测试项目，破解钥匙时将有进度显示；

二、俯视角射击场景主UI的设计

4.创建生命值UI

创建控件蓝图WB_ShootSpider_MainUI，在面板下拉项中选中覆层于画布面板下（位置越靠上则最先被渲染位于最底层），瞄点置于正下方，位置归零，对齐为（0.5，1.25），勾选大小到内容以适配图片大小；

添加图片命名为HUDBackground，设置背景图为hud_Icon，渲染变换设置中缩放改为（1，-1）；大小改为（762.5，206.25）

添加进度条控件命名为HealthProgressBar，居中，填充图为Health贴图，条填充类型为从底到顶；改变渲染变化如图：

添加文本控件命名为HealthText，编辑水平垂直居中与字号，
添加进度条为SprintProgressBar，填充为FireBar；

复制进度条为FireProgressBar；

图层调节如下：

5.创建波数UI

拖拽新文本图层WaveText

拖拽图片图层EnterKeyIcon；

三、暂停菜单与失败菜单的设计

6.创建暂停菜单

创建WB_PauseMenu控件蓝图；

添加背景模式图层，编辑瞄点按住Ctrl键选择全屏；

7.复制出失败菜单

复制以上蓝图，重命名WB_FailMenu

四、导入并设置自定义字体

8.自定义字体

创建Fonts文件夹，将外部字体资源导入UE，双击Font文件启用编辑，可在默认字体族系中编辑需引用的字体样式，编辑保存后可在其他控件蓝图中引用；

五、使主UI界面同步显示游戏数据

9.同步游戏参数

编辑游戏模式蓝图事件图表，新建createWidget（构建控件）节点加载UI控件

编辑MainUI控件蓝图图表，新建变量GameModeRef（GameMode类型实例）和PlayerRef（player实例），均勾选可编辑实例和生成时公开）；

设置好参数引用后在游戏模式中刷新节点后编辑，创建AddToViewport（添加到窗口）节点；通过在控件图表中引用参数进而同步游戏数据；

10.绑定游戏数据

为Wave文本控件内容绑定函数

为生命值文本控件内容绑定函数

为生命值进度条创建绑定

为开火进度条绑定函数

为冲刺进度条绑定函数

11.绑定钥匙状态

将钥匙UI可见性设为隐藏；在图层中点灭眼睛只在设计中生效，不隐藏游戏UI

在控件蓝图图表中创建变量IsEnterKeyAppear（布尔）,IsEnterKeyDead（布尔）；

在游戏模式图表中创建UI控件节点的返回值提升至变量MainUI;

在钥匙图表中获取MainUI控件设置钥匙存在状态变量（注意勾选）；

设置钥匙死亡后该钥匙死亡状态变量（注意勾选）；

12.绑定UI可见状态

在控件蓝图中对钥匙UI可见性进行绑定

对钥匙UI颜色透明度进行绑定（死亡后UI为红，否则为白）

此时测试项目，生命值，冲刺时间射击时间均随游戏进度而改变，且钥匙出现时显示出钥匙UI，钥匙死亡后UI变为红色；

六、创建显示暂停菜单与InoutMode简介

13.为按钮绑定点击事件

编辑图表，创建GetCurrentLevleName（获取当前关卡名）节点和OpenLevel（打开关卡）节点

创建QuitGame（退出游戏）节点；将以上两个事件复制至FailedMenu图表中；

14.添加按键映射

项目设置中添加键盘P键和手柄特殊键右键映射；

在玩家蓝图中搜索创建InputActionPause事件，暂停功能需要游戏模式实现控制，故在游戏模式蓝图中创建两个自定义事件PauseGame和UnpauseGame；

在玩家蓝图中编辑游戏模式生成游戏模式引用变量；

关于FlipFlop（流程控制）节点，其功能为在两个函数间一次循环触发，由于此处暂停和取消暂停非一个按键（取消为鼠标按钮）故不使用；

15.设置暂停功能

编辑游戏模式蓝图；

此时测试发现游戏暂停后所有的按键不予触发；需要勾选玩家输入事件中暂停时执行；此后游戏顺利实现P键暂停与取消功能；

七、完善暂停菜单的功能与创建死亡菜单

16.绑定暂停UI

编辑暂停UI控件蓝图图表，新建变量GameModeRef指定相应类型，勾选实例可编辑和生成时公开；

编辑游戏模式蓝图，创建Construst（从类构建对象）节点，类选择暂停菜单，提升于PauseUI变量；

设置暂停事件，移除原UI添加新UI，通过玩家控制器获取显示或隐藏光标（注意勾选）；其中ShowMouseCursor节点只能通过控制器调用；若不启用该节点，测试游戏暂停时鼠标光标并不显示；

新建SetInputModeGameAndUI（设置输入模式游戏和UI）节点（让焦点聚焦于暂停UI面板，以便鼠标点击实效），实现输入模式的转换；

取消暂停时则隐藏面板并设置为仅输入模式游戏（此时禁用UI）；

在切入暂停面板使用的设置输入模式游戏和UI节点，此处设为仅游戏模式的转换将禁用键盘操作，死亡后 也能实现游戏P键的禁用，但重开时键盘的禁用仍未解除，新一局游戏将无法游玩；

原因在于重开函数中的Openlevel打开当前关卡时将默认保留全局的InputMode模式；故需要设置输入模式游戏和UI节点；

此时测试的项目发现bug为开火时暂停开火音效将一直播放，且开火与冲刺进度条将一直积攒；且低血量时暂停将播放完音效再停止；

17.改进玩家的暂停功能

18.添加失败菜单

编辑游戏模式蓝图，编辑初始化事件，创建失败菜单的UI变量以供玩家调用；创建Construst（从类构建对象）节点，类选择失败菜单，提升于PauseUI变量；

编辑死亡功能，在绑定死亡事件分发器后（复制粘贴修改）调用失败菜单

此时测试项目，玩家死亡后仍可进行暂停菜单的调用；编辑玩家图表的暂停事件，在暂停键后添加玩家死亡判断宏，设置为未死亡时才可启用暂停菜单；

八、添加背景音乐

19.初始化背景音乐并调节暂停

在游戏模式蓝图中新建SpawnSound2D节点挂载，音效选择ShooterGame_Music_Cue；考虑到暂停功能对音效无用，将该音效提升成变量BackGroundSound；

在暂停功能后添加音频的暂停；（可考虑失败菜单调用时也暂停播放）

至此项目都能成功运行，遗留下钥匙第一关即出现的bug；检查排除后发现该钥匙一直放置于场景中，故一直触发钥匙UI；

到此该UE项目告一段落，贺；

总结：

(1).控件蓝图编辑UI

在控件蓝图中我们可以在平面上设计屏幕中各种UI，图层类似于安卓Android Studio的编辑，加上PS中图层知识的混合；对于其中各种控件属性可以绑定自定义函数或增加点击事件增加如拼接文字，变换进度，暂停等功能；

可在游戏模式蓝图中创建控件选择该控件蓝图类并显示在视口；

在钥匙蓝图中获取游戏模式并转换后可Get到游戏模式中的变量并存储在本地，比如获取钥匙控件，钥匙触发死亡时则通过set本地参数传参通知UI控件蓝图其死亡状态；在控件蓝图中则通过此布尔参数决定其可见性或颜色；

在控件蓝图中创建变量，勾选可编辑实例和生成时公开后可与其他蓝图中调用；

(2).字体导入与设计

将外部字体资源导入UE，双击Font文件启用编辑，可在默认字体族系中编辑需引用的字体样式，编辑保存后可在其他控件蓝图中引用；

(3).定义特殊按键

创建映射；在玩家蓝图中搜索创建InputActionPause事件（注意勾选暂停时执行）查询按键触发；

在游戏模式蓝图中创建两个自定义事件PauseGame和UnpauseGame实现暂停功能；创建Construst（从类构建对象）节点，类选择UI控件；通过UI间的移除和添加实现界面的转换，并获取玩家控制器后启用或禁用光标；通过SetInputModeGameAndUI（设置输入模式游戏和UI）节点选项启用或禁用键盘及鼠标屏幕；

重开函数中的Openlevel打开当前关卡时将默认保留全局的InputMode模式；

(4).背景音乐

将生成的音效提升成变量形式则可通过调用该变量的形式实现音乐的暂停；