UE5 学习笔记 FPS游戏制作30 显示击杀信息水平框 UI模板（预制体）

news2025/4/3 2:10:49

文章目录

- 一制作单条死亡信息框
- - 水平框的使用
  - - 创建一个水平框
    - 添加子元素
    - 调整子元素顺序
    - 子元素的布局插槽
    - - 尺寸
      - 填充
      - 对齐
    - 制作UI
  - 根据队伍，设置文本的名字和颜色
  - - 声明变量
  - 将变量设置为构造参数
  - 根据队伍，设置文本的名字和颜色
  - 在构造事件中，获取玩家的引用，设置击杀者和被杀者的文本和颜色，设置武器图标
- 二创建一个容器，让死亡信息自动排序
- - 创建KillInfoPanel蓝图，用来展示击杀信息
  - 编辑变量和方法
  - 把KillInfoPanel放到主UI蓝图Fpp_UI里
- 三公共函数库生成随机的名字
- 四使用GameMode的事件分发器，来处理死亡消息
- - 创建GameMode的事件分发器
  - 修改死亡方法，发出击杀消息
  - UI注册消息

一制作单条死亡信息框

水平框的使用

类似于Unity的horizontalLayout

创建一个水平框

需要先有一个画布组件
在面板里拖一个水平框出来
在这里插入图片描述

添加子元素

往里边拖入三个text

在这里插入图片描述

调整子元素顺序

点击子元素，使用箭头调整
在这里插入图片描述

子元素的布局插槽

尺寸

自动：根据元素内容自动控制大小
填充：填满整个水平框
后边会出现一个比例，它并不是填充多少，只有有多个填充模式的子元素时，他用来表示相对于其他元素，这个元素大多少倍，例如两个填充元素，设置为2和1，则第一个元素占2/3，第二个元素占1/3
在这里插入图片描述

填充

其实是边距
直接输入可以同时调四个边距
展开可以分别调整四个边距
在这里插入图片描述

对齐

这个元素在自己的槽位里的对齐方式，不是内部文本的对齐方式
在这里插入图片描述
图中为水平竖直都拉伸到最大，如果元素时图片，拉伸模式会破坏图片的比例

制作UI

新建一个UI蓝图，命名为WhoKillWho
新建一个尺寸框，在尺寸框下新建一个水平框
选中尺寸框，调整大小
在这里插入图片描述

根据队伍，设置文本的名字和颜色

画面中的大小没有变是因为我们在屏幕模式里，舞台右上角"填充屏幕"模式改成"所需"，此时尺寸框变成我们需要的大小
在这里插入图片描述

选中水平框，添加两个文本框和一个图片，如下调整布局

在这里插入图片描述
最左侧文本框

中间的图片

右侧的文本框

声明变量

首先将两个文本框和一个图片修改一下名字，分别命名为KillerText,GunImage,KilledText,并设置为变量
在这里插入图片描述
然后声明五个变量击杀者的名字和队伍，被杀者的名字和队伍，使用的武器

将变量设置为构造参数

首先UI蓝图没有构造函数，所谓构造参数是指别人调用“Create Widget”节点时，可以输入的参数
我们要把手动创建的五个参数设置为构造参数，只能一个一个设置，不能批量设置
选择一个参数，在他的变量栏里，选择可编辑实例和生成时公开
在这里插入图片描述

根据队伍，设置文本的名字和颜色

编写一个方法，这里编写了一个事件，是一样的
在这里插入图片描述

在构造事件中，获取玩家的引用，设置击杀者和被杀者的文本和颜色，设置武器图标

注意是构造事件，不是构造函数
在这里插入图片描述

二创建一个容器，让死亡信息自动排序

创建KillInfoPanel蓝图，用来展示击杀信息

教程里没有用VerticalBox，说是不能让新加入的显示到上变，改用统一网格面板
新建一个UI蓝图，改名为KillInfoPanel
添加一个"统一网格面板"，重命名为Panel，指定是变量，不需要修改尺寸，因为这个我们要作为自定义UI放到Fpp_UI面板里
在这里插入图片描述

编辑变量和方法

变量：
Panel是UI设计面板传过来的统一网格
Slots，数据类型为统一网格插槽，用来管理子项的行列
ChildArray数组，类型为WhoKillWho这个UI的示例，他和Slot的意义不一样，它是用来调用自己的"从父项中移除"节点来删除自己的
MaxNum:统一网格里最多几条数据，设置默认值为3
在这里插入图片描述

方法：
三个方法，AddKillInfo用于添加一个新的击杀消息，ResetIndex用于对子元素重新排序，确保新加入的信息显示在最上，CheckMaxNum用于确保最多只有三条信息
在这里插入图片描述

在这里插入图片描述

把KillInfoPanel放到主UI蓝图Fpp_UI里

在用户创建里直接把自己创建的KillInfoPanel拖进来
在这里插入图片描述
调整锚点，对齐方式和大小到内容
对齐方式一定要对，确保尺寸扩展时会向左扩展
大小到内容一定要勾选，否则两项之间有空隙

三公共函数库生成随机的名字

首先在Shooter里创建一个Name变量
在这里插入图片描述
公共函数库可以理解为静态函数，可以不需要引用直接调用
先创建一个函数库蓝图，取名为Utility

创建两个一个函数和两个数组，数组里是名字和姓氏

函数内容就是随机获取数组里的值，然后返回拼接的字符串
在这里插入图片描述

在这里插入图片描述

四使用GameMode的事件分发器，来处理死亡消息

创建GameMode的事件分发器

死亡消息的分发器不能放在shooter蓝图里，否则每创建一个角色，UI就要获取一次引用
正确的做法是放到GameMode里
在GameMode里新建一个事件分发器，命名为Kill_Dispatcher,添加五个参数，杀人者的名字和队伍，被杀者的名字和队伍，使用的武器
在这里插入图片描述

修改死亡方法，发出击杀消息

在shooter的Die函数里调用这个事件分发器
需要注意，这里为了获取到击杀者的信息，为Die函数添加了一个Shooter类型的输入参数Enemey
在这里插入图片描述
然后为了给Die的Enemy函数赋值，要在TakeDamage里也添加一个Shooter类型的Enemy

然后为了给TakeDamage函数的Enemy参数赋值，需要修改步枪和发射器子弹的函数
步枪：

发射器的bullet：
添加一个Shooter参数，记录这个子弹的主人，TakeDamage时传入
在这里插入图片描述
在launcher的shootOnce方法里，创建子弹是，将GunOwner传入