Página 18: Apuntes de "How to Make an Inventory in Godot 4.1 #19 Part 1: Visuals, opening and closing, pausing the game"

Lista de reproducción completa del tutorial de Godot sobre cómo crear un Action-RPG en Godot, creada por MakerTech

https://www.youtube.com/playlist?list=PLMQtM2GgbPEVuTgD4Ln17ombTg6EahSLr

En este tutorial se explica cómo crear una GUI para un inventario y sus casillas, además de hacer que la actividad del juego se pause al abrir el inventario.

Vamos hacer un cambio en el orden de las escenas, vamos a empezar creando el slot del inventario.

 

El slotGUI sera un panel con un sprite2D de hijo.

 

 

 

Transparentamos el panel desde el inspector,  CanvasItem > Visibilty > Self Modulate.

 

 

 

Cargamos la imagen al sprite2D y activamos Sprite2D > Offset > Centered, modificamos el campo Vframes a 2

 

 

 

Terminamos la escena de SlotGUI modificando el Control > Layout > Custom Minimum Size y ajustamos su tamaño al sprite.

 

.

 

Ahora vamos a crear el inventario, la escena de inventario se compondrá de un Control y un NinePatchRect como nodo hijo.

 

Le agregamos el sprite al NinePatchRect y en el inspector, modificamos el Patch Margin.

 

 

Agregamos un GridContainer al NinePatchRect, agregamos varios SlotGUI al GridContainer y modificamos GridContainer > Columns a 5

 

Ahora tendremos que realizar algunas modificaciones

1. Agregar slotsGUI hasta tener 15 slots.
2. Expandir el sprite del NinePatchRect hasta que ningún slot sobresalga.
3. Modificar el inspector de GridContainer: en Layout > Layout Mode, cambiar a Anchors y luego, en Layout > Anchor Preset, seleccionar Center.

 

 

Vamos al inspector del Control y modificamos el Control > Layout > Custom Minimum Size.

 

 

Finalmente, le cargamos un nuevo script.

 

 

Agregamos un nuevo input para la tecla I, esto servirá para abrir y cerrar el inventario.

 

 

Ahora agregamos el InventoryGUI al CanvasLayer de la escena del mundo.

 

 

Centraremos el InventoryGUI modificando Control > Layout > Anchor Preset a Center desde el inspector

 

 

Creamos un script para el CanvasLayer

 

 

 Enlazamos los signals closed y opened de InventoryGUI al script de la escena del mundo del juego.

 

 

 Actualizamos las funciones que se han creado al enlazar los signals.

 

 

Finalmente, como ultimo paso, en el inspector del del CanvasLayer del mundo del juego y modificamos Node > Process > Mode a Always

 

 

Diagrama del sistema de inventario.