Unreal Engine 4 RPG 系列教程六）：背包系统
Unreal Engine 4 RPG 系列教程六）：背包系统
背包系统
UMG
在这篇教程中，我要为角色开发一个背包系统，首先在开发这个功能的时候，我们得先知道在 UE 中如何去创建 UI，这里就必须要说到 UMG 了，它提供了许多的 UI 组件，例如最基本的 "文本（Textblock）"，"图片（UImage）", "进度条（ProcessBar）" 等等，如图：
image
创建背包 UI
创建一个 UI 文件夹，用于存放项目所有 UMG 相关的文件，随后双击打开后右键创建一个 Widget Blueprint, 取名 UI_Inventory。
image
打开背包事件
在游戏中打开背包需要添加按键事件，在这个工程就用 I 键来映射打开背包事件吧！在工程设置中添加打开背包事件，并用键盘 I 键来映射。
image
打开角色蓝图，右键搜索 OpenBag 函数，然后 CreateWidget，选择上文中的 UI_Inventory，并显示鼠标。
image
布局
接下来，我们来完成背包的视图布局，首先给背包添加背景色，在画布中拖入 Border，调整大小，然后居中，
image
修改 Border 的背景色为灰色半透明，
image
在 Border 上再拖入 Canvas Panel 画布组件，用于绘制标题，背包关闭按钮，以及容器列表，步骤如下，
- 先设置标题，Anchors 向上居中
- 设置关闭按钮，Anchors 向上居右，在 Button 上附加 Overlay UImage 组件，选择关闭 icon
- 底部添加俩个按钮，使用道具按钮，以及丢弃道具按钮
- 容器这里用到了俩个组件 "Scroll Box" 和 "Wrap Box"，将 ScrollBox 添加进来，居中然后调整大小，再在其中加入 WrapBox 作为它的子视图
这样我们的背包界面就完成了，效果如图：
image
组件的层次结构如图：
image
另外，由于在蓝图中需要获取 UI 的控件变量，所以在创建的时候需要给控件命名，以及勾选成为可以获取的变量，如图：
image
背包中将显示一个个的道具以及它的数量，道具将由 Wrap Box 作为容器将其显示出来，所以接下来我们要设计一下格子的 UI。
道具格子
道具的格子也通过 Widget 来创建，右键创建 Widget Blueprint，然后取名 UI_ItemCube, 设计如图所示，并且也需要对控件命名以及勾选成为变量：
image
素材准备
接下来，我们从商城中去下载一些道具素材，如图：
image
下载完毕后，还需要自己整理一些道具的 icon, 由于资源包里没有提供，所以我就自己在编辑器里截图了一些道具，如图：
image
导入到工程中，如图：
image
创建道具 Actor, 右键 Blueprint Class -> Actor, 取名 ItemPickUp_BP, 双击打开, 然后 Add Component 分别为 StaticMesh 和 Sphere Collosion, 如图：
image
创建一个枚举类型 LiquorType_E，用于分类道具：
image
给枚举补充类型，如图：
image
回到 ItemPickUp_BP 中，添加俩个变量，类型分别是 LiquorType_E 和 Texture2D，如图：
image
随后在 ItemPickUp_BP 文件上右键创建它的子类，Health_BP, 并给它的成员变量赋值和配置，步骤如下:
image
image
image
image
然后接下来就简单了，直接复制 Health_BP，并将剩余的道具配置完成，最终如图所示：
image
加载内容
道具对象创建好以后，我们在背包中先默认添加一些道具，这时候就需要一个数组来管理这些默认道具。
首先在编辑器中创建一个结构体 InventoryItemInfo_S，来定义背包道具格子：
image
然后，打开玩家角色蓝图，定义一个数组变量，数组的类型为 InventoryItemInfo_S，然后添加三个默认值，作为玩家背包中的初始化商品：
image
数据有了，接下来就让它们显示在背包中吧！打开 UI_Inventory 的 Event Graph 来加载商品，蓝图逻辑如下：
image
简单的说一下逻辑的步骤：
- 获取玩家身上默认的道具数组，这里需要用到全局的 GetPlayer Character 函数，通过 Cast 转换成 Player_BP，这样就可以获取角色身上的属性了
- 遍历道具数组，获取每个元素，这里用到了For Each Loop 函数
- 拿到元素后，通过 SpawnActor 生成变量 Pick Up Item
- 创建 Cube Widget, 并通过Pick Up Item 把它的缩略图以及数量赋值，这里用到了 Make Brush from Texture, SetBrush, SetText 函数
- 将创建好的 Cube Widget 通过 Add Child to WrapBox 函数加入到 WrapBox 容器中
- 最后将创建好的 Actor 通过 DestoryActor 函数销毁
编译保存，然后运行游戏中打开背包，你就能看到物品在背包中显示了，
image
最后，还要加上关闭背包的事件，给关闭按钮添加点击事件，并完成蓝图逻辑如下：
image
image
这样一个简单的背包就完成了，在后续的文章中，会对其进一步优化和完善。今天的文章到这里就结束拉，感谢~
本文分享自 HelloWorld杰少 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ，欢迎热爱写作的你一起参与！
腾讯云开发者
