野外生存游戏【4. 工艺系统】

本章逻辑繁杂，细节很多，本文更多的是作为大纲指引和逻辑梳理，可能笔记中还存在部分操作上缺漏，还请多包涵，有意者可下载工程文件自行对照学习

UE版本：5.2.1

UI构建

预期效果：构建工艺系统的基本UI（工程文件参考SurvivalCraft_03 ）

image-20230927185535410

主面板概述

很明显，从上图就能看出，这是一个较为复杂的 UI 构建，首先创建一个 Widget，命名为 W_CraftingWindow ，主要部分分别放在三个Vertical Box中

  • 第一个 Vertical Box 用于放置最左侧的那一列小图标；
  • 中间是一排网格面板，在点击不同的图标的时候，展示出不同的物品；
  • 最右测是一个说明栏，当用户要合成中间栏中的物体的时候，说明物体信息以及需要的原料；

大致设计逻辑如下

image-20230927230412799

image-20230927230545128

物体面板

中间栏那一块用到了统一网格面板，用于展示不同类别下的物品。所以这里需要创建一个 W_CraftingContainerGrid，但是因为面板中的物体信息不同，且都来自数据表，所以我们先准备好对应的枚举、结构和表格数据

两个枚举如下

image-20230927232045541

image-20230927232142167

结构体如下

image-20230927232217085

数据表来自上面那个结构体，填充如下数据

image-20230927232254584

数据表准备好之后就开始构建物体面板（W_CraftingContainerGrid）的视图与逻辑

image-20230927232917478

视图很简单，核心是 AddSlots 和 AddSlotsToGrid 两个函数

AddSlots 函数核心是从数据表里面读取出数据，做一些校验，然后根据这些数据创建对应的单个物体面板（逻辑放在下面了）填充到面板中

AddSlotsToGrid 函数则是填充到面板的索引计算逻辑

最后在面板构造的时候调用一下就可以了

这样当游戏启动的时候，所有的数据就都准备好了

image-20230927233032280

image-20230927233043559

image-20230927233055743

image-20230927233114028

单个物体面板

上面提到了，当数据从数据表里面读取出来之后，还要创建单个物体面板（W_CraftingSlot），然后将这些单个物体塞进物体面板里

这个小面板主要用于展示物体，并当物体被点击的时候，能在右侧展示物体信息，以及合成该物体所需的原料

逻辑相对简单，设计和图表如下：

image-20230927234706069

创建的时候就设置好图标

image-20230927234744100

点击时展示出信息（这里的 ShowItemRequirements 在下面的主面板那一块有实现）

image-20230927234807435

原料面板

原料面板所占的位置比较小，放在如下这个滚动框里面

image-20230927233556053

视图和逻辑也相对比较简单，创建一个 widget，命名为 W_CraftingIngredient

image-20230927233640169

核心逻辑就是构造的时候就显示出对应的信息即可（注意必要的变量要勾选 Instance Editable 和 Expose on Spawn）

image-20230927233711738

完善主面板

上面两个面板准备好之后回到主面板（W_CraftingWindow）再补充一些逻辑

首先设置如下几个点击函数，当点击对应的按钮的时候，就激活对应的物体面板

image-20230927233947310

随后创建一个自定义事件（在上面单个物体面板中有用到），当点击物体面板里面的物体的时候，就读取数据表，并将需要的原料和物体描述都展示出来

image-20230927234048959

image-20230927234119424

image-20230927234212029

最后将这个主面板塞到 ShowItemRequirements 里面去

image-20230927235113485

并配置按钮点击事件

image-20230927235153893

到此就基本完成了UI方面的逻辑

打造物品

预期效果：当原料足够时，可以创建物品（工程文件参考SurvivalCraft_04 ）

image-20231004223803938

材料校验

打造之前首先肯定要先校验现有的原材料够不够打造物体的

这里主要由 CanCraftBorder 这个边框来显示，如果可以打造，那就绿色；反之则是红色

image-20231004220420062

首先找到 W_CraftingSlot， 点击之后会通过 PlayerController 调用 ShowItemRequirements 事件来检测

image-20231004220746112

W_CraftingWindow 中的 ShowItemRequirements 实现逻辑如下

核心就是找到要打造的那个物品，然后通过 ID 查到所需的原料，再比对需要的原料和现有的原料即可

老样子，虽然逻辑很简单，但是由于涉及到了数据查询，所以需要横跨多个函数调用。

操作由 UI 层发起，其中数据处理在 BP_FirstPersonCharacter 中完成，UI 更新的调用在 SurvivalGame_PC 里，然后再回到 UI 层修改界面

image-20231004220848046

image-20231004220904072

BP_FirstPersonCharacter 的数据查询逻辑如下（不要慌，逻辑很简单，就是分的函数多了一点而已）

image-20231004221501183

Can Craft Item 函数逻辑如下：找到对应的 Container，调用 Container 里的函数，看原料够不够

image-20231004221552990

这里就来到了 BPC_ItemsContainer ，里面的 Contains Items 逻辑也很简单：校对有没有这写原料，原料的数量足不足

image-20231004221852248

image-20231004221943895

BP_FirstPersonCharacter 逻辑结束之后就来到了 SurvivalGame_PC，很简单，这里就是当一个转发器而已

image-20231004222104846

最后还是转发回到了 UI 层的 W_CraftingWindow 里，修改边框颜色的逻辑如下

image-20231004222227038

物体打造

还是先从 UI 层做起，找到 Craft 按钮，设置点击事件，到 Character 层去计算

image-20231004222358325

CraftItemOnServer 的计算逻辑如下：

先通过 Craft Item Fuction 函数做计算，把改减的原料减掉，该删的 UI 删掉，然后展示一个进度条

接着延时等待 3 秒

3 秒之后在物品栏里加一个新物体

image-20231004222530044

Craft Item Fuction 函数逻辑如下

image-20231004223109963

image-20231004223131707

上面调用了 BPC_ItemsContainer 里的两个函数，分别是 Contains Items，已经在上面实现了，接下来我们实现 Remove Items（下面的逻辑本质上很简单，就是把需要删除的原料删掉，但是实现上可能有一些冗杂，有能力的同学可自行优化）

image-20231004223550723

image-20231004223613150

进度条的逻辑先等一下，先把 CraftItemOnServer 里面的 Add Crafted Item 函数实现，很简单，拿到对应的物品，加到物品栏里即可

image-20231004224446746

好，接下来回到 PlayerController 层，创建一个进度条

image-20231004223731696

在 MainWidget 里面留个位置给进度条

image-20231004224037137

image-20231004223959083

创建一个进度条的 widget

image-20231004224123885

还有一个进度从 0 到 1的动画

image-20231004224212107

在该组件创建的时候就播放该动画

image-20231004224243937

OK，到此位置，工艺系统就完成了