23. UE5 RPG制作属性面板（一）

news2024/9/30 13:29:40

随着角色的属性越来越多，我们不能每次都进行showdebug abilitysystem进行查看，而且玩家也需要查看角色属性，所以需要一个查看玩家角色属性的面板。
在前面，我们创建三种类型的属性

  1. Primary Attributes（主要属性）可以进行加点，装备提供属性点等
  2. Secondary Attributes （次级属性）无法加点，基于主要属性或者其它次级属性设置值
  3. Vital Attributes （至关重要的属性）主要是血量和蓝量

我们制作的面板就需要将这三大块区分开来，主要属性增加加点按钮，次级属性只做显示，重要属性在显目的位置显示。

分析实现属性面板需要创建的Widget

考虑到属性框的复用性，尽可能重复使用资源。我们至少需要创建四个Widget用于展示

  1. 创建一个用于显示属性数值的Widget，我们命名为WBP_FramedValue
  2. 创建一个显示一行内容并能够显示属性名称和数值的Widget，命名为WBP_TextValueRow
  3. 创建一个可以先属性名称和数值，并可以添加点击按钮的Widget，命名为WBP_TextValueButtomRow
  4. 创建一个包含所有显示内容的Widget，命名为WBP_AttributeMenu
    接下来，我们将按照此步骤，一个个的进行创建。

在这里先提前说一下，创建的Widget都是通过之前制作的Widget基类创建的，如果第一次看的小伙伴，记得翻一下我之前的文章
在这里插入图片描述

创建WBP_FramedValue

先创建一个WBP，将面板调整成所需，按照内部需要调整大小
在这里插入图片描述
然后，添加一个尺寸框
在这里插入图片描述
将此设置为变量，设置高度和宽度重载，这样，我们可以实现通过参数修改它的大小
在这里插入图片描述
然后创建两个浮点参数，用于设置它的宽高，并连接蓝图，修改宽度和高度重载，参数别忘记设置默认值
在这里插入图片描述
我们可以选中这些节点，右键将其合并一个函数
在这里插入图片描述
重新命个名，就简洁了很多
在这里插入图片描述
添加一个覆层，这个覆层的作用主要是下面的UI可以在上面重复叠加，我们就可以将背景，按钮都叠加到上面。
在这里插入图片描述
在覆层下面添加一个Image，作为背景
在这里插入图片描述
背景设置为填充，这样，背景就可以填满整个覆层
在这里插入图片描述
图像默认颜色为白色，我们可以设置笔刷Brush来修改它的颜色，也可以修改颜色值，这里我添加了一个ui材质来修改背景颜色
在这里插入图片描述
考虑到后续有修改需求，我们设置使用蓝图去修改它的背景，我们可以在变量上面设置它的brush
在这里插入图片描述
背景添加完成以后，我们接着添加一个边框，接着在下面添加一个边框，同样的设置填充
在这里插入图片描述
在这里插入图片描述
边框直接设置了一张边框图片，然后设置为Border（边界，绘制为3x3边界，侧边和中部为空）
在这里插入图片描述
最后添加一个文本，用于显示内部的内容
在这里插入图片描述
设置文本对齐，修改字体，设置阴影等。
在这里插入图片描述
实现完成的效果如下
在这里插入图片描述

创建WBP_TextValueRow

和之前一样，先创建尺寸框，设置可以自定义尺寸
在这里插入图片描述
大小设置为所需，尺寸框宽度高度重载
在这里插入图片描述
增加两个变量，设置宽高，宽度设置为450，高度为60，用于显示属性名称和数值
在这里插入图片描述
添加一个水平框，用于承载文本 数值等，水平框默认是左右上下对齐的。
在这里插入图片描述
先添加一个文本
在这里插入图片描述
文本设置水平向左对齐，垂直居中对齐
在这里插入图片描述
显示效果如下
在这里插入图片描述
修改一下字体，大小，字间距，还有加了描边效果
在这里插入图片描述
文本修改完成，接着将前面制作的WBP_FramedValue 添加进来
在这里插入图片描述
修改尺寸为填充，水平对齐向右对齐，垂直居中对齐
在这里插入图片描述
效果如下
在这里插入图片描述
后面添加一个间隔区，用于和后面在主要属性哪里添加增加属性按钮隔开
在这里插入图片描述
设置一下间隔区的大小
在这里插入图片描述

接着添加一个命名的插槽，这个插槽可以在后面添加按钮使用
在这里插入图片描述
这个插槽会在制作后面的Widget的时候使用，最终效果如下
在这里插入图片描述

创建WBP_TextValueButtomRow

在创建WBP_TextValueButtomRow这里，我们不需要基于c++创建，而是基于上面的WBP_TextValueRow创建，然后在插槽里面添加一个按钮。
在这里插入图片描述
创建打开会显示WBP_TextValueRow的界面，左侧发现插槽给我们暴露了出来
在这里插入图片描述
思考了一下，按钮会经常使用，在不同的地方，我们可以考虑创建一个按钮的Widget，然后在相同的按钮我们只需要使用一套即可。
创建一个新的控件蓝图，命名为WBP_Button
在这里插入图片描述
老套路，先添加一个尺寸框，用来设置尺寸
在这里插入图片描述
屏幕尺寸修改为所需，高度宽度设置重载
在这里插入图片描述
接着编写蓝图增加两个变量去控制可以修改尺寸
在这里插入图片描述
在下面添加一个覆层
在这里插入图片描述

覆层下面添加一个图像，用于设置背景，这里默认的用于显示边框
在这里插入图片描述

修改它的图像，以及大小，设置对齐方式
在这里插入图片描述
增加一个蓝图，修改图像的笔刷，方便个性化定制，记得设置变量的默认值
在这里插入图片描述
接着添加一个按钮
在这里插入图片描述
设置对齐，在样式这里普通添加图像，主要是为了看效果
在这里插入图片描述

效果如下
在这里插入图片描述
接着，我们增加在蓝图可以设置按钮的样式，创建一个按钮样式节点，我们需要修改Normal Hovered Pressed Disabled四种情况下的样式。
在这里插入图片描述
将四个状态笔刷都设置为变量，可以通过变量设置默认值以及修改
在这里插入图片描述
我们需要在按钮上面显示图标，那么在按钮上添加一个文本
在这里插入图片描述
设置一下文本样式，游戏不需要修改的，要在属性上面设置
在这里插入图片描述
增加一个蓝图，修改文本
在这里插入图片描述
在蓝图增加一些变量对文本进行初始化
在这里插入图片描述
如果找不到系统默认的Robot的字体，需要开启显示引擎内容
在这里插入图片描述

记得把变量上的眼睛点开，我们才能够在蓝图对它的属性进行修改
在这里插入图片描述
记得将蓝图折叠成函数，这样更美观
在这里插入图片描述
到这里按钮的widget的样式就算做完了，我们打开WBP_TextValueButtomRow，在插槽下面添加一个覆层，然后在覆层下面添加一个制作的按钮
在这里插入图片描述
按钮的对齐设置一下，下面就可以看到我们之前设置的变量属性，可以直接修改。
在这里插入图片描述
最终，也实现了效果
在这里插入图片描述

创建WBP_AttributeMenu

我们将所需的Widget部件都创建完成了，接下来，要使用它们进行拼合，制作出来我们所需要的面板。

接着创建一个新的widget，命名为WBP_AttributeMenu
在这里插入图片描述
屏幕尺寸修改为所需
在这里插入图片描述
老套路，加个尺寸框
在这里插入图片描述
设置一下尺寸框的名称，修改一下宽高
在这里插入图片描述
在尺寸框下面添加一个覆层
在这里插入图片描述

在覆层下面添加一个图像，作为背景使用
在这里插入图片描述
设置一下背景
在这里插入图片描述
接着在覆层下面添加一个图像作为边框使用
在这里插入图片描述
样式为现在这样
在这里插入图片描述
添加一个包裹框，包裹住接下来添加的内容，包裹框的功能在于能够自动换行，我们就可以在包裹框内拼ui了。
在这里插入图片描述
包裹框设置一下填充属性
在这里插入图片描述
修改一下字体样式，注意设置一下填充空白空间，这样，它能够独占一整行，你再放置内容，将会从新的一行开始显示。
在这里插入图片描述
接着再添加一个文本，会发现和之前的文本重叠在了一块
在这里插入图片描述
我们可以修改它的填充跨度，来实现强制换行
在这里插入图片描述
修改样式
在这里插入图片描述
样式如下
在这里插入图片描述
我们可以在文本中间添加间隔区节点，增加两行文字的间距
在这里插入图片描述
x尺寸设置的大点，能够占用一行即可，y尺寸按个人喜好调整
在这里插入图片描述
接下来，添加一个WBP_TextValueRow，用于显示角色剩余可加点数
在这里插入图片描述
在这里插入图片描述
有点长，我们记得把WBP_TextValueRow里面变量的眼睛打开，就可以在menu页面调整它的大小了
在这里插入图片描述
修改一下，显示就合理了
在这里插入图片描述
接着在下面添加四个，并修改一下宽度，调整一下节点顺序
在这里插入图片描述
效果如下
在这里插入图片描述
接下来，我们需要创建次级属性显示，首先创建一个次级属性的标题，可以直接复制主要属性的节点
在这里插入图片描述
添加一个尺寸框，作为次级属性的父节点，由于次级属性比较多，我们可以让它滚动起来
在这里插入图片描述

设置大小，和填充空白空间，对齐方式，它就能够居中对齐了。
在这里插入图片描述
在尺寸框下面添加一个滚动框，如果内部内容超过了滚动框的尺寸，将能够滚动查看。
在这里插入图片描述
在滚动框下面添加10个WBP_TextValueRow用于显示次级属性
在这里插入图片描述
我们会发现右侧也会出现滚动条，效果或许不好，我们后续再调。
在这里插入图片描述

添加关闭按钮

直接在外部的overlay下面添加一个WBP_Button即可实现对按钮的添加
在这里插入图片描述
修改属性，对齐到右下角，填充一下右下，和边缘有些距离
在这里插入图片描述
效果如下
在这里插入图片描述

到这里，大概得UI创建的差不多，后面将创建一些不通用的UI和函数修改属性名称和数值。

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

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

相关文章

鸿蒙Harmony应用开发—ArkTS-@Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化

鸿蒙Harmony应用开发—ArkTS-@Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化

上文所述的装饰器仅能观察到第一层的变化，但是在实际应用开发中，应用会根据开发需要，封装自己的数据模型。对于多层嵌套的情况，比如二维数组，或者数组项class，或者class的属性是class，他们的第二…
阅读更多...
vscode的一些技巧

vscode的一些技巧

技巧1：调试时传参数 在launch.json的configuration中"pwd"或者"program"选项之后添加如下选项： “--args”:["参数1", "参数2", ..., "参数3] 参数之间使用逗号隔开 技巧2：断点 普通断点使…
阅读更多...
企业微信变更主体公证怎么弄？

企业微信变更主体公证怎么弄？

企业微信变更主体有什么作用？现在很多公司都用企业微信来加客户，有时候辛辛苦苦积累了很多客户，但是公司却因为各种各样的原因需要注销，那么就需要通过企业微信变更主体的方法，把企业微信绑定的公司更改为最新的。企业…
阅读更多...
生成模型概述

生成模型概述

文章目录 生成模型概述一、生成模型类型二、生成对抗网络（GANs）三、自回归模型（Autoregressive Models）四、扩散模型（Diffusion Models）五、流模型（Flow-based Models）参考 生成模型…
阅读更多...
RIPGeo代码理解（六）main.py（运行模型进行训练和测试）

RIPGeo代码理解（六）main.py（运行模型进行训练和测试）

​代码链接：RIPGeo代码实现 ├── preprocess.py # 预处理数据集并为模型运行执行IP聚类 ├── main.py # 运行模型进行训练和测试 ├── test.py #加载检查点，然后测试 一、导入各种模块和数据库 import torch.nnfrom lib.utils import * import argparse i…
阅读更多...
Http中Host，Referer，Origin和Access-Control-Allow-Origin

Http中Host，Referer，Origin和Access-Control-Allow-Origin

Http中Host，Referer，Origin和Access-Control-Allow-Origin 文章目录 Http中Host，Referer，Origin和Access-Control-Allow-OriginHost定义特性作用 Referer定义特性作用 Origin定义特性作用 Access-Control-Allow-Origin定义特性作用…
阅读更多...
登录与注册功能（简单版）（4）注册时使用Session校验图片验证码

登录与注册功能（简单版）（4）注册时使用Session校验图片验证码

目录 1、需求及实现流程分析 2、实现 1）新建register.jsp 2）导入CheckCodeUtil工具类 3）新建CheckCodeServlet 4）修改RegisterServlet 5）启动访问 1、需求及实现流程分析 验证码的作用：防止机器自动…
阅读更多...
Maven，pom.xml，查找 子jar包

Maven，pom.xml，查找 子jar包

在IDEA打开pom.xml&#xff0c;会看到这里&#xff1a; 然后如果有需要&#xff0c;把相关的 子jar包 去掉 <dependency><groupId>XXX</groupId><artifactId>XXX</artifactId><exclusions><exclusion><artifactId>xxx</a…
阅读更多...
[java基础揉碎]代码块

[java基础揉碎]代码块

目录 基本介绍: 基本语法: 代码块的好处: 1)相当于另外一种形式的构造器(对构造器的补充机制)&#xff0c;可以做初始化的操作 2)场景:如果多个构造器中都有重复的语句&#xff0c;可以抽取到初始化块中&#xff0c;提高代码的重用性 如下: 代码块的注意事项和使用细节: …
阅读更多...
详细安装步骤：vue.js 三种方式安装(vue-cli)

详细安装步骤：vue.js 三种方式安装(vue-cli)

Vue.js&#xff08;读音 /vjuː/, 类似于 view&#xff09;是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手&#xff0c;还便于与第三方库或既有项目整合。 三种 Vue.js 的安装方法&…
阅读更多...
探索设计模式的魅力：精准、快速、便捷：游标尺模式在软件设计中的三大优势

探索设计模式的魅力：精准、快速、便捷：游标尺模式在软件设计中的三大优势

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;并且坚持默默的做事。 精准、快速、便捷&#xff1a;游标尺模式在软件设计中的三大优势 文章目录 一、案例场景&…
阅读更多...
化工企业能源在线监测管理系统，智能节能助力生产

化工企业能源在线监测管理系统，智能节能助力生产

化工企业能源消耗量极大&#xff0c;其节能的空间也相对较大&#xff0c;所以需要控制能耗强度&#xff0c;保持更高的能源利用率。 化工企业能源消耗现状 1、能源管理方面 计量能源消耗时&#xff0c;计量器具存在问题&#xff0c;未能对能耗情况实施完全计量&#xff0c;有…
阅读更多...
【电气安全】ASCP电气防火限流式保护器/末端回路线路保护

【电气安全】ASCP电气防火限流式保护器/末端回路线路保护

为什么要使用电气防火限流式保护器&#xff1f; 应急管理部消防救援局统计&#xff0c;在造成电气火灾事故的原因中&#xff0c;最为主要的当为末端线路短路&#xff0c;在电气火灾事故中占比高达70%以上。如何效预防末端线路短路引发的电气火灾事故&#xff1f; 现阶段最为常…
阅读更多...
逆向爬虫技术的进阶应用与实战技巧

逆向爬虫技术的进阶应用与实战技巧

前言 在互联网的海洋中&#xff0c;数据是无价的财富。爬虫技术作为获取这些数据的重要手段&#xff0c;一直备受关注。然而&#xff0c;随着网站反爬虫机制的日益完善&#xff0c;简单的爬虫程序已经很难满足我们的需求。因此&#xff0c;掌握爬虫逆向技术&#xff0c;突破反爬…
阅读更多...
【C语言】编译链接

【C语言】编译链接

1、宏&#xff08;***&#xff09; 1.1#define定义宏 #define 机制包括了一个规定&#xff0c;允许把参数替换到文本中&#xff0c;这种实现通常称为宏&#xff08;macro&#xff09;或定义 宏&#xff08;define macro&#xff09;。 注意&#xff1a;用于对数值表达式进行求…
阅读更多...
React中 类组件 与 函数组件 的区别

React中 类组件 与 函数组件 的区别

类组件 与 函数组件 的区别 1. 类组件2. 函数组件HookuseStateuseEffectuseCallbackuseMemouseContextuseRef 3. 函数组件与类组件的区别3.1 表面差异3.2 最大不同原因 1. 类组件 在React中&#xff0c;类组件就是基于ES6语法&#xff0c;通过继承 React.component 得到的组件…
阅读更多...
Linux相关命令（2）

Linux相关命令（2）

1、W &#xff1a;主要是查看当前登录的用户 在上面这个截图里面呢&#xff0c; 第一列 user &#xff0c;代表登录的用户&#xff0c; 第二列&#xff0c; tty 代表用户登录的终端号&#xff0c;因为在 linux 中并不是只有一个终端的&#xff0c; pts/2 代表是图形界面的第…
阅读更多...
01-DBA自学课-安装部署MySQL

01-DBA自学课-安装部署MySQL

一、安装包下载 1&#xff0c;登录官网 MySQL :: MySQL Downloads 2&#xff0c;点击社区版下载 3&#xff0c;找到社区服务版 4&#xff0c;点击“档案”Archives 就是找到历史版本&#xff1b; 5&#xff0c;选择版本进行下载 本次学习&#xff0c;我们使用MySQL-8.0.26版本…
阅读更多...
Redis入门到实战-第五弹

Redis入门到实战-第五弹

Redis实战热身Hashes篇 完整命令参考官网 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容不一定100%复现, 还要以官方信息为准 https://redis.io/Redis概述 Redis是一个开源的&#xff08;采用BSD许可证&#xff09;&#xff0c;用作数据库、缓存、消息代理和…
阅读更多...
【Delphi JCL库文件解剖 1】库文件的大体脉络

【Delphi JCL库文件解剖 1】库文件的大体脉络

JCL库是一个开源的Delphi库文件，下载到它很容易，可是想能灵活运用它却并不容易。下面是这个库文件的大体文件脉络，咱们要分析的核心还是在 source 源代码文件。 bin - 示例应用程序可执行文件的常见位置 docs - 读…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023