43. UE5 RPG 实现敌人血量显示条

news2024/11/23 15:12:44

在上一篇文章中，我们实现了火球术伤害功能，在火球击中敌方目标，可以降低敌人20的血量，这个值现在是固定的，后面我们会修改火球的伤害设置。接着，我们也测试了功能是实现的，但是在正常的游玩过程中，你不可能让玩家通过log界面获取敌人血量，这不符合玩家体验，所以，这一篇我们来实现在敌人的上方显示敌人剩余血量的UI。
为了实现敌人的血量条，我们首先将创建一个显示血量的用户控件，然后再敌人的基类里面实现在敌人血量变化时，对敌人的血量进行事件委托广播，来告知敌人修改血量。有个重点就是，我们自己定义的用户控件需要一个用户控件控制器作为中间媒介来获取数据，这里我们直接将敌人类作为控制器使用，没必要额外创建控制器。

在角色身上增加显示血条的UI组件

首先，我们要在敌人基类身上添加一个属性，用于配置使用的显示血条的用户控件

	UPROPERTY(EditAnywhere, BlueprintReadOnly, Category="Widget")
	TObjectPtr<UWidgetComponent> HealthBar;

接着在构造函数中，创建实例，并将其附加到根节点

	HealthBar = CreateDefaultSubobject<UWidgetComponent>("HealthBar");
	HealthBar->SetupAttachment(GetRootComponent()); //将血条附件到根节点上

接着编译打开UE，打开敌人的基类，我们通用的都会在基类身上设置，这样也会同步到子类身上，角色基类会出现我们创建的用户控件
在这里插入图片描述
在右侧的属性上，我们使用屏幕空间，然后以所需大小绘制，我们UI设置尺寸多大，它就按多大渲染。注意：每帧修改尺寸大小消耗极大，所以，我们使用它不要去修改大小，而是在内部去修改。
在这里插入图片描述
显示用的组件有了，我们还需要添加的用户控件，接下来，我们创建血条的UI控件。

创建基础血条

我们要创建一个敌人专门使用的进度条，这个进度条作为进度条的基础控件，里面可以设置一些通用的方法，用于以后扩展子类。
在这里插入图片描述
我们先在下方创建一个尺寸框，用于调节它的尺寸大小
在这里插入图片描述
将显示设置为所需，我们设置尺寸框多大，它就显示多大。然后将尺寸框设置为变量，并开启宽高和高度重载。
在这里插入图片描述
接着，我们实现使用变量控制它的宽高，使用节点重新控制它的宽高。编译以后，可以修改变量在构造时设置大小，选中节点右键折叠到函数，可以直接编译成一个函数。
在这里插入图片描述
接着，我们创建一个覆层，可以让下面的UI相互叠加，方便后面实现一个血条渐变的效果。
在这里插入图片描述
然后在覆层下面添加一个进度条
在这里插入图片描述
我们将进度条的背景填充的透明度设置为0，不使用它的背景色。
在这里插入图片描述
在外观这里修改将颜色修改为白色，我们将使用颜色去修改进度条颜色
在这里插入图片描述

将其设置为变量
在这里插入图片描述
我们在蓝图节点中设置它的样式，先将背景设置为透明，然后使用笔刷设置它的填充颜色
在这里插入图片描述
我们可以通过调整百分比查看它的进度，这个值我们将会在实现委托后，通过蓝图节点设置它。
在这里插入图片描述

创建委托

我们之前提到过，要将角色作为血条的控制器层使用，所以，我们接下来要在敌人基类身上增加委托实现对敌人血量和最大血量的广播。
回想一下，我们之前在设置主角属性面板时，我们创建了血量委托和蓝量委托，我们接着使用同样的方式实现。
在这里插入图片描述
我们在敌人基类里面增加血量的委托函数

	UPROPERTY(BlueprintAssignable)
	FOnAttributeChangedSignature OnHealthChanged;

	UPROPERTY(BlueprintAssignable)
	FOnAttributeChangedSignature OnMaxHealthChanged;

这里我们直接使用OverlayWidgetController里面的委托宏，所以，需要将OverlayWidgetController的文件引入

#include "UI/WidgetController/OverlayWidgetController.h"

接下来，我们就要实现对委托的广播，让它在合适的地方去广播，首先就是创建完成后，进行一次委托，用于初始化显示，接着就是绑定血量数值的变化，在数值变化时，及时更新数值。
首先，我们要将敌人的基类作为控制器设置给用户控件，可以在用户控件绑定对应监听，我们在初始化完成后，开始执行事件时，从用户控件组件中获取到用户控件，转换为我们创建的用户控件基类的实力，调用方法设置。这个方法会在设置后，触发设置回调

void AEnemyBase::BeginPlay()
{
	Super::BeginPlay();

	//初始化角色的ASC
	InitAbilityActorInfo();

	if(UMyUserWidget* UserWidget = Cast<UMyUserWidget>(HealthBar->GetUserWidgetObject()))
	{
		UserWidget->SetWidgetController(this);
	}

我们将AttributeSet（AS）转换成我们自己创建的类型，这样我们可以获取到它的血量属性

	UAttributeSetBase* AS = Cast<UAttributeSetBase>(AttributeSet);
	if(AS)
	{...

然后，我们通过ASC监听AS内的血量数值变化，绑定血量变化回调，在血量变动时，将会触发回调。由于进入游戏没有初始化，所以，我们需要进行初始化，设置它的初始值，在出生后，数值显示正确。

	if(UAttributeSetBase* AS = Cast<UAttributeSetBase>(AttributeSet))
	{
		//监听血量变化
		AbilitySystemComponent->GetGameplayAttributeValueChangeDelegate(AS->GetHealthAttribute()).AddLambda(
			[this](const FOnAttributeChangeData& Data)
			{
				OnHealthChanged.Broadcast(Data.NewValue);
			}
		);
		AbilitySystemComponent->GetGameplayAttributeValueChangeDelegate(AS->GetMaxHealthAttribute()).AddLambda(
			[this](const FOnAttributeChangeData& Data)
			{
				OnMaxHealthChanged.Broadcast(Data.NewValue);
			}
		);

		//初始化血量
		OnHealthChanged.Broadcast(AS->GetHealth());
		OnMaxHealthChanged.Broadcast(AS->GetMaxHealth());
	}

完整函数

void AEnemyBase::BeginPlay()
{
	Super::BeginPlay();

	//初始化角色的ASC
	InitAbilityActorInfo();

	if(UMyUserWidget* UserWidget = Cast<UMyUserWidget>(HealthBar->GetUserWidgetObject()))
	{
		UserWidget->SetWidgetController(this);
	}
	
	if(const UAttributeSetBase* AS = Cast<UAttributeSetBase>(AttributeSet))
	{
		//监听血量变化
		AbilitySystemComponent->GetGameplayAttributeValueChangeDelegate(AS->GetHealthAttribute()).AddLambda(
			[this](const FOnAttributeChangeData& Data)
			{
				OnHealthChanged.Broadcast(Data.NewValue);
			}
		);
		AbilitySystemComponent->GetGameplayAttributeValueChangeDelegate(AS->GetMaxHealthAttribute()).AddLambda(
			[this](const FOnAttributeChangeData& Data)
			{
				OnMaxHealthChanged.Broadcast(Data.NewValue);
			}
		);

		//初始化血量
		OnHealthChanged.Broadcast(AS->GetHealth());
		OnMaxHealthChanged.Broadcast(AS->GetMaxHealth());
	}
}

创建敌人专用血条

我们上面创建了一个基础显示血条的用户控件，并且在敌人基类上实现了血量委托，接下来，我们将实现专门用于到敌人身上的血条。
我们创建一个新的控件蓝图，父类选择之前创建的基本的进度条。
在这里插入图片描述
有了敌人对应的控件后，我们首先去敌人蓝图基类去设置上
在这里插入图片描述
在用户控件事件里面，首先设置回调，将类型转换成敌人基类，这样，我们就可以使用控制器绑定回调了。
在这里插入图片描述
然后设置监听血量和最大血量广播，接着设置给进度条来实现血量减少变化。并且除以的时候我们使用Safe Divide节点，这个可以保证在除以0的时候不会报错。
在这里插入图片描述
为了通用，我们在它的父类创建一个设置百分比的，我们先将上层的设置百分比的实现，避免在子类里面每次都要去创建
在这里插入图片描述
在子类改成调用函数即可
在这里插入图片描述
接着可以运行测试了，我们发现功能实现了，血条的位置有点太靠中间了。
在这里插入图片描述
打开敌人基类蓝图，修改血条位置
在这里插入图片描述
现在显示正常。
在这里插入图片描述

添加逐渐消失的进度条

基础功能我们实现了，后面我们增加一些体验的功能，一个是受到攻击后，扣除血量，我们将显示一个逐渐过渡的条，能够让玩家清楚这一次攻击造成了多少伤害。
首先在进度条基类上面，增加额外的进度条这个进度条，这个进度条需要放在血条的上面，这样在覆层里面血条会优先显示。
在这里插入图片描述
接着将它修改名称，并设置为变量，修改对齐
在这里插入图片描述
记得将它的填充设置为白色。
在这里插入图片描述
使用蓝图节点修改它的颜色
在这里插入图片描述
然后修改完它的默认值以后，看一下最终效果
在这里插入图片描述
接下来，我们将实现逐渐消失进度条的效果，我们需要一个值，用于代表当前它所在的位置
在这里插入图片描述
它的默认值为1，就是默认满血
在这里插入图片描述
那么如何实现它平滑的过渡呢，我们使用Finterp To节点，这个节点需要我们传入一个当前值，和一个目标值，然后把时间传入，最后设置一下速度。我们只需要修改它的目标值，就可以实现缓慢的渐变效果。
在这里插入图片描述
将它折叠成函数，就实现了效果
在这里插入图片描述
如果创建的子类，在子类里面如果没有调用父类的帧回调，那它将不会执行，那么如何在子类里面去调用父类的帧回调呢，默认是不会调用的，右键找到节点的将调用添加到父函数，这样就可以生成一个调用父节点的帧回调事件的节点
在这里插入图片描述
在这里插入图片描述
现在我们还需要一个设置最终值的事件，我们创建一个自定义事件，在扣血以后，让它先显示一秒后，在逐渐消失
在这里插入图片描述
这个事件的调用，我们直接在修改了血量百分比这里设置即可。
在这里插入图片描述
接着运行测试，看看功能是否完成
在这里插入图片描述

设置血量条的显隐

接下来又是一个优化的效果，在游戏战斗中，我们不希望敌人的血量条一直显示，而是在被攻击后，将显示一段时间，这样不但可以节省性能，还能够让玩家清楚的知道攻击了哪些敌人。
敌人的血条默认将不会显示，在受到攻击后显示一段时间。
首先，我们增加一个函数，用于显示或隐藏，通过传入一个变量用于设置，并将此变量值记录下来，用于后面使用
在这里插入图片描述
首先，我们实现敌人创建后隐藏血条，那我们在构造完成，开始执行事件时，调用此函数隐藏
在这里插入图片描述
接下来是受伤显示，敌人受伤后，会触发血量回调，那我们可以在修改血量百分比的函数内调用显示
在这里插入图片描述
接下来是隐藏功能，我们需要一个定时器，在一定时间后，设置血条的隐藏，定时器也是无法在函数内使用的，那我们在设置血条渐变效果后面执行，在执行一个新的定时器时，一定要将旧的先清除，我们默认它显示6秒，如果6秒内定时器没有被清除，将触发事件，隐藏血条。
在这里插入图片描述
接下来就是变量的使用，我们设置显示隐藏时，设置了一个变量，这个变量可以用于，设置帧回调事件，可以节约性能，因为帧回调每帧都执行。
我们设置只有在显示时，才会执行帧回调。
在这里插入图片描述
接下来就是测试功能
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1627216.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【QA】Git的底层原理

【QA】Git的底层原理

前言 本文通过一个简单的示例&#xff0c;来理解Git的底层原理。 示例 1、新建本地仓库并上传第一个文件 相关步骤&#xff1a; 新建仓库及创建文件查看文件状态将文件添加到暂存区将文件提交到本地仓库 HMTeenLAPTOP-46U4TV6K MINGW64 /d/GSF_Data/Github/Java/Git/git-…
阅读更多...
工厂模式（二）

工厂模式（二）

一、简单工厂 package com.xu.demo.factoryPattern;/*** 简单工厂模式类*/ public class SimpleFactoryPattern {public static Phone create(String name) {//根据输入对象名称判断返回相匹配的对象if("IPhone".equals(name)) {//返回对象return new IPhone();}else…
阅读更多...
Swift - 流程控制

Swift - 流程控制

文章目录 Swift - 流程控制if-else2. while3. for3.1 闭区间运算符3.2 半开区间运算符3.3 for - 区间运算符用在数组上3.3.1 单侧区间 3.4 区间类型3.5 带间隔的区间值 4. switch4.1 fallthrough4.2 switch注意点 5. 复合条件6. 区间匹配、元组匹配7. 值绑定8. where9. 标签语句…
阅读更多...
网络安全培训对软件开发人员的重要性

网络安全培训对软件开发人员的重要性

微信搜索关注&#xff1a;网络研究观 阅读获取更多信息。 组织所经历的持续不断的网络威胁没有任何放缓的迹象&#xff0c;使得实现有效安全的任务变得越来越具有挑战性。 根据最新的 Verizon 数据泄露调查报告&#xff0c;2023 年高级攻击增加了 200% 以上。 IBM 数据泄露成…
阅读更多...
第一阶段--Day2--信息安全法律法规、网络安全相关标准

第一阶段--Day2--信息安全法律法规、网络安全相关标准

目录 1. 针对信息安全的规定 2. 网络安全相关标准 1. 针对信息安全的规定 《中华人民共和国计算机信息系统安全保护条例》1994年2月18日颁布并实施 中华人民共和国计算机信息系统安全保护条例__增刊20111国务院公报_中国政府网 《中华人民共和国国际联网安全保护管理…
阅读更多...
Web前端一套全部清晰 ② day2 HTML 标签之文字排版，图片、链接、音视频链接

Web前端一套全部清晰 ② day2 HTML 标签之文字排版，图片、链接、音视频链接

虽然辛苦&#xff0c;我还是会选择那种滚烫的人生 —— 24.4.25 HTML初体验 1.HTML定义 HTML 超文本标记语言 超文本 —— 链接 标记 —— 标记也叫标签&#xff0c;带尖括号的文本 标签语法 开始标签 需要加粗的文字 结束标签 标签成对出现&#xff0c;中间包裹内容 <>里…
阅读更多...
Vue3+ts(day03：ref和reactive)

Vue3+ts(day03：ref和reactive)

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes 觉得有帮助的同学&#xff0c;可以点心心支持一下哈&#xff08;笔记是根据b站上学习的尚硅谷的前端视频【张天禹老师】&#xff0c;记录一下学习笔记&#xff0c;用于自己复盘&#xff0c;有需要学…
阅读更多...
SnapGene Mac v5.3.1中文激活版：综合性分子生物学软件

SnapGene Mac v5.3.1中文激活版：综合性分子生物学软件

SnapGene Mac是一款功能全面、操作便捷的综合性分子生物学软件&#xff0c;专为Mac用户打造。它集成了DNA序列编辑、分析、可视化和团队协作等多种功能&#xff0c;为科研人员提供了一个高效、可靠的分子生物学研究工具。 SnapGene Mac v5.3.1中文激活版下载 在SnapGene Mac中&…
阅读更多...
JPEG图像常用加密算法简介

JPEG图像常用加密算法简介

JPEG图像加密算法 目前&#xff0c;JPEG图像加密算法可以分成异或加密、置乱加密和置乱与异或组合加密。下面对这三种加密方式进行阐述。 (1) 异或加密 文献[1]提出了一种基于异或加密的JPEG图像的RDH-EI方案。该算法通过对AC系数的ACA和图像的量化表进行流密码异或&#xf…
阅读更多...
Spring Boot 3.2.5 集成 MyBatisPlus

Spring Boot 3.2.5 集成 MyBatisPlus

前置条件&#xff0c;先连接好数据库&#xff0c;并且数据库里新建表插入几条数据 连接mysql传送门 版本 Spring Boot 3.2.5 第一步&#xff0c;添加依赖 <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-spring-boot3-start…
阅读更多...
神经网络的激活函数

神经网络的激活函数

目录 神经网络 激活函数 sigmoid 激活函数 tanh 激活函数 backward方法 relu 激活函数 softmax 激活函数 神经网络 人工神经网络&#xff08; Artificial Neural Network&#xff0c; 简写为ANN&#xff09;也简称为神经网络&#xff08;NN&#xff09;&#xff0c…
阅读更多...
FANUC机器人SOCKET连接指令编写

FANUC机器人SOCKET连接指令编写

一、创建一个.KL文件编写连接指令 创建一个KL文本来编写FANUC机器人socket连接指令 二、KAREL指令代码 fanuc机器人karel编辑器编辑的karel代码如下&#xff1a; PROGRAM SM_CON %COMMENT SOCKET连接 %STACKSIZE 4000 --堆栈大小 %INCLUDE klevccdfVAR status,data_type,in…
阅读更多...
Unreal Engine创建Plugin

Unreal Engine创建Plugin

打开UE工程&#xff0c;点击编辑&#xff0c;选择插件 点击“新插件”按钮&#xff0c;选择“空白选项”填入插件名字"MultiPlayerPlugin"&#xff0c;填入插件作者、描述&#xff0c;点击“创建插件”按钮打开C工程&#xff0c;即可看到插件目录&#xff0c;编译C工…
阅读更多...
【介绍下如何使用CocoaPods】

【介绍下如何使用CocoaPods】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…
阅读更多...
vue与Spring boot数据交互例子【简单版】

vue与Spring boot数据交互例子【简单版】

文章目录 什么是Vue&#xff1f;快速体验Vueaxios是什么&#xff1f;向Springboot后端发送数据接收Springboot后端数据小结 什么是Vue&#xff1f; 官网解释&#xff1a;Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上…
阅读更多...
BUUCTF_[BSidesCF 2020]Had a bad day

BUUCTF_[BSidesCF 2020]Had a bad day

[BSidesCF 2020]Had a bad day 1.一看题目直接尝试文件包含 2.直接报错&#xff0c;确实是存在文件包含漏洞 http://307b4461-36d6-443f-879a-68803a57f721.node5.buuoj.cn:81/index.php?categoryphp://filter/convert.base64-encode/resourceindex strpos() 函数查找字符串…
阅读更多...
【Linux】：文件查看 stat、cat、more、less、head、tail、uniq、wc

【Linux】：文件查看 stat、cat、more、less、head、tail、uniq、wc

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; Linux深造日志 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一、stat&#xff08;查看文件详细属性信息&#xff09;1.1 内容解析&#xff1a;1.2…
阅读更多...
【基础篇】Git 基础命令与核心概念

【基础篇】Git 基础命令与核心概念

✅作者简介&#xff1a;大家好&#xff0c;我是小杨 &#x1f4c3;个人主页&#xff1a;「小杨」的csdn博客 &#x1f433;希望大家多多支持&#x1f970;一起进步呀&#xff01; 一&#xff0c;Git 初识 1.1&#xff0c;问题引入 不知道你工作或学习时&#xff0c;有没有遇到…
阅读更多...
JAVA前端快速入门基础_javascript入门(01)

JAVA前端快速入门基础_javascript入门(01)

写在前面:本文用于快速学会简易的JS&#xff0c;仅做扫盲和参考作用 1.JS是什么 JavaScript是一门跨平台&#xff0c;面向对象的脚本语言(即不需要编译&#xff0c;可以直接通过浏览器进行解释)。JS和Java是两门完全不相同的语言&#xff0c;但是基础的语法是类似的 2.JS的引…
阅读更多...
uniapp 微信小程序 分享海报的实现

uniapp 微信小程序 分享海报的实现

主页面 <template><view class"page"><!-- 自定义导航栏--><Navbar title"我的海报"></Navbar><view class"container"><poster ref"poster" :imageUrl"image" :imageWidth"7…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023