More Effiecent Way of Using Uniform Grid for Inventory?

Lately I’ve started working on a inventory system to familiarize myself with UMG. I decided to take water over my head and try to achieve a tetris-like inventory system. Sort of like those seen in games such as 7.62 High Caliber, S.T.A.L.K.E.R and Resident Evil and so on. Currently I’m looking for a more convenient, and more importantly - efficient way to do this. Screenshots provided are clickable for full resolution.

Question 1: Is there a way to automatically create all of these slots, or would it be easier/better to add them all manually? Currently, I have it set up like this;

I did try to automate this process, both via the Construct Event in the Widget itself as well as using Begin Play within the Character BP. None of which were successful as I can’t seem to use Add Child to Uniform Grid. No matter what I put as content; it fails*(I made a new Widget Blueprint, consisting of one image - using this as content)*. And according to UE4 Answer Hub, as of 4.7 - we can not cast to Blueprint Widgets.

The current plan is to have 14 rows and 7 columns.

Question 2: If the above is possible*(which it probably is, I just don’t know how. I do know how to use loops, though.)*, how would I go about to make hovering work for all of those slots? Can I get all the childs of the Uniform Grid and check if they’re hovered?

Because as of now, I have a very messy setup - and this is only for one row. While it works, there’s probably a hundred ways to do it, most of them being better… :rolleyes: This is my current setup;

What I’m doing here is checking if either image is hovered using the Tick Event. I then store these booleans in a Struct I made for testing purposes. I then use this struct to check if either of the slots are being hovered upon - depending on whether it’s true or false; I update their brush using a texture. This is the current outcome*(which is what I want)*;
(Above is a .gifv; if it doesn’t play - click it to view it)

While it does what I want it to. I was hoping that some kind soul out there could help me come up with a solution to automate the process slightly. The Event Graph would become a web of mystery should I repeat this for all 14 rows :rolleyes:

I know I can use for loops to achieve this, but I haven’t got the slightest clue how to add children to the grid since I can’t cast to widgets anymore.

Any help would be greatly appreciated; Whether to make it more efficient or automate the process.

Still haven’t been able to find any convenient way to achieve this… :frowning:

My quick thought on this (I did not check if it works :slight_smile:

At the begin play event put all your buttons in an array and when you want to check if the player is hovering use a for each loop, cast to a button on use “is hovering”.

Question 1: Create two widgets, one for your inventory and one for your button. Inside your inventory widget, create the following:

The forloop minus -1 is because we start at slot zero rather than slot one. next we create widget, then add it to an array (this is just an array of MyInventorySlot-my slot widget). This array can be called later on to get access to any single slot. Then we add the newly created widget to the uniform grid in our inventory widget, which I called InventorySlotBox. Next we set the column and the row. I would suggest if you don’t know how the mod operator works, looking it up. And lastly we set the slots name to the index number. This is used in the next part. Also if you try this setup and nothing spawns, make sure you set your inventory size and columns variable.

Question 2: Instead of using a tick which just eats resources, you the event inside your button widget called on mouse enter. This event will fire anytime your mouse enters the box. Also there is an event on mouse exits if you need it. Here is my setup for this widget.

Hope this helps give you an idea on how to do things. If I completely missed a point let me know.


Thank you guys!

Haka, your example works wonderfully! Greatly appreciate this, it saved me a lot of time… and hair :stuck_out_tongue:

I have to ask though, you suggested that I use Mouse Enter instead of Event Tick - doesn’t Mouse Enter rely on a tick event as well?


Another issue I noticed with my UMG Widgets is that to trigger hover events, I have to first left-click somewhere on the screen after I add the widget to the viewport. Is this because I am doing something wrong, or…?

That is because your inputmode by default isn’t set to use the mouse. I believe you need to set the input mode to game and ui, I may be wrong though.

Glad it helped for the most part, and it may be on a tick event but I read somewhere to use that instead of a tick when I asked a similar question.

Can you post pics of what it did for you? Im trying to do this too and Im stuck.

Hey ! Can you arrange the order of items in Unifrom grid in real time ? I mean I want to automate the sequence of items in the grid. I have few functions like Get child at Index, etc. But when I get the child, they are technically Panel Slot references. If I cast these items to my personalised widget I made (for ex: I made a clue card widget to be added into Uniform Grid) I get cast failed notification in Compiler results tab. Any solution how you get the access to child in runtime so that you get a grip on their colum and row attributes ?