77. UE5 RPG 创建角色的技能栏

在前面的文章里，我们实现了角色属性技能和场景。接下来，我们要优化角色显示UI，在屏幕底部显示角色血量，蓝量，技能和经验值。

创建新的用户控件

选择创建新的控件蓝图
在这里插入图片描述
父类为我们自定义的RPGUserWidget，这是我们增加了一些可以获取数据的C++类
在这里插入图片描述
因为它只需要在一部分区域显示，我们将它的尺寸修改为自定义
在这里插入图片描述
修改尺寸
在这里插入图片描述
添加一个覆层，命名为Overlay_Root
在这里插入图片描述
我们要左右两侧分别显示血量和蓝量，中间显示技能，这是使用水平框分割，命名为BaseBox
在这里插入图片描述
修改它的对齐为填充，这样，它就可以填充整个控件
在这里插入图片描述
接着在下面添加三个水平框，修改命名，方便后续维护
在这里插入图片描述
接着我们将其设置为填充，血量和蓝量框设置0.2，中间技能设置0.6，填充会按数值计算，将内部数值加起来，然后查看比例设置宽度占比
在这里插入图片描述
效果如下
在这里插入图片描述
技能框里面还要区分主动技能和被动技能，这里添加两个垂直框将其区分开
在这里插入图片描述
主动技能填充设置0.9， 被动技能设置0.1，效果如下
在这里插入图片描述
接着我们在主动技能这里增加三个框，上面显示名称的垂直框，下面为显示技能图标的水平框
在这里插入图片描述
修改名称，方便查看
在这里插入图片描述
修改它们的填充
在这里插入图片描述
接着，在顶部的盒子内再增加两个水平框，第一个水平框用于显示下面为主动技能，另一个用于提示玩家技能键位
在这里插入图片描述
它们两个设置为填充，然后对等分空间即可
在这里插入图片描述
到这里，我们将区域划分完成，以下是完整效果，后面我们将填充图标和文字
在这里插入图片描述

填充图标

我们将之前制作的血量拖入
在这里插入图片描述
将其设置为填充
在这里插入图片描述
蓝量进行同样的操作，结果如下
在这里插入图片描述
接着，在OffensiveText下面添加一个文本
在这里插入图片描述
按照以下设置居中
在这里插入图片描述
然后修改样式，有一个不错的效果
在这里插入图片描述
然后在被动技能这边，添加两个垂直框
在这里插入图片描述
将其设置为填充，一个0.2，显示文字，一个0.8，用于装填两个被动技能
在这里插入图片描述
将主动技能的文字复制一下，修改文字内容
在这里插入图片描述
接下来，我们设置按键的键位提示文字，添加6个垂直框，并设置填充
在这里插入图片描述
将主动技能文本框赋值，并修改显示内容
在这里插入图片描述
接着在显示技能的区域创建六个对于的垂直框，用于后续添加技能图标
在这里插入图片描述
接着在被动技能框里增加三个垂直框，修改名称，两个用于放置被动技能，一个用于填充空白
在这里插入图片描述
将它们都设置为填充，然后将填充空白的填充值修改为0.6
在这里插入图片描述

创建技能控件

创建一个SpellGlobes文件夹，存储我们接下来的用户控件
在这里插入图片描述
基于以前创建的用户控件基类，创建一个新的用户控件蓝图类
在这里插入图片描述
命名为WBP_SpellGlobe
在这里插入图片描述
这个内容的创建和我们之前制作血瓶和蓝瓶有相似之处，文章在8. UE5 RPG创建UI（上），区别在于技能不是进度条，所以，我们按照之前的做法，将进度条去掉，修改为图标即可。
我们将基础的制作完成
在这里插入图片描述
技能多了一个冷却功能，我们可以使用一个图去实现冷却，也可以使用文字提示冷却剩余时间，这里我们使用文字表示。
在这里插入图片描述
接着我们实现一个函数，用于在技能进入冷却时，将背景变暗
在这里插入图片描述

将技能控件添加组上面

接下来，我们将技能添加到技能组件里面，填充所有的主动技能和被动技能，并将其设置好填充，调整技能内的padding
在这里插入图片描述
接下来，我们还需要解决一个问题，就是如果技能为空的时候，我们将技能背景去掉，法线它是一片白
在这里插入图片描述
这不是我们想要的效果，我们增加一个函数用于其在没有技能设置时，颜色为完全透明，添加一个透明的笔刷，用于修改笔刷的透明度
在这里插入图片描述

将其颜色修改为完全透明
在这里插入图片描述
在函数内部将技能图标和背景都设置为透明的笔刷
在这里插入图片描述
在构造时调用查看效果
在这里插入图片描述
我们能清空了，肯定需要还要能够更新，我们增加一个函数用于设置它的需要显示的笔刷，我们增加两个参数可以传入图标和背景
在这里插入图片描述
在构造时调用测试函数
在这里插入图片描述
效果又恢复回来了
在这里插入图片描述
现在的效果，就变成了空的技能，用于显示
在这里插入图片描述

应用新的技能栏

我们创建了新的技能栏，接下来，我们想替换默认的那两个球。
打开WBP_Overlay，将我们之前显示血量的球给删除掉
在这里插入图片描述
将它拖入进来
在这里插入图片描述

修改它的锚点
在这里插入图片描述
修改位置和对其
在这里插入图片描述
效果就是对其底部进行一些偏移
在这里插入图片描述
接着，我们需要修改Controller的设置，将之前的设置删除
在这里插入图片描述
修改为设置技能栏的controller
在这里插入图片描述
接着在技能栏的事件里面对血量UI和蓝量UI进行设置
在这里插入图片描述
法线血可以正常掉，没问题
在这里插入图片描述

制作经验条

设置技能的UI我们告一段落，我们还缺少一个经验条用来显示角色当前获取到的经验值。
经验条也是一个进度条，我们可以在进度条的文件夹内新创建一个蓝图控件。
在这里插入图片描述
命名为WBP_XPBar
在这里插入图片描述
先修改尺寸为自定义，定义宽880 高50
在这里插入图片描述
添加一个Overlay
在这里插入图片描述
添加一个图像作为边框，设置填充
在这里插入图片描述
接着添加一个进图条，用于表现经验进度，注意调整好填充
在这里插入图片描述
修改它的背景色和填充图
在这里插入图片描述
修改进度百分比
在这里插入图片描述
查看效果
在这里插入图片描述
接下来就考虑将其放置在技能框里，但是技能框的长度好像无法容纳它，我们直接放到WBP_Overlay里面，方便调整
在这里插入图片描述
我们将其拖入overly中，它默认很小
在这里插入图片描述
我们将其调整为编辑时的大小
在这里插入图片描述
修改其的锚点，中间最下方
在这里插入图片描述
然后修改对齐和位置
在这里插入图片描述
最终效果如下
在这里插入图片描述
然后运行测试效果
在这里插入图片描述

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

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

相关文章

CIRKD

CIRKD

环境不好满足，不建议复现
阅读更多...
【SOLID原则前端中的应用】里氏替换原则（Liskov Substitution Principle，LSP）- vue3示例

【SOLID原则前端中的应用】里氏替换原则（Liskov Substitution Principle，LSP）- vue3示例

里氏替换原则（Liskov Substitution Principle，LSP）规定，子类对象必须能够替换父类对象，并且程序的行为保持不变。 在Vue 3中，这意味着我们在创建可替换的组件时，应该确保子组件能够完全替代父组…
阅读更多...
LeetCode 744, 49, 207

LeetCode 744, 49, 207

目录 744. 寻找比目标字母大的最小字母题目链接标签思路代码 49. 字母异位词分组题目链接标签思路代码 207. 课程表题目链接标签思路代码 744. 寻找比目标字母大的最小字母 题目链接 744. 寻找比目标字母大的最小字母 标签 数组 二分查找 思路 本题比 基础二分查找 难的一…
阅读更多...
Vue3+.NET6前后端分离式管理后台实战(二十九)

Vue3+.NET6前后端分离式管理后台实战(二十九)

1，Vue3.NET6前后端分离式管理后台实战(二十九)
阅读更多...
Linux笔记之二

Linux笔记之二

Linux笔记之二 一、文件属性学习二、软链接和硬链接1.软链接2.硬链接 三、Vim编辑器四、账号管理总结 一、文件属性学习 Linux 系统是一种典型的多用户系统，不同的用户处于不同的地位，拥有不同的权限。为了保护系统的安全性，Linux系统对不同…
阅读更多...
cf 7.7

cf 7.7

Problem - C - Codeforces 大致意思&#xff1a; 找前缀&#xff0c;排序后使得本位之前数字和等于该位 &#xff08;以下代码超时了&#xff09; #include<bits/stdc.h> typedef long long ll;#define IOS ios::sync_with_stdio(0),cin.tie(0),cout.tie(0) const ll …
阅读更多...
笔记15：while语句编程练习

笔记15：while语句编程练习

练习一&#xff1a; 编写程序&#xff0c;求 2^24^26^2...n^2? -直到累加和大于或等于 10000 为止&#xff0c;输出累加和 -输出累加式中的项数&#xff0c;以及最大的数 n #include<stdio.h> int main() {int sum 0;int i 1;int n 0;while(sum < 10000)//将sum…
阅读更多...
Objects365数据集介绍

Objects365数据集介绍

Objects365数据集介绍 什么是Objects365数据集&#xff1f;数据集的规模与内容数据集的特点数据集下载 什么是Objects365数据集&#xff1f; Objects365是一个大规模、高质量的物体检测数据集。该数据集旨在推动物体检测技术的发展&#xff0c;特别是在真实世界场景下的应用。O…
阅读更多...
嵌入式c语言——类型修饰符

嵌入式c语言——类型修饰符

register&#xff0c;将变量保存在寄存器中&#xff0c;使得访问速度增加 const是常量&#xff0c;static是静态量&#xff0c;volatile是
阅读更多...
云原生技术架构详解

云原生技术架构详解

云原生技术最全详解(图文全面总结) 容器技术 容器技术&#xff1a;是将应用程序、及其所有依赖项&#xff0c;打包到一个独立的、可移植的容器中。 如下图所示: 容器技术的实现&#xff0c;最典型的就是以Docker为代表的。 如下图所示&#xff1a; 主要解决&#xff1a; 1、…
阅读更多...
flask模块化、封装使用cache(flask_caching)

flask模块化、封装使用cache(flask_caching)

1.安装flask_caching库 pip install flask_caching 2.创建utils Python 软件包以及cache_helper.py 2.1cache_helper.py代码 from flask_caching import Cachecache Cache()class CacheHelper:def __init__(self, app, config):cache.init_app(app, config)staticmethoddef…
阅读更多...
Unity编辑器扩展之Inspector面板扩展

Unity编辑器扩展之Inspector面板扩展

内容将会持续更新&#xff0c;有错误的地方欢迎指正&#xff0c;谢谢! Unity编辑器扩展之Inspector面板扩展 TechX 坚持将创新的科技带给世界&#xff01; 拥有更好的学习体验 —— 不断努力&#xff0c;不断进步&#xff0c;不断探索 TechX —— 心探索、心进取&#xff…
阅读更多...
JavaScript 原型链那些事

JavaScript 原型链那些事

在讲原型之前我们先来了解一下函数。 在JS中&#xff0c;函数的本质就是对象&#xff0c;它与其他对象不同的是&#xff0c;创建它的构造函数与创建其他对象的构造函数不一样。那产生函数对象的构造函数是什么呢&#xff1f;是一个叫做Function的特殊函数&#xff0c;通过newFu…
阅读更多...
数据库、创建表、修改表

数据库、创建表、修改表

一、数据库 1、登陆数据库 2、创建数据库zoo 3、修改数据库zoo字符集为gbk 4、选择当前数据库为zoo 5、查看创建数据库zoo信息 6、删除数据库zoo 二、创建表 1、创建一个名称为db_system的数据库 2、在该数据库下创建两张表&#xff0c;具体要求如下 员工表 user…
阅读更多...
VMware虚拟机配置桥接网络

VMware虚拟机配置桥接网络

转载&#xff1a;虚拟机桥接网络配置 一、VMware三种网络连接方式 VMware提供了三种网络连接方式&#xff0c;VMnet0, VMnet1, Vmnet8&#xff0c;分别代表桥接&#xff0c;Host-only及NAT模式。在VMware的编辑-虚拟网络编辑器可看到对应三种连接方式的设置&#xff08;如下图…
阅读更多...
【JVM系列】Full GC（完全垃圾回收）的原因及分析

【JVM系列】Full GC（完全垃圾回收）的原因及分析

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
【C++ OpenCV】机器视觉-二值图像和灰度图像的膨胀、腐蚀、开运算、闭运算

【C++ OpenCV】机器视觉-二值图像和灰度图像的膨胀、腐蚀、开运算、闭运算

原图 结果图 //包含头文件 #include <opencv2/opencv.hpp>//命名空间 using namespace cv; using namespace std;//全局函数声明部分//我的腐蚀运算 Mat Erode(Mat src, Mat Mask, uint32_t x0, uint32_t y0) {uint32_t x 0, y 0;Mat dst(src.rows, src.cols, CV_8U…
阅读更多...
MySQL：保护数据库

MySQL：保护数据库

保护数据库 1. 用户1.1 创建用户1.2 查看用户1.3 删除用户1.4 修改密码 2. 权限2.1 授予权限2.2 查看权限2.3 撤销权限 之前都是介绍本地数据库而你自己就是数据库的唯一用户&#xff0c;所以不必考虑安全问题。但实际业务中数据库大多放在服务器里&#xff0c;你必须妥善处理好…
阅读更多...
001，函数指针是一种特殊的指针，它指向的是一个函数地址，可以存储函数并作为参数传递，也可以用于动态绑定和回调函数

001，函数指针是一种特殊的指针，它指向的是一个函数地址，可以存储函数并作为参数传递，也可以用于动态绑定和回调函数

函数指针是一种特殊的指针 001&#xff0c;函数指针是一种特殊的指针&#xff0c;它指向的是一个函数地址&#xff0c;可以存储函数并作为参数传递&#xff0c;也可以用于动态绑定和回调函数 文章目录 函数指针是一种特殊的指针前言总结 前言 这是ai回答的标准答案 下面我们…
阅读更多...
set的应用（C++）

set的应用（C++）

set的使用 【基本用法】 大家可以敲一下这段代码体会一下set的基本初始化和使用 #include <iostream> #include <set> #include <vector> using namespace std;int main() {set<int> st1; // 空的set// 使用迭代器构造string str("abcdef"…
阅读更多...
最新文章

Copyright @ 2022~2023