当前位置： 首页 > article >正文

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

article 2026/2/13 8:40:25

文章目录

    • 一制作单条死亡信息框
      • 水平框的使用
        • 创建一个水平框
        • 添加子元素
        • 调整子元素顺序
        • 子元素的布局插槽
          • 尺寸
          • 填充
          • 对齐
        • 制作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传入
在这里插入图片描述

UI注册消息

在Fpp_UI的事件图表里注册击杀消息，调用KillInfoList的Add方法添加一个新的消息
这里的自定义事件比较复杂，可以直接从“绑定事件到KillDispatcher”节点拖一个线出来，自动创建带有正确输入参数的事件
在这里插入图片描述

相关文章：

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

文章目录 一制作单条死亡信息框水平框的使用创建一个水平框添加子元素调整子元素顺序子元素的布局插槽尺寸填充对齐 制作UI 根据队伍，设置文本的名字和颜色声明变量 将变量设置为构造参数根据队伍，设置文本的名字和颜色在构造事件中，获取玩家…...

编程日记 2026/2/12 6:57:34

西门子TCP通讯过程中硬件连接突然断开

通信原理探秘又结合在工作中遇到的问题，关注到了通讯中的KeepAlive定时器的设置，所以做了如下实验。 硬件： 1513PLC TCP客户端 PC TCP服务器 前提条件：禁用PLC侧KeepAlive 程序： 测试流程： 打开PC端网络调试助手，设置为TCP服务器，打开链接； PC端打开WireShack软…...

编程日记 2026/2/5 17:29:51

Android学习总结之算法篇三（打家劫舍）

打家劫舍一 // 动态规划 class Solution {public int rob(int[] nums) {if (nums null || nums.length 0) return 0;if (nums.length 1) return nums[0];int[] dp new int[nums.length];dp[0] nums[0];dp[1] Math.max(dp[0], nums[1]);for (int i 2; i < nums.lengt…...

编程日记 2026/2/5 10:06:10

【蓝桥杯】单片机设计与开发，速成备赛

一、LED模块开看&#xff0c;到大模板 二、刷第零讲题目&#xff08;直接复制模板&#xff09; 三、空降芯片模板直接调用部分&#xff08;听完再敲代码&#xff09; 四、第十三讲开刷省赛题&#xff08;开始自己背敲模板&#xff09; 五、考前串讲刷一遍 b连接&#xff1…...

编程日记 2026/2/8 13:33:01

【操作系统】Linux进程管理和调试

在 Linux 中&#xff0c;可以通过以下方法查看 PID&#xff08;进程ID&#xff09;对应的进程名称和详细信息&#xff1a; 1. 使用 ps 命令&#xff08;最直接&#xff09; ps -p <PID> -o pid,comm,cmd示例&#xff1a; ps -p 1234 -o pid,comm,cmd输出&#xff1a; P…...

编程日记 2026/2/12 14:26:11

2025宁德时代测评Verify考什么？网申测评如何通过SHL笔试｜附真题线上笔试考点、高分攻略、CATL新能源科技SHL测评宁德社招题目、面试攻略、求职建议

——职小豚 带你拆解新能源巨头招聘密码 一、宁德时代&#xff1a;新能源赛道「超级独角兽」 作为全球动力电池龙头&#xff0c;宁德时代&#xff08;CATL&#xff09;的江湖地位无需多言&#xff1a; 技术硬实力&#xff1a;麒麟电池、钠离子电池、无钴电池等黑科技加持&…...

编程日记 2026/2/5 17:30:11

基于 Ollama DeepSeek、Dify RAG 和 Fay 框架的高考咨询 AI 交互系统项目方案

基于 Ollama DeepSeek、Dify RAG 和 Fay 框架的高考咨询 AI 交互系统 一、项目概述 本项目旨在构建一个智能化的高考咨询助手&#xff0c;结合 AI 大模型、知识增强&#xff08;RAG&#xff09;和 3D 数字人交互&#xff0c;为用户提供智能高考问答、志愿填报建议、政策解读等…...

编程日记 2026/2/11 5:29:28

【 Vue 2 中的 Mixins 模式】

Vue 2 中的 Mixins 模式 在 Vue 2 里&#xff0c;mixins 是一种灵活的复用代码的方式&#xff0c;它能让你在多个组件间共享代码。借助 mixins&#xff0c;你可以把一些通用的选项&#xff08;像 data、methods、computed 等&#xff09;封装到一个对象里&#xff0c;然后在多…...

编程日记 2026/2/3 12:10:27

Spring Boot @RequestParam 解析参数时的常见问题及解决方案

1&#xff0c;遇到的问题&#xff1a;将后端接口写完后我想通过PostMan进行简单的测试一下&#xff0c;一不小心就遇到了这样的情况&#xff1a; org.springframework.web.bind.MissingServletRequestParameterException: Required Integer parameter contractId is not prese…...

编程日记 2026/2/5 17:29:55

linux xargs命令学习

命令描述 xargs从标准输入中读取默认以空格分隔的项&#xff08;可以使用双引号保护空格&#xff09;&#xff08;或单引号或反斜杠&#xff09;或换行符&#xff0c;并执行命令&#xff08;默认为/bin/echo&#xff09;一次或多次&#xff0c;后面跟着任何初始参数从标准输入中…...

编程日记 2026/2/12 6:33:32

Firefox 浏览器同步一个账户和书签网址

Firefox 浏览器同步一个账户和书签网址 Firefox 支持跨设备接续浏览&#xff0c;可实现电脑、手机与平板无缝衔接。无论您在使用哪台设备上使用 Firefox&#xff0c;都能获取书签、浏览历史、保存的密码等信息。当然也能实现windows、ios、linux、android系统中安装firefox浏览…...

编程日记 2026/2/5 17:29:53

Maven多模块项目，其他项目引用子模块的依赖，无法打包，提示没有找到依赖

背景&#xff1a; 微服务项目 每个服务都是单独的项目&#xff0c;会存在依赖关联的问题&#xff0c;在子模块的下面 depoly 之后&#xff0c;就会出现别的项目&#xff0c;无法package 原因&#xff1a; 多模块项目&#xff0c;depoly 需要在父模块下面执行...

编程日记 2026/2/5 17:29:53

mediacodec服务启动时加载media_codecs.xml

media.codec服务启动时&#xff0c; 会创建 implementation::Omx 和 implementation::OmxStore&#xff0c; 构造 Omx时&#xff0c; 会解析codec相关的xml文件&#xff0c;一般从会如下目录中&#xff0c; // from getDefaultSearchDirs() { "/product/etc",&quo…...

编程日记 2026/2/13 7:44:33

本地部署DeepSeek-R1（Dify压力测试和性能调优）

安装压测软件 为了有效测试&#xff0c;应在局域网设备测试&#xff0c;我这里用的服务器是局域网内的Ubuntu&#xff0c;下载的压测软件是WRK apt install wrk测试脚本 为了省事我直接在/root目录下新建lua脚本 vim test.lua脚本内容如下&#xff0c;app-xxxx更换为你工作…...

编程日记 2026/2/13 5:20:48

自动备份文件到服务器，自动备份文件到服务器有哪些方法？

将SQL Server数据库自动备份文件到服务器&#xff0c;可以通过多种方法实现。以下是几种常用的方法&#xff1a; 一、使用SQL Server Management Studio&#xff08;SSMS&#xff09;和SQL Server代理 配置SQL Server代理&#xff1a;确保SQL Server代理服务已启动。如果未启…...

编程日记 2026/2/5 17:30:06

Ollama+open-webui搭建私有本地大模型详细教程

Ollamaopen-webui搭建私有本地大模型详细教程 1. 什么是 Ollama&#xff1f; 1.1. Ollama 简介 ​ Ollama 是一个轻量级的 AI 模型运行时&#xff0c;专注于简化 AI 模型的部署和使用。它支持多种预训练模型&#xff08;如 Llama、Vicuna、Dolly 等&#xff09;&#xff0c;…...

编程日记 2026/2/5 17:38:05

电销行业机器人外呼话术设计：关键注意事项与实践指南

随着人工智能技术的普及&#xff0c;电话营销行业&#xff08;电销&#xff09;逐渐引入智能外呼机器人以提升效率、降低成本。然而&#xff0c;机器人外呼的实际效果高度依赖话术设计的合理性。若话术生硬、缺乏策略&#xff0c;不仅可能导致客户反感&#xff0c;还可能引发合…...

编程日记 2025/12/6 15:07:28

GPT-4o 原生图像生成技术解析：从模型架构到吉卜力梦境的实现

最近不少 AI 爱好者、设计师、Vlogger 在社交平台晒出了 GPT-4o 生成的梦幻图像&#xff0c;尤其是吉卜力风格的作品——柔和光影、日系构图、治愈色彩、富有情感的角色表达&#xff0c;一下子击中了无数人的“童年回忆 审美舒适区”。 &#x1f3a8; 下面是一些 GPT-4o 实际生…...

编程日记 2026/2/5 6:33:16

测试cursor-AI编辑器

Cursor是一个免费的&#xff0c;内置AI插件的编辑器&#xff0c;在vscode基础上开发&#xff0c;可以创建和分析代码&#xff0c;还能提出修改建议。官网是 https://www.cursor.com/cn 载入SFTP的方式跟vscode是一样的&#xff0c;但是会有这样的报错&#xff1a; 报错&#x…...

编程日记 2026/2/12 1:23:00

web网站页面测试点---添加功能测试

添加 一、创建新的申请时&#xff0c;关闭网络查看数据是否存在&#xff0c;并提示网络错位相关提示语 二、在文本框内输入数据 1.在文本框内输入空格&#xff0c;查看文本内容前后是否存在空格 2.在文本框内输入最大长度&#xff0c;查看能否正确提交 3.在文本框内输入最大长…...

编程日记 2026/1/5 9:54:52

[首发]烽火HG680-KD-海思MV320芯片-2+8G-安卓9.0-强刷卡刷固件包

烽火HG680-KD-海思MV320芯片-28G-安卓9.0-强刷卡刷固件包 U盘强刷刷机步骤&#xff1a; 1、强刷刷机&#xff0c;用一个usb2.0的8G以下U盘&#xff0c;fat32&#xff0c;2048块单分区格式化&#xff08;强刷对&#xff35;盘非常非常挑剔&#xff0c;usb2.0的4G U盘兼容的多&a…...

编程日记 2026/2/5 17:29:55

Spring Boot 快速入手

前言&#xff1a;为什么选择 Spring Boot&#xff1f; &#x1f680; 在现代 Java 开发中&#xff0c;Spring Boot 已成为最流行的后端框架之一。无论是小型 Web 应用、企业级系统&#xff0c;还是微服务架构&#xff0c;Spring Boot 都能提供快速开发、自动配置、轻量级部署的…...

编程日记 2026/2/13 3:57:57

OpenAI最近放出大新闻，准备在接下来的几个月内推出一款“开放”的语言模型

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

编程日记 2026/2/5 17:29:54

数据结构值ST表的详细讲解浅显易懂

定义与原理 ST表&#xff0c;即Sparse Table&#xff08;稀疏表&#xff09;&#xff0c;是一种基于倍增思想的数据结构。它主要用于在**O(1)**时间复杂度内查询给定区间的最值&#xff08;最大值或最小值&#xff09;。其原理是通过预处理&#xff0c;利用倍增的思想&#xf…...

编程日记 2026/2/11 11:51:12

基于PyQt5的自动化任务管理软件：高效、智能的任务调度与执行管理

基于PyQt5的自动化任务管理软件&#xff1a;高效、智能的任务调度与执行管理 相关资源文件已经打包成EXE文件&#xff0c;可双击直接运行程序&#xff0c;且文章末尾已附上相关源码&#xff0c;以供大家学习交流&#xff0c;博主主页还有更多Python相关程序案例&#xff0c;秉着…...

编程日记 2026/2/10 14:44:09

自动驾驶---学术论文的常客：nuScenes数据集的使用

1 前言 nuScenes 数据集在大模型训练中应用广泛&#xff0c;在很多CVPR或者其它论文中经常能看到使用nuScenes 数据集达到SOTA水平。 在之前的博客《自动驾驶---学术论文的常客&#xff1a;nuScenes 数据集》中&#xff0c;笔者主要介绍了nuScenes数据集的来源和下载方式&#…...

编程日记 2026/2/5 17:30:12

使用大语言模型进行Python图表可视化

Python使用matplotlib进行可视化一直有2个问题&#xff0c;一是代码繁琐&#xff0c;二是默认模板比较丑。因此发展出seaborn等在matplotlib上二次开发&#xff0c;以更少的代码进行画图的和美化的库&#xff0c;但是这也带来了定制化不足的问题。在大模型时代&#xff0c;这个…...

编程日记 2026/2/9 6:05:30

C#调用ACCESS数据库，解决“Microsoft.ACE.OLEDB.12.0”未注册问题

C#调用ACCESS数据库&#xff0c;解决“Microsoft.ACE.OLEDB.12.0”未注册问题 解决方法&#xff1a; 1.将C#采用的平台从AnyCpu改成X64 2.将官网下载的“Microsoft Access 2010 数据库引擎可再发行程序包AccessDatabaseEngine_X64”文件解压 3.安装解压后的文件 点击下载安…...

编程日记 2026/2/5 7:43:19

el-select+el-tree实现下拉树形选择

主要实现el-select下使用树结构,支持筛选功能 封装的组件 composeTree.vue <template><el-select :popper-class"popperClass"v-model"selectedList"placeholder"请选择"filterable:filter-method"handleFilter" multiple:c…...

编程日记 2026/2/5 17:30:10

android studio 安装flutter插件

在 Android Studio 中安装 Flutter 插件 Flutter 是 Google 开发的一个开源 UI 软件开发工具包&#xff0c;主要用于构建高质量的跨平台应用。然而&#xff0c;要在 Android Studio 中开发 Flutter 应用&#xff0c;首先需要安装 Flutter 插件。本文将详细介绍安装 Flutter 插…...

编程日记 2025/12/24 10:38:14