Godot4.3类星露谷游戏开发之【简易库存】（UI部分）

千里之行，始于足下

零、 笔记

制作简易库存，用于存放被收集的物品。本章制作库存UI部分，包含库存面板、物品槽、物品纹理、物品数量；

一、库存面板

第一步，在 res://场景/UI 路径 下，以 库存UI（NinePatchRect） 为根节点创建 库存UI.tscn 场景；

第二步，选中 库存UI 节点，在检查器中新建 AtlasTexture，并 从路径 res://资产/Sprout Lands - UI Pack - Basic pack/Sprite sheets/ 导入 Sprite sheet for Basic Pack.png （资源见文末） ；

点击编辑区域，选中如图部分作为 库存面板 ；

第三步，在检查器中更改 Patch Margin 参数如图；

得到一个库存面板；

二、物品槽

第一步，在库存UI节点下添加 节点树 如下；

• MarginContainer
  • HBoxContainer
    • 物品槽（PanelContainer）

第二步，选中 物品槽（PanelContainer） 节点，在检查器中快速加载 游戏UI主题.tres （见Godot4.3类星露谷游戏开发之【时钟UI】）；

第三步，在弹出的 主题 底栏中，自定义 InventorySlotUI 类型；

第四步，在设置 基础类型 为 PanelContainer ；

第五步，基础类型选定后，在主题属性 panel 下新建 StyleBoxTexture ；

第六步，在检查器中新建 AtlasTexture ，导入路径 res://资产/Sprout Lands - UI Pack - Basic pack/Sprite sheets/ 下的图片 Sprite sheet for Basic Pack.png ，并编辑图片如下；

第七步，选中 物品槽 节点，将 Theme/Type Variation属性 编辑为 InventorySlotUI ，并勾选 Container Sizing/扩展；

第八步，复制多个 物品槽，并自行在检查器中调整 库存UI（NinePatchRect） 与 MarginContainer 的属性，以达成想要的效果（略）；

三、物品纹理+物品数量

第一步，选中 物品槽 添加 节点树 如图；

• 物品纹理（TextureRect）
  • 物品数量 （Label）

第二步，任选图片、数字， 对纹理和标签的大小位置进行测试；

发现几个问题：

1. 图片盖住了物品槽
2. 标签在左上角，且字号偏大

第三步，针对 图片盖住了物品槽 的问题，选中 物品槽 节点，在 主题 底栏中点击 StyleBoxTexture ；

然后在检查器中找到 Sub-Region ，并 编辑区域 ；

变更四条斑马线如下图，其组成的 四边形，就是子节点 物品纹理 与 孙节点 物品数量 渲染的地方。

第四步，针对 标签字号偏大 的问题，选中 物品数量 节点，在检查器中的 Theme 属性下快速加载 游戏UI主题.tres ，然后自定类型 SlotNumber 如下图；

设置基础类型为 Label ，并调整合适的字号；

最后，选中 物品数量 节点，将 Theme/Type Variation属性 编辑为 SlotNumber ；

第五步，针对 标签位置在左上 的问题，选中 物品数量 节点，在 2D界面 中，用鼠标调整节点至合适即可；

第六步，清空 物品纹理、物品数量 节点，并复制至各个 物品槽 节点下；

第七步，将 库存UI.tscn 场景作为实例化为 游戏UI.tscn 场景的节点；

调整布局至合适位置；

四、搭建测试环境

将路径 res://scenes/测试/ 下的 测试_昼夜循环.tscn 复制为 测试_简易库存.tscn ，并变更根节点名称为 测试_简易库存 ，删除 昼夜循环组件 节点，如图所示；

五、测试

运行 测试_简易库存 场景；

测试完成！

六、免费开源资产包

精灵包链接：点击此处
UI包链接：点击此处

1. 进入链接后点击下图按钮；
   

2. 然后点击【No thanks,just take me to the downloads】（不了谢谢，只想下载）；
   

3. 最后点击下图按钮完成下载（注意导入前需解压缩）。