【Godot4自学手册】第四十一节背包系统（一）UI设置

各位同学，好久没有更新笔记了，今天开始，我准备自学背包系统。今天先学习下UI界面设置。

一、新建场景和结点

1.新建Node2D场景，命名为Inventory，保存到Scenes目录下，inventory.tscn。
2.新建TextureRect子节点。
3.为根节点添加GridContainer子节点
4.为GridContainer节点添加Panel子节点，命名为Slot1。
这时候，结点目录如下：
请添加图片描述

二、设置结点属性

1.设置BackGround属性。将BackGround命名为GridContainer在BackGround检查器中，将TextureRect->Texture设置背包背景图片。
请添加图片描述

2.设置Panel属性。将Panel命名为Slot1，在检查器中ThemeOverride->style->panel后方下拉选择新建StyleBoxTexture。
请添加图片描述

然后将插槽背景图片拖入到Texture属性内。Layout->Transform中将size设置为18*18。最后结果如下图：
请添加图片描述

3.设置GridContainer属性。
GridContainer设置为5表示一行5个插槽。ThemeOverride->constants->h_separation，v_separation均设置为5，表示每个插槽之间距离为5。
请添加图片描述

选中Slot1，按快捷键ctrl+d,复制Slot1节点19个，共20个插槽。最后效果如下：
请添加图片描述

三、设置物品

1.新建Node2D场景，命名为Item，保存到Scenes目录下，item.tscn。
新建TextureRect子节点，将size属性设置为16*16。
为根节点添加代码。
请添加图片描述

编写代码如下：

extends Node2Dfunc _ready(): #随机载入2张物品图片if randi()%2==0:#产生个随机数，用2除，余数为0$TextureRect.texture=load("res://Sprites/Inventory/Iron Sword.png")else:#产生个随机数，用2除，余数不为0$TextureRect.texture=load("res://Sprites/Inventory/Tree Branch.png")

切换到Inventory场景，为每个插槽添加如下代码：

extends Node2Dfunc _ready(): #随机载入2张物品图片if randi()%2==0:#产生个随机数，用2除，余数为0$TextureRect.texture=load("res://Sprites/Inventory/Iron Sword.png")else:#产生个随机数，用2除，余数不为0$TextureRect.texture=load("res://Sprites/Inventory/Tree Branch.png")

这样我们的背包UI就ok了，效果如下：
请添加图片描述