En aquest post, us mostraré com col·locar una interfície sobre la pantalla del joc. No obstant això, no entraré en detalls sobre com crear aquesta interfície d'usuari d'inventari. En un futur post, us mostraré com interactuar amb l'inventari. Per al meu prototip de joc, vull aconseguir alguna cosa simple, com això:
Força simple i lleig, però funcionarà per ara.
Dibuixant la interfície
Per dibuixar la interfície, vaig crear dos Widgets Blueprints, puc crear un de nou a través del menú contextual en la carpeta de contingut.
Vaig crear una interfície simple amb dos widgets: un anomenat WBP_InventoryItemUI i un altre anomenat WBP_InventoryUI.
WBP_InventoryItemUI: s'utilitza per dibuixar cada espai d'objectes a l'inventari amb la seva imatge i el text si hi ha un objecte recollit. Aquest element d'IU conté un bloc Text i una Imatge, tots dos els quals vaig marcar com a variables per poder accedir-hi més tard pel seu nom.
WBP_InventoryUI: s'utilitza per dibuixar l'inventari amb els seus espais d'objectes. Té un UniformGridPanel marcat com a variable per poder accedir-hi més tard pel seu nom.
Noves variables i inicialització del component d'inventari
El component Inventory té més variables i una mica d'inicialització en l'esdeveniment BeginPlay:
ShowingInventory: un booleà per determinar si es mostra l'inventari. En el futur, serà útil per canviar el comportament de control desplaçant el jugador a desplaçant l'inventari.
MaxItemColumnIndex: un nombre per configurar el nombre de columnes en l'inventari. Comença a comptar a partir de 0, de manera que si vull 4 columnes, he de posar el nombre 3 aquí.
InventoryUI: per seleccionar el widget a crear en la pantalla quan es mostra l'inventari.
InventoryItemUI: per seleccionar el widget a afegir en l'inventari per a cada objecte espai.
InventoryUIInstance: per guardar la instància UI per a l'inventari.
En l'esdeveniment BeginPlay, hi ha una mica d'inicialització per evitar fer-ho cada vegada que es mostra l'inventari.
Mostrant i amagant l'inventari
He configurat un botó per mostrar i amagar l'inventari quan es premi. En el ThirdPersonCharacter Blueprint, en el EventGraph, es crida des de InputAction_Inventory:
Quan es prem el botó, es mostra o s'amaga l'inventari, depenent de si anteriorment s'estava mostrant o no. He utilitzat el component PlayerInventory directament des del ThirdPersonCharacter per determinar si es mostra l'inventari i vaig llançar les seves funcions ShowInventory i HideInventory.
La funció ShowInventory es troba en el component d'inventari i és així:
Primer de tot estableix la variable ShowingInventory i després crida a la funció ConfigInventoryItems que omplirà l'inventari. Finalment, el mostra en el joc.
Per amagar l'inventari, tinc la funció HideInventory, que és així:
Primer estableix la variable, després elimina la interfície de la pantalla i finalment esborra tots els elements dins la graella usant l'element InventoryGrid que prèviament s'ha marcat com a variable en el widget InventoryUI.
Configuració dels elements de l'inventari
Per a cada espai en l'inventari, afegiré un widget InventoryItemUI. Tota aquesta lògica s'executa dins de ConfigInventoryItems, que es crida des de la funció ShowInventory i és així:
Aquesta funció té dos variables numèriques privades, ActualColumn i ActualRow, per controlar la posició de l'element dins l'inventari. Comença amb un bucle que continuarà fins que l'inventari estigui completament dibuixat. En cada iteració, crida a la creació d'un nou widget que representarà cada espai en l'inventari, després el configura amb un espai buit o un objecte recollit cridant la funció "ConfigInventoryItem", i finalment l'afegeix a la graella cridant la funció "AddConfiguredInventoryItem". Aquesta última funció usa i modifica les variables privades "ActualColumn" i "ActualRow" per afegir el següent element en la posició correcta.
Anem a examinar la funció "ConfigInventoryItem" en més detall:
En aquesta funció, rebem dos variables des de fora: el widget creat que ha de ser configurat i l'índex on es troba l'objecte recollit corresponent. Si hi ha un objecte recollit a l'array "InventoryItems" a l'índex desitjat, la funció configurarà el nom i la imatge per a ser mostrats en la UI utilitzant les variables públiques del widget. De totes maneres, la funció retornarà el widget.
Finalment, mirem la funció "AddConfiguredInventoryItem":
Aquesta funció rep tres paràmetres: el widget que s'ha d'afegir, l'índex de fila i l'índex de columna. Utilitza la variable pública "InventoryGrid" que vam configurar en la UI per afegir el widget d'item en la fila i columna desitjades, i després configura el widget per a omplir tot l'espai possible. Finalment, augmenta els números de columna i fila per utilitzar-los en la següent iteració (la fila augmenta només si arriba a l'índex màxim de columna).