虚幻4学习笔记（13）用户UI 交互动画、制作2D UI、制作3D UI

B站UP谌嘉诚课程：https://www.bilibili.com/video/BV164411Y732

制作2D UI

导入图片
新建 用户界面-控件蓝图 双击打开
拖入image 参数设置 SizeX1920 SizeY1080

选择对焦居中点 右下角平铺 参数归零

ZOrder 数值越大 越显示靠上面
加载图片

打开关卡蓝图
添加event beginPlay 引出create widget 选中UI 引出add to viewport
add to Player Screen 显示到对应玩家屏幕上面

UI 主菜单制作

新建Pawn Camera 双击打开
添加组件Camera 将Pawn拖入场景
新建widget Blueprint MainMenu

拖入Panel 下的 Vertical Box 放入三个Button 并选中
细节- Layout -size 选择Fill
Button 细节 padding Bottom 输入50 增加间隔
锚点拉入Vertical Box中央
每个Button 添加text子集 分别取名 开始游戏 设置 退出 Font size 改为45
OutlineSize 设置为1
点击开始游戏的Events - On Clicked

引出Remove from Parent target 引出self 移除自身
Remove from Parent 引出 Get All Actors Of Class 资产选择第三人称小白人 Out Actors 引出get 0

添加get player controller 引出 Set View Target with Blend Blend time 设置与延迟时间相同 引出 Possess 引出Show Mouse Coursor 不打钩

D+左键 添加1秒延迟

点击退出的Events - On Clicked
添加quit Game

连线

关卡蓝图

添加event beginPlay 引出create widget 选中UI 引出add to viewport
add to Player Screen 显示到对应玩家屏幕上面
添加get player controller 引出 Show Mouse Coursor 打钩

摄像机组件 细节-Pawn Auto Possess Player 改为 Player0 获取控制权

UI动画 和 暂停游戏

新建Pause 拖入 Border 边界 纯色底框 更改Brush Color 灰色 A即 Alpha透明度 改为0.5
锚点放入中间 Alignment 改为0.5，0.5 PositionX Y 改为0，0
添加文本框 “你是否想要退出游戏”
添加button 锚点居中 Appearance -style-normal -tint 改为透明 添加文本 “是的”
复制一份

Overlap:重叠
Overlay:覆盖

边界是能够包含一个子控件的容器控件，以便
用背景图像和可调整填充将其包围。
单一子项
图像

点击 是的 的Events - On Clicked
引出quit
点击 继续游戏 的Events - On Clicked
引出set visibility 选择 collapsed 折叠 Hidden 隐藏

打开蓝图 ThirdPersonCharacter
添加event beginplay 引出create widget 资产选中Pause return value 提升为变量 更名为Pause
添加 add to view port
引出set visibility 选择 collapsed

添加Q键
添加 Pause 变量
添加isvalid
引出set visibility 选择 visible

world Settings - game mode 创建game mode default pawn class 选择 小白人蓝图
新建play controller 打开 （持续鼠标可见 需要勾选mouse interface-show mouse coursor）

打开蓝图 ThirdPersonCharacter
添加get player controller 引出 Show mouse cursor 勾选
引出 set input mode UI only 按键无法生效
添加游戏暂停 set game paused 勾选

打开蓝图 pause
点击继续事件
添加get player controller 引出 Show mouse cursor 不勾选
引出 set input mode game only 按键无法生效

添加新的动画 Animations Appear
拖入新的画布 canvas panel 全屏显示 offset alignment 全为0
选中canvas panel 添加Track 添加 transform
设置scale 全为0 拖动时间轴至0.75 改为1
添加背景模糊 background blur 细节blur strength 设置8

选中 background blur 添加 track 添加render opacity 0-1

pause蓝图
添加 自定义事件 custom Event 开始播放动画
拖入appear 引出play animation

小白人蓝图
pause引出开始播放动画

修改继续游戏按钮逻辑
0.75+0.05 =0.8 或者在最后添加 stop animations 解决Bug

增加判断 播放动画时不能点Q打开操作页面

制作3D UI

新建UI 全自_UMG 绘制
添加背景模糊 全屏 强度8 层级-1 3D UI不支持
添加Border 全屏 灰色 透明度0.8 层级-1
UI 缩放0.2 0.2 0.2

新建Actor 3DWIDGET_TEST1
添加控件组件 Widget
细节- user interface - draw size 选择 全自_UMG 调整UI大小 1280 720

常用属性
Space-world 3d效果 screen 2d效果
geometry mode 曲面模式还是平面模式
receicve hardware input 是否接受硬件输入
blend mode masked全遮罩 transparent 透明

blend mode 渲染模式选择 透明

打开第一人称蓝图
添加widgetInteraction 控件交互组件 放到FP_gun 下 左边周全部归零

调整至枪口 打开debug

拖入 widgetInteraction 引出 is over focusable widget
添加Press Pointer Key 添加release Pointer Key
添加判断 UI互动不能发射子弹
添加自定义事件 是否全自动、全自动射击 添加bool 值 是否能够全自动
添加全自动是否打开判断
添加set Timer by Function Name 填入函数名 全自动射击 延迟0.1s 勾选loop
添加clear timer by function name 填入函数名 全自动射击

按钮添加点击事件
event construct事件构造 引出 get all actors of class 资产选择第一人称角色 outactors 引出get 提升为变量 player
添加是否全自动 事件 勾选
添加是否全自动 事件 不勾选

主界面 菜单思路
新建player controller 勾选 show mouse cursor
新建pawn 添加carmera 组件 获取player0 控制权