En este post, demostraré cómo colocar una interfaz sobre la pantalla del juego. Sin embargo, no entraré en detalles sobre cómo crear esta interfaz de usuario de inventario. En un futuro post, demostraré cómo interactuar con el inventario. Para mi prototipo de juego, quiero lograr algo sencillo, como esto:

Bastante simple y feo, pero funcionará por ahora.

Dibujando la Interfaz

Para dibujar la interfaz, creé dos Widget Blueprint, puedo crear uno nuevo a través del menú contextual en la carpeta de contenido.

Cree una interfaz simple utilizando dos Widgets: uno llamado WBP_InventoryItemUI y otro llamado WBP_InventoryUI.

WBP_InventoryItemUI: se utiliza para dibujar cada espacio de objeto en el inventario con su imagen y texto si hay un objeto recogido. Este elemento de UI contiene un bloque de texto y una imagen, ambos de los cuales marqué como variables para que pueda acceder a ellos más tarde por su nombre.

WBP_InventoryUI: se utiliza para dibujar el inventario con sus espacios de objeto. Tiene un UniformGridPanel marcado como una variable para que pueda acceder a él más tarde por su nombre.

Nuevas Variables y Inicialización del Componente de Inventario

El componente InventoryComponent tiene más variables y una pequeña inicialización en el evento BeginPlay:

ShowingInventory: un booleano para determinar si el inventario se está mostrando. En el futuro, será útil cambiar el comportamiento de control desde mover al jugador a mover el inventario.

MaxItemColumnIndex: un número para configurar el número de columnas en el inventario. Comienza a contar en 0, así que si quiero 4 columnas, debo poner el número 3 aquí.

InventoryUI: para seleccionar el widget para crear en la pantalla al mostrar el inventario.

InventoryItemUI: para seleccionar el widget para agregar en el inventario para cada objeto de espacio.

InventoryUIInstance: para guardar la instancia de la interfaz de usuario para el inventario.

En el evento BeginPlay, hay una pequeña inicialización para evitar hacerlo cada vez que se muestra el inventario.

Mostrando y ocultando el inventario

Configuré un botón para mostrar y ocultar el inventario cuando se presiona. En el Blueprint ThirdPersonCharacter, en el EventGraph, se llama desde InputAction_Inventory:

Cuando se presiona el botón, se muestra o se oculta el inventario, dependiendo de si anteriormente estaba mostrándose o no. Utilicé el componente PlayerInventory directamente desde el ThirdPersonCharacter para determinar si el inventario se está mostrando y lanzó sus funciones ShowInventory y HideInventory.

La función ShowInventory está en el componente de inventario y se ve así:

Primero establece la variable ShowingInventory y luego llama a la función ConfigInventoryItems que llenó el inventario. Finalmente, lo muestra en el juego.

Para ocultar el inventario, tengo la función HideInventory, que se ve así:

Primero establece la variable, luego elimina la interfaz de la pantalla y finalmente limpia todos los elementos dentro de la cuadrícula usando el elemento InventoryGrid que previamente se marcó como una variable en el widget InventoryUI.

Configuración de elementos de inventario

Para cada espacio en el inventario, agregaré un widget InventoryItemUI. Toda esta lógica se ejecuta dentro de la ConfigInventoryItems, que se llama desde la función ShowInventory y se ve así:

Esta función tiene dos variables numéricas privadas, ActualColumn y ActualRow, para controlar la posición del objeto dentro del inventario. Comienza con un bucle que continuará hasta que el inventario esté totalmente dibujado. En cada iteración, llama a la creación de un nuevo widget que representará cada espacio en el inventario, luego lo configura con un espacio vacío o un objeto recogido llamando a la función "ConfigInventoryItem", y finalmente lo agrega a la cuadrícula llamando a la función "AddConfiguredInventoryItem". Esta última función usa y modifica las variables privadas "ActualColumn" y "ActualRow" para agregar el siguiente elemento en la posición correcta.

Examinemos la función "ConfigInventoryItem" en más detalle:

En esta función, recibimos dos variables desde el exterior: el widget creado que debe ser configurado y el índice en el que se encuentra el objeto recogido correspondiente. Si hay un objeto recogido en el array "InventoryItems" en el índice deseado, la función configurará el nombre e imagen para ser mostrado en la interfaz de usuario utilizando las variables públicas del widget. De cualquier manera, la función retornará el widget.

Finalmente, veamos la función "AddConfiguredInventoryItem":

Esta función recibe tres parámetros: el widget a ser agregado, el índice de fila y el índice de columna. Usa la variable pública "InventoryGrid" que configuramos en la interfaz de usuario para agregar el widget del artículo en la fila y columna deseada y luego configura el widget para llenar todo el espacio posible. Finalmente, aumenta los números de columna y fila para usarlos en la siguiente iteración (la fila aumenta solo si alcanza el índice de columna máximo).