Download

UMG: UniformGridPanel for Inventory, tips for automatically aligning children?

So I’ve created a basic inventory system similar to Tom Loomans’ ‘Basic Inventory’ setup. Now I want to extend the idea to the basic inventory ive prototyped.

In this game the player will have items to pickup and be able to drop or use and certain items, depending on their ID or class will have a specific dropdown list (havnt figured out that logic yet, but that comes later). There will be a finite amount of items, but they will be spawned, and from base classes: I’m making sure to use full inheritance so that my team can easily add items in the future without re-writing logic IE. Resource_Base -> Resource_Child_Pickup -> Resource_Pickup_Rock or " " _Sword

Here is a picture of how I’ve laid out my inventory, a uniform grid panel filled with 10 slots 5 wide x 2 tall with a 128x128 empty icon image in each row/column index.

Heres my question. Any tips, tutorials etc. on being able to have it so that when an item is picked up its image is set to the next available inventory slot, and if in the inventory panel the player decides to click and item and choose drop, every index after it moves down 1 as well obviously if the inventory is full an ‘Inventory Full’ message will be printed.

I’ve done some digging around on Youtube, the forums, and the documentation but dont have much, am I going to just have to play with ideas, am I on the right track? Should I just have 1 image that gets duplicated somehow for each slot, it seems quite overwhelming to have to worry about not only the grid panel and its logic, but the logic for 10 individual “image slots”, it would make sense to me to have all the logic in one image slot and then use that over and over for the rest. Could a function be made to do all this thats called when an item is picked up, and a similar one for used/dropped?

My other thought, would I be better off creating a wideget called “InventorySlot” or something thats just an image as the root and the graph has bindings for the image as well as the logic to set the column and row and then when an item is picked up, it adds this widget to the uniformGridPanel as a child (will it automatically go into the next available slot?) and then having the inventory widget have all the logic for use/drop. I just know I’ll need “On_ImageSlot_MouseButtonDown” bindings so that makes me think using a single widget with variables for the image used and such wouldnt work.

Heres some nodes I came across, any tips would be appreciated.

Thank you.

Edit: I should add, this was the best inventory tutorial I could find, apart from the offical one which I’ve seen a few time already.I have watched it yet, but for those that have (or have seen the intro video) will this cover what I’m talking about? It looks like he does the whole pickup -> slot and then selecting items brings up additional information and such.

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

I will definitly be following that tutorial first for some learning, but any additonal resources would be great.

Have a look at my free inventory thing there is a umg grid based inventory example inside

I also explained another way to use a uniform grid in the following thread : More Effiecent Way of Using Uniform Grid for Inventory? - Blueprint Visual Scripting - Unreal Engine Forums. this may or may not help as well.