0


【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 Node2D

func _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 Node2D

func _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了,效果如下:
请添加图片描述

标签: ui 游戏 godot

本文转载自: https://blog.csdn.net/zhaoyang314/article/details/139455119
版权归原作者 游戏自学 所有, 如有侵权,请联系我们删除。

“【Godot4自学手册】第四十一节背包系统(一)UI设置”的评论:

还没有评论