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

已于 2024-09-02 14:30:36 修改
阅读量1.4k 收藏 16
点赞数 21
分类专栏： unreal UE5 GAS RPG 文章标签： ue5 前端 javascript
于 2024-03-23 19:51:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30100043/article/details/136907829
版权
unreal 同时被 2 个专栏收录
124 篇文章 75 订阅
订阅专栏
UE5 GAS RPG
101 篇文章 35 订阅
订阅专栏
本文详细描述了如何在游戏开发中创建一个查看玩家角色属性的面板，通过复用WBP_FramedValue、WBP_TextValueRow和WBP_AttributeMenu等Widget，分别处理主要属性的加点、次级属性的显示和至关重要的属性的突出显示，以提升UI设计的效率和可维护性。
摘要由CSDN通过智能技术生成

随着角色的属性越来越多，我们不能每次都进行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和函数修改属性名称和数值。

暮志未晚NAN
关注
专栏目录
UE5 GAS 学习笔记 1.3属性Attribute
CloudHuCoding
06-12 1103
详细讲解属性Attribute相关的概念
UE5 GAS 学习笔记 1.4属性集
CloudHuCoding
06-12 767
这一节讲解属性集，从定义到设计，再在后文中实践。
UE4 射击游戏 02--结合GAS
大王怕我去巡山
08-02 669
GDD: 创建使用技能系统的射击游戏：结合action rpg来看C++最主要的两个大块就是Ability和Item基类 另外后期需要的有UI（Inventory,准星。小地图，GameMode中记分板）目前来说和GAS无关 UI要好看,系统要稳定 定义，不自动装弹，所有都需要玩家手动进行（和生活中一样） GAS的使用思想： 所用技能作用的属性都是AttributeSet,所以说子弹数...
人物属性面板上的模型
bread's code
06-05 481
1.直接画一个模型 2.rendertotexture:uitexture
【UE4】编辑器开发（四）属性面板（Details）拓展
胡嘿嘿
04-20 5244
文章目录一、自定义类的属性面板二、自定义类属性设置 一个蓝图类会有一个属性面板，即Details面板。在编辑蓝图类或实例化蓝图类后，都可以编辑这个Details面板，下面第一节就是介绍如何自定义此面板内容。当一个蓝图类声明一个蓝图变量时，其Details面板会出现对应的属性设置，如何自定义这个属性设置的内容和样式就是第二节的内容。 下图是一个蓝图类的属性（Details）面板，其中的CustomC...
【UE】使用FindFProperty查找对象中的属性
weixin_51638732的博客
12-21 414
使用FindFProperty查找对象中的属性
【UE5】C++ 关于CreateWidget函数的使用注意事项
weixin_48329116的博客
12-25 1160
自己加了两句，必须源码版才能编译，安装版的UE是不能在普通Actor、Charactor等类里使用这个函数的，只能在UWidget、UWidgetTree、APlayerController、UGameInstance、UWorld类里使用。所以如果想通过一个人物打开一个商店Widget，最好使用蓝图的方式，蓝图里的一些函数节点更加方便。这是UserWidget.h里关于CreateWidget函数的介绍。
20. UE5 GAS RPG创建次级属性并实现设置
现在学习也不晚
03-18 1078
在游戏中，游戏的角色属性会根据游戏玩法也不同，当前制作的RPG中，主要分为两种属性，一种是主要属性另一种次级属性。这两种类型属性的区分主要数值的计算是否需要依托于其它数值举个例子，你的体力值主要在于角色的个人成长增加以及装备等的增加，它不依托于其它属性，所以是主要属性。而你的血量上限需要依托于体力数值，根据体力进行一定的比例设置血量上线，它需要依托于体力属性，所以是次级属性。
UE5 GAS 学习笔记 10.2 GASShooter 中文注释源码
06-20
在本篇UE5 GAS（Gameplay Ability System）学习笔记中，我们将深入探讨GASShooter项目，这是一个基于Unreal Engine 5的示例项目，它为玩家提供了使用各种能力进行射击游戏的体验。通过分析GASShooter的源码和内容，...
UE5 GAS 学习笔记0.2配置插件
CloudHuCoding
06-11 1557
GAS插件详细配置流程
UE5 GAS 学习笔记 1.1能力系统组件Ability System Component
CloudHuCoding
06-11 1654
介绍GAS的核心能力系统组件Ability System Component
ue5如何切换控件蓝图里面的按钮图片
weixin_35750953的博客
12-22 851
在 UE5 中，您可以使用以下步骤来切换控件蓝图里的按钮图片： 在 UE4 的资源管理器中，找到您想要使用的图片并将其拖放到场景中。 在控件蓝图中，选择您希望更改图片的按钮。 在按钮的属性面板中，找到“图片”属性并单击其旁边的编辑按钮。 在弹出的编辑器中，选择“使用图像”选项卡。 在“图像”字段中，选择您想要使用的图片资源。 单击“确定”按钮来关闭编辑器，然后在游戏中运行该控件蓝图，您...
27. UE5 GAS RPG同步面板属性（三）
最新发布
现在学习也不晚
03-30 1137
我们将在这一篇里实现对AttributeMenuWidgetController创建，可以将数据从AS里同步到UI上面。
【UE实用技巧】角色设计（属性）
sjadow的博客
08-08 446
步骤2：添加HP伤害步骤3：场景发射火球攻击步骤4：加血光环步骤6：添加NPC步骤10：添加瞬移。
UE5-UMG学习笔记
ttod的博客
11-22 1065
UE5-UMG学习笔记
24. UE5 GAS RPG制作属性面板（二）
现在学习也不晚
03-24 1166
在上一篇中，我们创建属性面板的大部分样式，这一篇里面接着制作。接下来，我们将一步步实现上面的功能。
在UE5添加自定义的设置面板
qq_25521145的博客
10-22 2616
使用C++在UnrealEngine内添加自定义的设置面板
RPG 游戏数值系统—1
逗比刘的博客
09-09 7871
今天讲一下做RPG游戏一个插件—RPGStatCollection，RPG游戏最主要的就是我们所谓的一些数值，就像英雄联盟一样，你选择每个角色的时候如果不带天赋和符文进去，每个角色都是存在基本的数值的，例如攻击力，护甲，攻击速度，法术强度，魔法抗性，血量，冷却缩减等一些数值。所以我们出装备，合成装备都是对这些数值的操作，当然有了厉害的这些数值没有有效的操作也是无法驾驭一个游戏的。这里讲的数值系统是
RPG游戏角色属性简单的设置C++
热门推荐
weixin_43973586的博客
04-20 1万+
一.题目要求 1.游戏角色应有的属性 本题目要求的游戏角色应有以下属性：名字、性别、种族、职业、力量、敏捷、体力、智力、智慧、生命值和魔法值。 名字：不超过50个字符。 性别：可以选择男性和女性。 种族：一共可选五个种族，人类、精灵、兽人、矮人和元素。 职业：可选六种职业，狂战士、圣骑士、刺客、猎手、祭司和巫师。 其余属性均为整数。 本题目要求首先用户输入角色姓名，然后由用户选择角色性别，然后由用...
UE5如何制作一个果冻材质
07-14
在UE5中制作果冻材质需要以下步骤： 1. 打开UE5编辑器，创建一个新的材质实例。 2. 在材质编辑器中，选择一个合适的基础材质类型，例如PBR材质。 3. 添加一个新的节点，可选择 "Material Expression" -> "Vector Parameter"，命名为 "BaseColor"，并设置为果冻的基本颜色。 4. 添加一个新的节点，选择 "Material Expression" -> "Noise"，用于创建果冻的纹理效果。调整噪声节点的参数，例如频率、振幅和偏移量，以获得想要的果冻效果。 5. 将噪声节点连接到 "BaseColor" 节点的输入，以将果冻纹理应用到基本颜色上。 6. 添加一个新的节点，选择 "Material Expression" -> "Scalar Parameter"，命名为 "Roughness"，用于控制果冻的粗糙度。 7. 将 "Roughness" 节点连接到PBR材质节点的 "Roughness" 输入。 8. 根据需要添加其他节点来调整果冻材质的其他属性，例如透明度、发光等。 9. 在编辑器中预览果冻材质的效果，并对节点参数进行微调，直到达到满意的效果。 10. 将该果冻材质应用到场景中的物体上，例如一个球体或者模型。 这样，你就可以在UE5中制作一个果冻材质了。记得保存材质实例，并在需要的地方应用它。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值