Looking to make a good Adventure style interface

I have looked at the “Complete Skyrim like inventory Tutorial”, Virtus Survival Horror series, PyroDev, and I think I’m more confused than ever. They all take very different approaches and incorporate much more than needed, and trying to omit what I don’t want just leads to problems.

My plan is to create a clean interface, no text. There is a bar at the bottom that displays collected inventory items. The bar would appear and disappear with the TAB button. Inventory items are collected by clicking them in the environment with LMB, which will then appear in 3D in the middle of the screen where you can rotate it with the mouse. Pressing E will add it to the inventory while RMB will put it back into the environment. When it’s in the bar and you want to examine the item, you would LMB to highlight and the LMB again to view it in 3D. To USE the item, say on a door, you would click the key in the bar with LMB to highlight it and then LMB on the door.

If anybody has ideas to achieve this I would love to hear it. Any existing tutorials that accomplish this would be great. I think ultimately this kind of interface would be very popular.

Just rip the code you need from those tutorials and make it work

Having to interface between a UI to decide whether or not you should pick/drop an item seems annoying and should be kept between a players interaction with a ‘container’ (dead body/barrel/store keep etc…). Breaking it all down you’d only need to rip the object viewing found within ‘Complete Skyrim like inventory Tutorial’.

Highly doubt someone is going to spoon feed you this inventory system, so best bet is to go about it like I said above

I think a system with two blueprint widgets should be sufficient to accomplish this.

One of them would be the container at the bottom, a UMG widget which is basically just a border and a universal grid panel inside it (No canvas panel). You can obviously add more to style it as you like.

The other would be the individual items to be added to the bar. This would be something like a border with a button inside it with a image inside of that (No canvas panel).

The basic setup for this I would do as follows:

  1. In your player controller, create an array for your inventory. You may want to create a custom structure to handle each inventory item depending on what your definition of an “item” is (for example, are all “apples” the same or can each apple have different properties that will need to be stored?). The most basic implementation that seems like would fit your needs would simply to use an array of a basic structure, let’s call it “Item Struct”. So create a structure called Item Struct and add two values to it, Item Class (type: Actor Class) and Icon (Type: Texture 2d). Then set the Inventory variable in the player controller to be an array of Item Structs.

  2. In your Inventory Item (the second widget created), create a variable with the type of Texture 2d reference. Make it public, editable and expose on spawn. Then in the UI designer, select the image and find the binding for it. You MIGHT be able to simply select the Texture 2D variable you created, I’m not sure if it will let you. If not, use Create Binding to create a function for binding this. Drag in the Texture 2D variable to get it and drag it to the output… I think it will automatically convert it. If not, you may need one more step in there. Something like “Convert Texture 2D to Image” or something.

  3. In your Inventory Bar (the first widget created) event graph, create a “Refresh Inventory” custom event. The idea of this function is that it will go through each inventory item in the player controller’s Inventory array and add an Inventory Item widget to the Universal Grid Panel in the Inventory Bar. First you would create an array in the Inventory Bar called “Inventory Buttons”, the type being a reference to the “Inventory Item” widget. The code should be something like

Refresh Inventory
Get Inventory Buttons > For each loop on Inventory Buttons > Remove from viewport (Note: this really shouldn’t be needed since Refresh Inventory will only ever be called when the player first loads in and the UI is setup, so no previous buttons should exist but better safe).
Get Inventory Buttons > Clear
Get player controller (index 0) >
Cast to (your player controller) >
Get Inventory >
For each loop on Inventory >
…Drag from Inventory Item > Break Item Struct >
…Create Widget (Inventory Item) (The Inventory Item widget will have a pin for the Texture 2D variable you set to “Expose on spawn” in step 2, pass in the result of the above line, “Item Icon”) >
…Drag in a reference to your Universal Grid Panel > Add widget child (Pass in the result from Create Widget)
…I think the above line will have a return pin on it. From that, drag off and “Set Column” to be the current index from the “For each loop on Inventory”.
…Inventory Buttons > Add (Pass in the result from Create Widget)

  1. If you do not yet have a main UI widget for your game’s HUD, now would be the time to create it (If you do already have one, open it and add the “Inventory Bar” to it). Create another UI widget which will be the canvas panel and if you scroll to the bottom of the list you’ll see “User created widgets”, grab your Inventory Bar from there and drag it to wherever you like on the screen. Make sure to set your settings up to use this widget as the game hud. In the event graph, use the “Construct” event, reference the Inventory Bar and call “Refresh Inventory”.

At this point, you should see the bar on your screen when you load up. I would recommend going into the Player Character’s Inventory array and manually adding a few things to it (You really only set to add the Item Icon to see what we have so far). Make sure icons show up on the bar when you load up.

  1. Now we need a way to add items to the inventory. I’ll leave the world interaction (walking up to an item, pressing a button to get an item) up to you. I think it’s best to ignore the 3D view of the item for now, simply get to the point where you can press a button to add something to the inventory. For example, if you have an “Apple” actor in the game, you walk up to it and press E. In the player controller, you get the interacted with actor. You create a new Item Struct, passing in the class of the actor and the Inventory Icon of the actor (something you will need to set up). Then, from the Inventory variable, do an “Add”, passing in the created struct. You would also do your check here to see if the player has inventory space for the item (if they don’t, don’t add the item). There’s a number of ways you can handle this too. For example, if the player has an item in Slot 0, Slot 1, and Slot 2 then the player drops the item in Slot 1, does the item in Slot 2 shift into the position of Slot 1 or does it stay in Slot 2? If it needs to stay in Slot 2, a couple changes need to be made, but nothing major. I’ll assume the former for now. If an item gets added, you’ll also need to “Destroy” the actor so it doesn’t show up in the world.

  2. In your Inventory Bar, add a custom event called “Add Item to Bar” with an integer input.
    Get player controller [0] >
    Get Inventory >
    Get (index of the input to this function) from Inventory >
    Break Item Struct >
    Create Widget (Inventory Item) (The Inventory Item widget will have a pin for the Texture 2D variable you set to “Expose on spawn” in step 2, pass in the result of the above line, “Item Icon”) >
    Drag in a reference to your Universal Grid Panel > Add widget child (Pass in the result from Create Widget)
    I think the above line will have a return pin on it. From that, drag off and “Set Column” to be the input from the event node.
    Inventory Buttons > Add (Pass in the result from Create Widget)

  3. Back in the player controller, go to the section where you’ve added an item to the player’s inventory. If an item gets added successfully, call the “Add Item to Bar” function, passing in inventory’s “last index”.

Now whenever you interact with an object and it is added to your player’s inventory, it should show up on the bottom. I’ll stop here for now because I’ve been typing for far too long but I’ll keep subscribed to this thread if you have any questions about it so far. I’m also typing this without access to UE4 at the moment so I may have made a few mistakes.

If you do go through this and start setting it up but you have an issue or question with something, it’s probably best to stop there and ask rather than trying to set the rest up first. I’m looking for distractions all day so I’m happy to help.

Exit: Looks like all my spacing/indents was lost when I posted this… re-adding it with characters…