让我们继续《塞尔达传说》中林克技能的制作!!!
UE版本:5.6.0
VS版本:2022
本章节的核心目标:技能面板
先让我们看一下完成后的效果:

第14章效果

本章节项目链接:
通过网盘分享的文件:14_技能面板
链接: https://pan.baidu.com/s/1BcNuIlxd2elJZd70RfJgug 提取码: rd7w
–来自百度网盘超级会员v3的分享


已经完成的功能:

动作按键是否完成
移动W、S、A、D完成
疲劳完成
冲刺Left Shift完成
滑行与跳跃Space完成
下落完成

预计制作的技能

技能(符文)按键是否完成
RBB(方向遥控炸弹)未设定未开始
RBS(圆形遥控炸弹)未设定未开始
Mag(磁铁)未设定未开始
Stasis(时间静止)未设定未开始
Ice(冻结)未设定未开始

UI交互

UI面板按键是否完成
打开(关闭)技能面板Tab进行中

本章节的项目文件:

技能的图标:

在这里插入图片描述

说明:每种技能共有4个图标,用来表示4个不同的状态。
Disable_Hover_Pressed:表示的是鼠标在未选中的图标上悬停和按下的效果。
Disable_Normal:表示的是未选中的图标(正常状态下的显示)。
Enable_Hover_Pressed:表示的是鼠标在选中的图标上悬停和按下的效果。
Enable_Normal:表示的是选中的图标显示的效果。


0.导入素材

  将文件夹内的图片全部拖拽进UE中。
在这里插入图片描述
  为了防止模糊,我们将这些图片的压缩方式设置为UserInterface2D
具体操作为:全选图片=》右键【资产操作】=》【编辑属性矩阵中的选择】
在这里插入图片描述
选择【压缩】=》压缩设置【UserInterface2D】
在这里插入图片描述


1.ZSCharBase.h中新建符文的枚举类

UENUM(BlueprintType)
enum class ERunes : uint8
{R_EMAX UMETA(DisplayName = "EMAX"),R_RBB UMETA(DisplayName = "方形遥控炸弹"),R_RBS UMETA(DisplayName = "圆形遥控炸弹"),R_Mag UMETA(DisplayName = "磁铁"),R_Stasis UMETA(DisplayName = "时间静止"),R_Ice UMETA(DisplayName = "冻结")
};UCLASS()
class ZELDARSKILLS_API AZSCharBase : public ACharacter
{GENERATED_BODY()
public:};

2.制作 - 显示技能图标用的格子

  目的1: 方便添加和管理图标的显示。
  目的2: 用于选中技能事件的逻辑交互(我们得获知玩家点击到了哪一个技能,然后才能执行后续的逻辑)。

2.1 新建用户控件蓝图(命名为:UI_RuneSlot)

  命名为UI_RuneSlot,用于显示技能图标。
在这里插入图片描述
在这里插入图片描述

2.2 为UI_RuneSlot添加尺寸框

  尺寸框(Size Box)作用:控制子控件尺寸的核心布局容器。在这里我们用到了它的子布局:宽度重载和高度重置
  具体而言:添加尺寸框到UI_RuneSlot下后,勾选:宽度重载和高度重载,并将其值设置为250,而后选择屏幕上所需
在这里插入图片描述

2.3 为UI_RuneSlot添加勾选框

  勾选框(Check Box)作用:在本次项目而言,主要作用为与鼠标进行交互,能够根据鼠标当前的一个操作情况显示图片。它的尺寸大小由尺寸框控制
在这里插入图片描述
  重命名为CB,并勾选其为变量。后续在蓝图中有用。
在这里插入图片描述

2.3.1(测试)为勾选框添加一张任意图片

  目的:根据这张技能图标显示情况,获取到图片在勾选框应该显示的大小。如下图所示,明显图片填入后偏大(因为这个图片是512x512的)。
在这里插入图片描述
  将图片的大小(Image Size)设置为250和250,就刚好合适(记下这个值,后面我们在蓝图中用得到)。
在这里插入图片描述

2.3.2(可选)禁用键盘选中技能图标

  如果你不希望玩家通过键盘来选择符文,你可以取消勾选框内的该属性。
在这里插入图片描述

2.3.3(可选)调整勾选框内显示的图片

  不调整的话,勾选框内显示的图片与你导入的图片相比会偏暗。这是由勾选框的前景颜色所引起的,取消继承,并将前景颜色改为全白既可以解决这个问题。
在这里插入图片描述

2.4 自定义添加图片功能(UI_RuneSlot蓝图)

2.4.1(蓝图)触发事件和设置的目标属性

  是编辑器内部的功能:Event Pre Construct 触发。设置的目标属性是勾选框的样式:Make Check Box Style
在这里插入图片描述

2.4.2(蓝图)设置Unchcked Image

  Unchecked Image的值通过Make Slate Brush赋值。这个笔刷绘制用的“颜料”,就是我们的素材。接下来为我们的笔刷准备“颜料”
在这里插入图片描述
  (1)Make Slate Brush的Image_Size设置为:(250,250)
在这里插入图片描述
  (2)新建变量(Texture 2D【纹理2D】),并命名为:IMG_D_N:用于接收名字带有Disabled_Normal的图片。Make Slate Brush的Image设置为:IMG_D_N
在这里插入图片描述

2.4.3(蓝图)设置Unchecked Hovered Image和Unchecked Pressed Image

  与2.4.2的操作完全一致。
在这里插入图片描述

2.4.4(蓝图)设置剩下的情况

在这里插入图片描述

2.4.5(蓝图)变量细节设置

  为了让这些变量可以由我们手动进行赋值(添加图片),因此我们要勾选可编辑实例和生成时公开
在这里插入图片描述

2.4.6(蓝图,可选)Foreground Color 设置

在这里插入图片描述

2.4.7(完成)功能完成示意图

在这里插入图片描述

2.5 选中符文的逻辑交互(UI_RuneSlot蓝图)

2.5.1(蓝图)添加事件-勾选状态变化时

  当玩家点击UI_RuneSlot后触发的事件。
在这里插入图片描述
在这里插入图片描述

2.5.2(蓝图)新建事件分发器

  事件分发器的作用:用于管理和调度事件的传递与响应。它允许广播事件,其他对象可根据需要订阅这些事件,从而实现对象间的消息传递。
  新建一个事件分发器,命名为OnClicked,我们让它传递如下两个参数:
  (1)新建变量(文本)Name:用于传递点击的符文名字
  (2)新建变量(ERunes)RuneType:用于传递点击的符文类型
  PS:记得勾选 (1)可编辑实例和(2)生成时公开
在这里插入图片描述

2.5.3(蓝图)新建函数获取设置格子选中状态

  目的:方便设置当前格子的选中状态
  (1)新建一个函数:命名为CheckStatus
  (2)内部逻辑:设置勾选框的Checked即可
在这里插入图片描述

2.5.4(完成)功能完成示意图

  编译执行后,回到UI_RuneSlot设计器界面,显示如下内容,为该部分功能完成。
在这里插入图片描述


3.制作 - 技能面板

  目的1:显示所有的技能(UI_RuneSlot)
  目的2:管理技能选中逻辑

3.1 新建C++脚本(命名为:ZSRuneSelections)

在这里插入图片描述
在这里插入图片描述

3.2 创建基于ZSRuneSelections的蓝图类

  右键ZSRuneSelections,选择创建基于ZSRuneSelections的蓝图类,并命名为UI_RuneSelections,放到UI文件夹下。
在这里插入图片描述

3.3 搭建技能面板

3.3.1(UI设计)添加画布面板

  (1)添加画布面板;
  (2)为画布面板,添加一个背景模糊(Background Blur),调整其参数:全覆盖,将偏移量置为0,模糊强度设置为1。【添加背景模糊的目的:让打开技能面板的时候,背景显示模糊。】
在这里插入图片描述

3.3.2(UI设计)添加水平框

  目的:管理技能。
  参数设置:
  (1)锚点:中心
  (2)位置X:0;位置Y:0;
  (3)对齐:(0.5,0.5)【说明:中心位置】;
  (4)尺寸X:1250【说明:有5个技能,每个技能长250,因此 为5x250=1250】。
  (5)尺寸Y:250【说明:高度就是250】
  (6)重命名:HB_RuneContainer,并勾选其为变量
在这里插入图片描述

3.4 添加格子到技能面板中

  拖拽5个UI_RuneSlot到水平框下。
在这里插入图片描述

3.5 设置UI_RuneSlot的参数

  以RBS为例
在这里插入图片描述

3.6 交互文本

  创建一个文本,该文本的作用是显示当前选中的技能名字。设置成如下图所示,并记得勾选其为变量
在这里插入图片描述


4. 代码 - 选择技能

4.1 技能面板与角色的交互

4.1.1 角色获知当前选中的技能

简单来说:ZSRuneSelections:告知ZSCharBase,当前选中的技能是谁。
具体而言:
ZSCharBase.h

	// 当前选中的符文UPROPERTY(EditAnywhere, Category = "Runes")ERunes ActiveRune{ ERunes::R_EMAX };

ZSRuneSelections.h

// Fill out your copyright notice in the Description page of Project Settings.#pragma once#include "CoreMinimal.h"
#include "Blueprint/UserWidget.h"
#include "ZSCharBase.h"
#include "ZSRuneSelections.generated.h"/*** */
UCLASS()
class ZELDARSKILLS_API UZSRuneSelections : public UUserWidget
{GENERATED_BODY()public:UPROPERTY(EditAnywhere, BlueprintReadWrite)AZSCharBase* playerRef;UFUNCTION(BlueprintCallable)// 设置:角色当前选中的技能void SelectedRuneType(ERunes RuneType); 
};

ZSRuneSelections.cpp

// Fill out your copyright notice in the Description page of Project Settings.#include "UI/ZSRuneSelections.h"void UZSRuneSelections::SelectedRuneType(ERunes RuneType)
{// 玩家选择技能if (playerRef){playerRef->ActiveRune = RuneType; // 更新玩家选中的技能}
}

4.2 UI_RuneSelections管理UI_RuneSlot

  我们希望通过UI_RuneSelections去管理所有的技能格子(UI_RuneSlot)。

4.2.1(蓝图)注册UI_RuneSlot的OnClicked事件的响应函数

  通过UI_RuneSelections注册UI_RuneSlot的OnClicked事件的响应函数。
在这里插入图片描述

  绑定的响应函数为(自定义的:SelectedRune),该函数的功能如下:
(1)告知角色当前选中的技能(SelectRuneType方法)
(2)UIRuneSlot根据自身是否被选中设置其选中状态Check Status)。
(3)UI_RuneSelectionsTXT_Hint显示的内容设置为当前选中的符文名字
在这里插入图片描述

  整体一览:
在这里插入图片描述


5.通过Tab键 - 玩家与技能面板交互

5.1 为UI_ZSLayout的画布面板创建控件切换器

5.1.1 UI_ZSLayout介绍

  UI_ZSLayout是本人文章UE5 - 制作《塞尔达传说》中林克的技能 - 9 - 耐力条制作(涉及蓝图)中,创建的。
  内部构造很简单,就一个耐力条,如下图
在这里插入图片描述
  涉及的蓝图逻辑与耐力条的值有关,如下图所示。
在这里插入图片描述
  蓝图中的Update Stamina函数的内容如下图:
在这里插入图片描述

5.1.2 创建控件切换器

  选中UI_ZSLayout的画布面板,右键,选择包裹->控件切换器
在这里插入图片描述
在这里插入图片描述

  重命名为WS,并勾选为变量
在这里插入图片描述

5.1.3 创建新的画布面板

  存放PB_ST的画布面板重命名为StatusPanel,将新建的画布面板重命名为RunesPanel
在这里插入图片描述

5.1.4 添加UI_RuneSelections

   将UI_RunesSelections拖拽到RunesPanel下面,调整大小,全覆盖,偏移值设置为0,并将其勾选为变量。
在这里插入图片描述

5.2 输入操作与交互逻辑

5.2.1 UE创建输入操作资产

  命名为:IA_ToogleUI
在这里插入图片描述
  设置其为暂停时触发
在这里插入图片描述
  老规矩,到IMC_ZS_Settings添加,并设置为tab
在这里插入图片描述

5.2.2 (cpp)交互逻辑

ZSCharBase.h

	// 声明 唤出技能面板动作UPROPERTY(EditAnywhere, Category = "Inputs")UInputAction* ToggleUIAction;// 指向UZSLayout类型的UObject实例,用于管理UI布局的生命周期// 该指针由UE5垃圾回收系统自动管理,无需手动释放UPROPERTY(EditAnywhere, BlueprintReadOnly, Category = "UI")TObjectPtr<UZSLayout> LayoutRef;#pragma region ToggleUIUFUNCTION()// Tab - 按下 - 触发的函数void ToggleUI_Started(const FInputActionValue& val);
#pragma endregionUFUNCTION(BlueprintImplementableEvent)// 获取角色当前切换的【画布面板】编号// 如当前的Status Panel 编号为:0int32 GetWSIndexInfo();UFUNCTION(BlueprintImplementableEvent)// 设置角色当前切换的【画布面板】编号,用于与UI交互// 如我设置为 0:则关闭技能面板显示void SetWSIndex(int32 index);

ZSCharBase.cpp

void AZSCharBase::SetupPlayerInputComponent(UInputComponent* PlayerInputComponent)
{Super::SetupPlayerInputComponent(PlayerInputComponent);// UIEIComp->BindAction(ToggleUIAction, ETriggerEvent::Started, this, &AZSCharBase::ToggleUI_Started);}void AZSCharBase::ToggleUI_Started(const FInputActionValue& val)
{AZSPlayerController* PC = Cast<AZSPlayerController>(Controller);// 判断当前显示的面板是否为 技能面板if (GetWSIndexInfo() == 1){// ----- 隐藏技能面板 ------// 关闭鼠标显示PC->bShowMouseCursor = false;// 将玩家控制器的输入模式设置为仅游戏模式PC->SetInputMode(FInputModeGameOnly());// 继续游戏PC->SetPause(false);// 隐藏技能面板 - 将控件切换器的索引设置为0(状态面板)SetWSIndex(0);}else{// ----- 显示技能面板 ------// 显示鼠标 - 我们要用来选技能PC->bShowMouseCursor = true;// 设置玩家控制器为游戏与UI混合输入模式,并聚焦到指定UI组件// 让玩家能够通过鼠标与UI元素进行交互FInputModeGameAndUI InputHandle;InputHandle.SetWidgetToFocus(LayoutRef->TakeWidget());PC->SetInputMode(InputHandle);// 暂停游戏PC->SetPause(true);// 显示技能面板 - 将控件切换器的索引设置为1SetWSIndex(1);}}

5.2.3(蓝图)交互逻辑

  先添加IA_ToogleUIBP_Player中。
在这里插入图片描述

  实现GetWSIndexInfo
(1)获取到Layout Ref(也就是咱们的ZSLayoutUI)
(2)拿到其下的WS,返回激活的Index。
(3)若是LayoutRef的值无效,返回-1(即:什么都不会做)
在这里插入图片描述

  实现SetWSIndex
(1)获取到Layout Ref(也就是咱们的ZSLayoutUI)
(2)(2)拿到其下的WS,设置其Index(为传入的Index)。
在这里插入图片描述


第14部分完成啦!!
十分感谢大家的阅读、点赞、收藏!!
如果有不足之处,有疑问之处,有错误地方,欢迎大家在评论区讨论、批评、指正!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/web/86235.shtml
繁体地址,请注明出处:http://hk.pswp.cn/web/86235.shtml
英文地址,请注明出处:http://en.pswp.cn/web/86235.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用Tensorflow进行线性回归和逻辑回归(八)

新的TensorFlow概念 创建简单的机器学习系统需要学习一些新的概念。 优化器 上两节介绍的元素已经提示了TensorFlow是如何完成机器学习的。你已学习了如何用张量操作来定义损失函数。缺少的是你不知道如何用TensorFlow进行梯度下降。尽管可以用TensorFlow元素直接用 Python定…

基于python代码的通过爬虫方式实现TK下载视频(2025年6月)

Tk的视频页面通常需要登录才能获取完整数据,但通过构造匿名游客的请求,我们可以绕过登录限制,提取视频的元信息(如标题、ID和播放地址)。核心思路如下: 构造匿名Cookie:通过模拟浏览器的请求,获取Tk服务器分配的游客Cookie。解析网页:利用BeautifulSoup解析HTML,定位…

火山 RTC 引擎14 设置CB

一、火山RTC引擎集成时,设置CB 1、统一设置 void NRTCEngine::SetByteRtcCBS() {UserPublishStreamCallback callback = [this](const std::string& roomId, const std::string& uid, bytertc::MediaStreamType type) {this->OnSigUserPublishStream(roomId, uid, …

BUUCTF在线评测-练习场-WebCTF习题[极客大挑战 2019]PHP1-flag获取、解析

解题思路 打开靶场&#xff0c;提示备份 常见的备份后缀名有.bak&#xff0c;.backup&#xff0c;.zip等等 这里肯定是要扫目录了&#xff0c;不知道是我的问题还是目录扫描工具的问题还是BUUCTF的问题&#xff0c;每次要扫目录能扫出一堆东西来&#xff0c;不管你用什么后缀…

对话云蝠智能:大模型如何让企业呼叫系统从 “成本中心” 变身 “价值枢纽”?

在人工智能重塑企业服务的浪潮中&#xff0c;云蝠智能&#xff08;南京星蝠科技有限公司旗下品牌&#xff09;以深厚的技术积累和行业实践&#xff0c;逐步成长为国内智能外呼领域的标杆企业。其发展路径揭示了技术自主创新与场景深度结合的必然性。 一、技术架构&#xff1a;全…

Python-文件管理

1. Open方法 Python 中的文件操作主要通过内置的 open() 函数来完成&#xff0c;该函数用于打开文件&#xff0c;并返回一个文件对象。通过文件对象&#xff0c;可以进行各种文件操作&#xff0c;如读取、写入、关闭等。 使用 open() 方法一定要保证关闭文件对象&#xff0c;即…

高速DIC技术之推进剂样品在霍普金森杆的高速冲击下的变形监测与不同材质头盔在不同冲击位置下的变形测试-VIC-3D HS非接触全场动态应变测量系统

工程领域对材料与结构在极端动态载荷下复杂变形行为的测量有强烈的需求&#xff0c;且这种测量必须是精确、全域、非接触式的&#xff0c;高速DIC技术应运而生并不断得到发展。 常见动态应用包括&#xff08;但不限于&#xff09;&#xff1a;碰撞测试、爆炸试验、冲击试验、跌…

微算法科技融合Grover算法与统一哈希函数的混合经典-量子算法技术,可在多领域高效提升文本处理效率

随着数据规模的不断扩大&#xff0c;尤其是在大数据和人工智能驱动的应用中&#xff0c;这些经典算法的线性复杂度逐渐成为瓶颈。面对数十亿级别的文本数据&#xff0c;线性时间的算法仍然难以满足实时性的要求。此外&#xff0c;经典算法在处理无序或随机文本时&#xff0c;性…

Spring Boot Security Core

依赖配置&#xff08;Maven&#xff09; xml 复制 下载 运行 <!-- Spring Security Core --> <dependency><groupId>org.springframework.security</groupId><artifactId>spring-security-core</artifactId><version>6.2.5<…

【赵渝强老师】OceanBase云平台OCP

OCP的全称是OceanBase Cloud Platform&#xff0c;即&#xff1a;OceanBase云平台。OCP面向有OceanBase管理需求的中小型用户&#xff0c;提供了基础的主机管理、OceanBase 集群和租户运维等能力。在OCP中主要包含两个组成部分&#xff0c;它们分别是&#xff1a;MetaDB和OCP S…

快速定位Swagger文档请求地址‘/v2/api-docs‘,发生未知异常.NullPointerException:精准定位+根治方案

问题现场&#xff1a;访问 http://localhost:8080/v2/api-docs 时日志报错&#xff1a; 请求地址/v2/api-docs,发生未知异常. java.lang.NullPointerException: nullat springfox.documentation.swagger2.mappers.RequestParameterMapper.bodyParameter(RequestParameterMappe…

图像处理解决方案

证件照小工具微信小程序系统是基于微擎开源生态开发的多功能图像处理平台&#xff0c;专为用户提供便捷的证件照制作及图片编辑服务。微擎系统作为一款基于 PHP 开发的开源应用生态系统&#xff0c;具备快速搭建多端应用的能力&#xff0c;其模块化架构与跨平台兼容性为证件照工…

Qt联合Halcon开发四:【详细图解】海康相机配置并链接测试

1. 下载与安装海康 MVS SDK 首先&#xff0c;访问海康机器人官网的下载中心&#xff0c;选择 “Machine Vision” 模块下的 MVS 软件包。 1. 打开浏览器&#xff0c;进入&#xff1a;https://www.hikrobotics.com/cn/ 2. 下载最新版的 MVS 安装包&#xff08;通常以 MVS_x.x.…

vue3打包后,图片丢失

前言&#xff1a; 在 webpack 中使用 require() 来引入静态图片&#xff0c;但在 vite 中就不行。 代码实现 <template><div><img :src"empty"></div> </template><script setup> // 引入本地图片(注意改成您的路径) import em…

MongoDB 8.0.10 windows11安装记录

最近在学习node&#xff0c;看的教程用的是MongoDB 5.0的&#xff0c;安装上和新版的有一些区别&#xff0c;都安装完后不能直接在C:\Program Files\MongoDB\Server\8.0\bin 这个目录使用mongo 启动&#xff0c;因为都没那文件。 摸索了下弄好了。 下载社区版最新安装包&#…

信息系统项目管理师023:云计算(2信息技术发展,网络安全面试问题

2.关键技术 云计算的关键技术主要涉及虚拟化技术、云存储技术、多租户和访问控制管理、云安全技术等。 1&#xff09;虚拟化技术 虚拟化是一个广义术语&#xff0c;在计算机领域通常是指计算元件在虚拟的基础上而不是真实的基础上运行。虚拟化技术可以扩大硬件的容量&#x…

django csrf的局限性

Django的CSRF保护机制虽被广泛应用&#xff0c;但在实际场景中存在以下关键局限性&#xff0c;需开发者特别注意&#xff1a; 一、内容类型限制&#xff08;Content-Type约束&#xff09; 仅保护特定响应类型 CSRF中间件默认只对text/html和application/xmlxhtml响应生效&#…

如何将缓存存到客户端浏览器上呢

要将缓存存到客户端浏览器&#xff0c;关键是让 浏览器接收到合适的 HTTP 缓存控制响应头。这通常通过 add_header 添加控制头来实现。 ✅ 一般做法&#xff08;强缓存 协商缓存&#xff09;&#xff1a; &#x1f539; 1. 强缓存&#xff1a;使用 Cache-Control 和 Expires …

微软ASR与开源模型分析

一、微软ASR核心能力 1. 支持场景 场景功能实时语音转文本低延迟流式识别&#xff08;会议字幕/直播转录&#xff09;音频文件转文本支持多种格式&#xff08;WAV/MP3等&#xff09;&#xff0c;批量处理长音频定制化模型针对特定行业术语&#xff08;医疗/金融&#xff09;训…

2025下半年软考中级科目难度解析与选科指南

2025年下半年软考中级科目共有6科&#xff0c;包括系统集成项目管理工程师、信息系统管理工程师、信息安全工程师、网络工程师、软件设计师以及多媒体应用设计师。面对众多科目&#xff0c;考生应如何做出选择&#xff1f; 一、考试时间安排 在开始备考之前&#xff0c;了解考…