Inventory Buttons UMG


Im wondering, there is a way to create a inventory like in the game dying light or skyrim? I mean it that - I have a scrollbox which includes a few item buttons (one UMG button for one item i have) and i want them to work in this way:

When I press on one item button it will be highlighted, and when I click on other item button it will be highlighted but the previous clicked item button will be unhighlighted etc etc.

In order to show you what I want to reach see this link - UMG inv clicking - UE4 AnswerHub

I am thanking in advance. Cheers

This tutorial series by Epic, might help you. In it, they make an inventory screen with buttons. I guess you’d use a vertical box for your buttons instead of a grid, but otherwise it still shows you how you can send information (a ‘slot number’ in the series) from the button to the grid/box when the button is pressed, and then you can use that to unhighlight all the other buttons.


The solution used in this tutorial is different than mine, because I add item buttons dynamically, every time I pick up item I am adding it a new item button to my inventory. I dont have a constant value of items but every single item button which I’m adding, have a different integer ID. So this tutorial won’t help me.

Anyone can help?? It is very strange that no-one tried to create a item list or menu smilar to mine…

If you haven’t store last selection the way to unhighlight is to loop all buttons, set them unhighlighted and then highlight the new selected button. Or you can store your selected button and on click compare if clicked = selected. If not you unhighlight selected, set selected with clicked and highlight selected.

I’ve set up an inventory like this, as well as a crafting UI, so that it works well with a controller.

I keep an integer hanging around that stores the “currently focused” (FocusedCraftingItemIndex) value. On L-Stick up or down, I check if that value is within the range of children within the scroll box (FocusedCraftingItemIndex > 0, FocusedCraftingItemIndex < ChildCountOfScrollBox), and either increment or decrement the value based on if it was stick up or down.

Every input, I go through the buttons in the box and manually set all ‘unfocused’, then on complete of that loop set the child at FocusedCraftingItemIndex to be ‘focused’. I have a function within each button to set ‘focused’ or ‘unfocused’, in which I manually swap around the appearance.

An additional bit of complexity is setting the scroll offset, which I’m attaching an image of.