Download

UMG widget button adds item to inventory

Hey, I’ve created an inventory system so that the player can pick up an object by pressing the ‘E’ key, and this creates a line trace etc and adds it to the inventory. I’ve also created a loot container (a filing cabinet) that when the player finds the key, it opens and a UMG appears on screen and this enables the mouse cursor so the player can click the buttons (see pics attached for info) What I want though is so when the player clicks the UMG button that has an item (a thumbnail) attached it adds it to the inventory (see in pics) and removes it from the filing cabinet. I can’t do this the same way as the models (actors) as it doesn’t involve a line trace by channel and I’m still pretty new to UE4. Thanks in advance :slight_smile:

ue4forumshelp9.PNG
(The inventory system)

ue4forumshelp18.PNG
(The filing cabinet system)

Can you show the blueprint where you are adding those buttons? Are they separate widgets that are added as child widgets?

This is the widget blueprint for the filing cabinet, they are all just buttons on top of a border each. The event graph is currently empty for the widget blueprint

b84bc81df7f1402bcf121dcf08b67ee124cb69a8.png

It’s not much information to go on heh, but I just saw your other thread there too. And I see you have an array of cabinet items in your cabinet blueprint.
in the event graph of your W_CabinentInventory widget, make a new variable, and make it a type reference of BP_FilingCabinet drawer. Make this variable editable, and check Expose On Spawn, call it CabinetRef, or something.

Create OnClicked events for each of the buttons.

Back in BP_FilingCabinet, make a new function, and call it AddItem (or something sensible, this function will add the item to the player’s inventory.
Give it an Integer input, call it Button.

Like this:

2e9e8142b9d6947adca8aacfbd5f0f96e84065c4.png

here you cast to your character, if you don’t already have a reference to it. Also, I’m presuming you have a function in your character for adding an item to its inventory, if you do, call it here, if you don’t, you probably should.

Then on the create widget node that is creating the buttons, you will see it now has an input called CabinetRef, right click and type Reference to Self, get that and plug it into that input.

Then back in your button widget add an integer variable and do this:

55d7c03409a899dbfcd1176c3df68d1221d8dccf.png

edit: in case it’s not obvious what is happening here, each button calls the additem function in the cabinet with it’s index as input, so the first button is 0, and the last is 4, the function uses that index to get the corresponding element in the array, and then uses it as an argument in the player’s add item function

Okay I’ve done everything apart from the two return nodes in the add item function. Firstly is that two different return node outputs or the same one copied and pasted, and secondly how do you create an output without creating a variable with it? (There’s just the white arrow on return node) Thanks for the detailed explanations on the blueprints :slight_smile:

You don’t actually need the return nodes, it should work fine without them, I just tend to always put them in as it makes more sense. If you want to add them, right click and type Return and it should come up. Multiple return nodes are only possible as of 4.9 (I believe) so if you can only place one, that’s fine

Okay I’ve done all of that like you’ve said and nothing is happening, I’ve gone into the ‘Add to inventory’ function in the first person character blueprint and I think I’ve found what could be the problem but I’m not sure. If you look at the pic attached the ‘Item’ variable on the Add to inventory function isn’t attached to anything. The item variable is type ‘S item details’ which is the actors info which you can see being broken on the pic as well. Thanks

5b793f666f6871fc8c60de72c38594eb3141333a.png

You could probably make a separate function, if that one is specific to the trace. All it has to do is add “Item” to the Inventory array

Okay so I’ve created another function in the first person character blueprint called ‘Add to inventory 2’ for the meantime, and this is what I’ve done and it’s still not working. The thumbnail (in the filing cabinet system) doesn’t disappear when clicked on and doesn’t get added to the inventory.

4ff01142b078f2188915ce91f776827e7818180d.png

017f5902ed2d96cb1f4f34313faa703f8c54183d.png

839a6533a2ac29bc8aa5a82797d4e2b98fba10b4.png

Sorry, just noticed I had the inputs reversed on the < node in the Add Item function

Ah okay good stuff it’s working, I’ve added a remove index at the end of that blueprint (see pic attached) and connected it up, but the thumbnail doesn’t remove once clicked. It does remove if you go out of it and back into it but do you know how I can make it remove straight away. I know it’s only a small detail but if there is a simple way then it will make it look better. Thanks for the help, finally got the system completed :slight_smile:

b5d9b96c9b5819a3dcbeb702c1663d41fb350cfc.png

Youļl have to set the style of the button again, removing the item won’t do anything. So, same as how you set the style initially, use the Get Child At node, with the index of the clicked button. Im not sure, but I think if you just set its style to the default/empty struct, it will be just a regular button. So, a MakeButtonStlye node, with no inputs

Do I do this as a new function or am I doing this on the filing cabinet blueprint or the widget blueprint?

ue4forumshelp25.PNG
I’m thinking your meaning after this?

You could do it in the widget actually yes, just set the style of the button on the OnClicked event. So before you call the event AddItem in the widget, set the style of the button that was clicked back to the normal button style. If oyu don’t know, you can just drag the button from the list on the right into the event graph, like a regular variabl, then drag off from it and type Set Style

Okay, that does delete the thumbnail but in exchange for a white square, however when I close and open again it is an empty button like I want. If you see the pics attached, I also still have the problem of when I click the object in button 1, the thumbnail goes white but object(button) 2 moves over to the first button but the thumbnail doesn’t move so the player can’t see that. Hopefully the pics will show what’s happening.

ue4forumshelp26.PNG
I click on button 1 (thumbnail changes to white) and the second button moves to the first slot but that is not visible. If I click on button 1 twice, both objects from button 1 and 2 are added to the inventory

ue4forumshelp28.PNG
After I click on button 1, if I close the cabinet and re-open it, the player can see that button 2 has moved to the first slot

ue4forumshelp27.PNG
If I click on an empty slot, the button still changes to white

b1c8460b4019fee941405e081216b916cae77f90.png

Thanks for the help

The problem here, is that you are removing an index. So everything is moving down to fill the empty slot. Itš changing to white because you are setting it to have no style, I’m not actually sure how to set a button to the default style though. So maybe rather than doing that, you should have an image for an empty slot. So you set any empty slots to use that image.
Youļl need a definition of an empty slot, which is just like a regular item, except you make it so you can’t take it from the cabinet (to rephrase that, you can’t add the item to your inventory, if you check the object that is being added, and itš empty, jsut don’t do anything). When you do take an item, you change that element in the array to be an empty item, rather than removing the index. Thatš just an idea

edit: Really though, a better way of doing this would probably have been to dynamically add item buttons for any items that are in the cabinet, instead of always adding 5, or maybe that was a design choice you made. It would be a bit harder to set up, but you wouldn’t have to keep 5 items in the array etc. you could have any amount, and just remove the button when the item is taken

If I don’t do the remove index though, I can keep taking the items so I have like 100 of each in my inventory

Yep, so instead, set it to an empty item like I said above. You aren’t removing it then, just replacing it, and it doesn’t matter becasue the player can’t add the empty item to their inventory anyway. Like, it could just be the default struct with the name Empty

Ah okay I get it, thanks for the help :slight_smile:

Okay I’ve created a texture for the empty slots and I now have 5 elements in the cabinet (3 of which are just a thumbnail with no info) but instead of removing the index you said to change the element in the array to be an empty item, how do I do this? Thanks