Unreal engine Inventory Course - FREE Full Course

and so we start a new series or course or whatever you want to call it today we're going to get started on a inventory system and for an inventory system you're going to need to get started with items which is what we're going to be talking about today uh but unlike the previous couple of courses that I've made this one's probably going to be a little bit shorter as well I'm going to upload a per episode project file for the progress so you can see everything that we've just made so far the next episode everything that we've just made up until then and then and then up until the very last one one just wanted to get that out of the way so let's talk about inventory systems and items what we're going to be doing today is we're going to be making the blueprints for our items and I mean that in both making actual Blueprints and also making the basics that we're going to need to build upon so let's get started making items we can do this in two different ways and this is a very important distinction early on a lot of people will want you to make you're in the miscellaneous tab here a data table which you can do and that's perfectly fine having all of your items in a data table I don't personally love that and I'll explain to you why uh in a second but I'll just show you real quick how we can go through and make a data table based system we're not going to be moving forward using that uh but it's pretty easy to substitute things in and out if you're using data tables instead of data assets which is what we're going to be using in the end so for a data table what you want is you want to come up here to blueprints first and you're going to make a structure here and we'll call that item info and in that item info we will just put in everything that we need so that will be something like a a name for the item that'll be a string and add a couple more variables uh maybe you want a item ID in case that becomes relevant for whatever systems you're using we want a icon which we can use a texture 2D for and then we might also want a mesh for it as well for if we spawn it inside the world uh so for that we can just use a static mesh and the last one uh let's call that a value that we can use for buying and selling it so this is how we can set up a structure to hold our item info and then we can make a data table based on this structure now there's a couple of issues with this method that I personally don't like so let's make that data table and just call it items and if we start making new entries we can see it has all of the information in there uh that we put into that structure so that works but there's a few little issues here mainly that being this is a data table and it has a bunch of hard references in it so if we go back into this you can see that this static mesh and I also believe this texture 2D are hard object references meaning that whenever this data table is getting loed it will also load in everything that is referencing and if you have hundreds up to even thousands of items all the measures and textures for them are going to get instantly loaded the moment you look anything up into the data table whatsoever and it's going to take up a huge amount of memory we don't want that you can change that by instead of using a object reference changing this to soft object references and then you have to manually load those assets in when you actually want to use them but they don't always get loaded into memory so there is a workaround for that issue if you really really want to use data tables I just wanted to offer up that possibility for you to use data tables if your system uh might benefit from having data tables if you have a whole bunch of items like a lot of them it might actually be worth it to use data tables because it's a little bit easier to manage than having a bunch of different separate assets but let's take a look at a data asset based system instead so we're going to uh delete this because I want to show you the other much more important reason as to why I like a data asset based system more so let's make a blueprint class here and in the classes we're going to be looking for the primary data assets and this is going to be our blueprint for our just general item data assets and here uh we can put in some functions that do some simple calculations which is kind of nice if you you want to like bake in some calculations as to uh pricing for like selling and buying items so here in the BP item if we make a new function and we call this uh get sell price what we can do is we can uh just in this case very simply uh we add a return node and that return node is just going to uh return the value of our item divided by let's say two so it's half the price that we get for selling this is a very simple function that doesn't really do much but you of course you can do a lot more complicated math here if you wanted to that's one upside of using data assets the other upside we'll get to in a moment let's add in the same variables that we had in that item data and for this you can also use soft references by the way just like I showed you uh as a solution for the date table a moment ago since we're not going to be loading in every item in the game whenever we refer to a specific item it's much less of a problem if we load in all of the refer to assets so you can get away with using hard references a little bit easier uh with this data asset based system you still really should be using soft references uh in most cases whenever you can uh but this does make a little bit less of a headache to uh manage loading in and out assets and we're going to set all of these to being exposed so now that we have this we have the basic setup for an item and now that we have that we can go into our miscellaneous tab here and we can make a data asset and we can make a data asset based on the BP item class that we've just made and this is now a asset that takes that BP item as a sort of template so let's call this um something like item uncore Rock and when we open that up we can see it has all of the information that we uh put into it so we can say this is uh the item Rock the item id we're probably not actually going to be using an item ID for this system uh but for a lot of systems it can be useful to compare if two items are the same uh based on ID rather than on name because it's a quicker operation to compare to integers than comparing to Strings uh then for an icon we can put in a texture which I don't have any textures at the moment I'll get some uh in the future and then for the model uh do we like have rocks static MH Rock it's a pretty good rock for our purposes and then its value will be like two gold or something right and now we have an item now we can't put this item into the world because it's a asset itself it's not like a blueprint class so this doesn't directly exist within the world and uh in order to do that we're going to make a specific uh blueprint class as well and that is going to be just a normal actor and we'll call this uh BP World item and this world item is going to have uh a variable here and this is going to be the item data asset so this will just be a value of whatever kind of item that we're displaying here and then we can choose that as the BP item and in this case we want that to be a object reference so from there we can choose any data asset that is based off of BP item so we can say data asset Rock in this case and we can simply add a uh static mesh here and in the construction script we can set that static mesh with the Set static mesh node uh to whatever our item data asset is so we want to make sure that the item data asset uh is valid so that it's actually like pointing to something if this value is empty we don't want to do anything but if it is valid uh what we want to do is we want to get the model and that's then going to to be our item that's going to get displayed so this is the way we can display items in the world so now we have a world item class that we can drag in and this can Now function as a item and as such we can use this with like learn tracers or Collision uh to then pick up that item and we have eventually got an inventory for ourselves we can then add that to the inventory as such so now we can place the items in the world as well before we end off here in the first part about items I do want to show you one more important thing uh which is the main reason that I decided to go with a data assets based system and that is right now we have just a general item and that's fine but since we're using data assets instead of throwing everything into a data table we can actually make use of class inheritance meaning we can make children of this BP item which is the template that we're using for our data assets to make more specific specific items so what we can do is we can create a blueprint child of this and this will be for instance BP item and let's call this uh weapon this will have all the values that the other one already had that we gave it but we can give it some new values so this can have a value for damage on it for instance and if you have a very in-depth RPG system uh you can put something like a element on this so that you can use in your damage calculations if you have like a fire weapon and you're attacking a water monster do dealing less damage you can put that information on here as well and much the same way a lot of like the damage calculation stuff if you want to you can also put inside a function on these data assets and let's also uh make sure that we expose this so now we can make a new in miscellaneous uh data asset and we can look for a weapon so BP item weapon and we can make our uh item sword and if we open that up we get all of the same stuff that we uh just had in here but going into our BP World item for instance here right we have this item data asset variable and there we could choose the item Rock because it was a data asset made based of of the BP item but we can also choose any data asset that is made on a template that is a child of VP item so now we can use this inheritance structure to check for certain types of items so we can have this item split off into uh food items and armor items and weapon items and whatever and they can all have some unique functionality and some unique values to them that the other types don't have but the main inventory system is all still going to easily be able to treat them as items and then when those specific properties become relevant like when you equip a sword that is then when those values actually do get used that is something that a data table based system uh would have a lot more trouble with of course if you really do want a data table based system uh there's workarounds to get that to work I prefer using a data asset based system uh if you're making a game that doesn't have thousands or thousands of items anyway that'll be it for now we've made the basics for items there will be a link Down Below in the description for the patreons and YouTube members to download the project so far and next time we will be moving on with our inventory system in the first part of this series we started making our system uh to handle items so we made some uh data assets to represent normal items and we also made a data asset type to represent specifically weapons and you can do whatever you want with this and make like food items and whatever whatever whatever today we're going to actually Implement that into a inventory system at least the beginnings of one it's actually going to be remarkably simple so let's get started on that and the first thing we're going to do is I'm going to go into my actual character now and on the character we're going to be adding a component because the inventory we're going to be making is going to be in component that we can add to any actop that we want so that way we can add inventories to things like enemies so we can use those as things like Drop tables potentially or we can add inventories to shops so the shop actually have an inventory and they will run out of items so you can't infinitely keep buying things and so on and so forth and then those inventories could restock you could make interesting systems where NPCs trade with each other and their inventories are fully Dynamic if you can think of it you can do it with a flexible system like this so this is going to be really quite cool let's get started by making that component though so I'm going to go back into the rout of the project here we're going to make a blueprint class which will be an ector component not a scene component a actor component because a scene component is a component that has a transform a physical location in the world an actor component is a component that just will hold some data for us so this will be our BP inventory component and the inventory component for the time being is going to just hold a couple of values we're going to add some functions to it as well in a moment but for right now let's get started with a variable and that will just be our inventory size which will make a integer for obvious reasons let's also uh expose it and set the default inventory size to something like 16 now we're going to need to hold a item and the way we're going to do that is through referencing those data assets uh but I'm going to make a structure to hold that first and I'll show you why in a second so go up here to blueprint and we'll make a structure and in that we will call this uh St Str for structure inventory slots in the inventory slot we're going to add a couple of bits of data I personally like having a bull in here to let us know whether or not there is a item here so if we're looking through our inventory we don't need to actually look is there a data asset we don't need to look how many items are there in the slot we can just look at the bu and say hey does this slot contain St an item at the moment or not so we'll just call this H item then the next variable is going to be our stack size some items you might want to be able to stack up higher than others if in your game everything is going Stack Up infinitely or going to stack up to like 999 or just 99 or like for Minecraft purposes 64 stuff like that you don't really need this but for a lot of games it could be useful to have a stack size and we'll go back into the item data asset in the moment and add the stack ex size per item as well because this is going to get filled in by the item itself and then adding in one more variable this is going to be the item asset which will be a BP item object reference so now that we have this structure we can go back into our inventory components and add that as a variable so let's call this the inventory and the type will be our structure inventory slots for now let's also expose that real quick by default it's just going to be a normal variable which has uh one value so we can say hey does this inventory which is one large uh have an item what is going to be its stack size and what item is in this slot now if we come up here and we change this into a array instead we get multiple item slots that we can populate like this so that's quite neat now unlike actors components don't have have a construction script so we can't make a true construction script in which we set up the construction for this component what we're going to do instead is we're going to make a function uh and we'll just call this component construction or let's call this inventory Constructor just so that we know what this is like and and then we can either run this in the construction script of whatever actor that we're working with or we can just run this on begin play potentially both and what we'll do is we'll get our inventory array here and we will get our inventory size and what we're going to do is we're going to add a entry into this array for how many inventory slots that we have so we can do that with a uh for Loop so a normal for Loop not a for each Loop and then the first index is going to be in our case let's say it's easiest to keep this at zero and our inventory size this is quite important just as a general programming thing because we're starting at first index zero if we're going to go up to 16 that actually gives us 17 slots so what you could do is you could say start at index one that works or what you could do is um we're going to go up to our inventory size minus one and then in the loop of that body all that we will do is we will add just a new slot it can be empty doesn't really need to have anything put into it we just want to make a a new empty slots we also though want to make sure that we're not adding any more slots than is altogether necessary so we should also clear the array before we start this up do be aware though that if you run this function that does mean that you're going to clean out your inventory if you run this function for any reason while there's items in the inventory it's going to remove all of those items it's going to just delete them since we're only going to be running this at construction or at begin play when there's no items in the inventory yet it doesn't really matter if you call this during Gameplay at some other time uh do be aware that you only call it if you have your current inventory stashed and saved somewhere safe so you can reload that data back in after whatever you've done generally just better to avoid using this function during gameplay altogether now on begin play uh we'll just run the inventory Constructor and now if we go into our third person character uh we can just add our inventory component on in which we can see our inventory size is 16 and if I just simply uh start up the game here and I uh go into my character here open up my inventory components we will see that the inventory now has 16 slots that we can uh work with they're all empty though so they all have no item stack size is going to be zero and our item asset in this slot is nothing because they're all empty an alternative way to do it uh is not to call this in begin play but instead what we could do is we could call this on construction in our character instead if you do it this way you will have to call it on construction in every single character that you're working with so that can be a little bit bothersome but it also can be a little bit more flexible so we can say uh inventory Constructor runs on construction the big upside of which is if we uh take in this cas our third person character the IDE would be that this for instance would be a enemy that has an inventory that will drop upon death uh if you just drag this into the map here uh and you go into the inventory component even before begin play start we already have access to the inventory slots now and we can populate them however we want once again do be aware if you have this with running it in Constructor it will get overwritten if you also run this at begin play so you probably don't want to do that if you plan on populating inventories like this in the world through the viewports generally speaking uh this is what I personally like best and this still functions more or less the same way uh for the player if all goes well because if I go in here now and I go into the inventory component I still have my 16 inventory slots because the player gets spawned in on construction runs and I get my inventory slots that are all empty oh and one more option that we could do instead of calling it through another construction script or at begin play is we can do this inventory Constructor we can set this to be a call in editor function and what that will allow us to do is if we have an actor that we don't want to call this on begin player or on construction script for whatever reason uh construction scripts tend to rerun when you move characters which would clean out your inventory which would be really annoying uh so if you just drag a character or whatever into your scene and you go into the inventory component we now have a button here that says inventory Constructor and when I click on that it generates the inventory slot just like that okay so now that we have a basic setup for our inventory component uh we probably should wrap up here but next time what we're going to do is we're going to program in the functionality for adding and removing items to that inventory component because that is quite complex in and of itself cuz what we need to do is we need to check whether or not we have EMP space in our inventory to begin with and if we don't uh we need to not add the item and if we do we need to add the item but then if we have a inventory slot that already has the item that we're trying to pick up it should probably add it to the stack rather than in a new inventory slot and it's all like there's quite a bit to it and I think we should probably push that off into its own video next time so as always the link Down Below in the description to the patreon and for YouTube members you can download the project so far to your liking to play around with and see how everything works and next time we'll be back with a new updated project for you to check out so last time when we left off we had a start for a inventory component and we could populate it with empty slots but we couldn't actually add any items into those slots which is kind of the point of an inventory so today we're going to be doing something to both add and remove items from our inventory to actually make our inventory function it's quite important so on our BP inventory components we're going to be making two new functions the first one will be add item and then we're also going to be making one for remove item we'll get started with the add item first so what we want to do here is we want to check whether or not our inventory has the item that we're trying to add already then we're going to check whether or not that item slot specifically has enough room to add something to the stack if it does it's going to add it to the stack if it doesn't it's going to keep looking for the next stack that it can add something to if it goes through the entire inventory it doesn't find the stack then it's going to find the first empty inventory slot and it's just going to add it to that that's the basic logic that we're going be working with here so we're going to need our inventory here and with that we'll add a for each loop with break because we wanted to stop once we have found something that does what we needed to do for our function input we're also going to want to uh set a BP item object reference uh for the item to add because we want to know what item we should be adding so for every single inventory slot what we're going to be doing is we're going to uh break the structure apart and we're going to check whether or not the item we're trying to add is equal to the item that already exists in that now if you want to be a little bit more optimal about this we first check whether or not there's even an item in that slot because if there is no item in the slot to begin with we don't need to do this comparison um and it can save us a negligible amount of computing power but a theoretically existent amount of computing power so first we're going to check does it have an item to begin with uh if it does have an item is that item equal to the item that we're trying to add if it is equal to the amount that we're trying to add then we're going to need to check stack sizes and we haven't really implemented any code or variables to deal with this on the item itself so I'm going to open up my BP item which is the blueprint that the data assets are based off and I'm going to add a new uh variable here and we'll just call this stack size and we'll set the default value to uh yeah 64 here I did a little playing about before starting recording so a lot of these values are still apparently in memory so then we check whether or not the current stack size that we have which is the amount of items currently in this slot is less than the amount of items of this type that are allowed to be stacked so let's get the item to add and there we can get the stack size you probably should actually call this Max stack size instead just to be clear about what this value is going to be used for and only if the current items in this slot are also less than the maximum amount of this type allowed in one slot so we can also make an extra Branch for that only then do we add to this so at that point we get another reference to our array and we simply uh set our array element and we're going to be making a structure here so uh first and foremost we obviously want this to have an item and our new stack size is going to be equal to our current stack size + one now this will only allow you to add one item at a time so things like merging item slots is going to be a little bit more difficult and that's honestly also going to be a little bit more complex so maybe at some point down the line we'll come back to this function and upgrade it to where it will be able to take in multiple items at a time but for now I think that this kind of suffices the easiest way to deal with doing multiple items at a time is just running this function a set number of times rapidly after each other it's not exactly efficient but but it'll probably do and then the item asset to add will of course be our input item to add we will set that to the array element index of whatever index our for each Loop is on so it's just overwriting a slot that already exists and that is how we add a item if it already existed in our inventory now we can simplify this a little bit uh because now we have three branch noes back to back to back that's not really all that useful so what we can do instead is we can make a end bullion note here uh and we can just check for all three conditions at the same time which is just a little bit easier to work with if you are a patreon or a YouTube member you will be able to download this project file on each episode with the current progress to keep along with whatever we are doing so that's just a little bit cleaner and after we've added that item uh we're going to want to break out of our Loop and for this I'm actually immediately going to be adding a rousing nodes because uh having lines that loop back around can be very confusing otherwise because otherwise it's going to keep looking for the next slot now if it doesn't find anything at all here uh where it can add to an existing stack at that point we're going to do a second for each Loop that's going to look for a empty slot to put this in but we need to check whether or not something succeeded here before we do that for each Loop so what we'll do is we will make a local variable local variables are variables that only exist within the context of a function uh so has found slots we'll call This And every time we run this function this variable is going to have a fresh value of whatever you set to equal to in this case false so if we find something uh we're going to set this has found slot to being true so that we know that we have found the slot and we've done the thing so we don't need to do the next for each Loop so after we complete this for each Loop what we'll do is we'll put in a uh branching node here and we'll check whether or not the slot has been found to begin with if that is true we can simply add a return modde to end this function and we'll return the value of has found slot that way when we run this function we'll also be able to uh tell whether or not something was added to the inventory or not because if the inventory was full it's not going to add anything but it could be useful to have that information to display to the player like hey your inventory is full stop trying to add things now if it hasn't already found the slot we're going to check whether or not we want to maybe get a empty slot so we're going to do another four each Loop over the inventory we're going to again break the structure and this time we're just going to be checking has item so we'll check that and if has item is false then we just add one to that slot so there's a lot of checkin of other stuff here that doesn't matter if has item is false there's nothing in that slot and we can simply set whatever um we want in that slot without doing any more checks so we can just copy over the set array element here we can copy over the make structure inventory slot as well put that into the set array element uh we're going to set this to has item being true uh the stack size is always going to be one if we added through this method because we're looking for a empty slot and when we're adding something do an empty SW we're always going to have one of that item and again the item asset will be whatever our input was in our function here and we'll only run this again if this branch is false and then once again we're going to be setting has found slot to being uh true because we've now found a slot to put this thing in and after that we're going to break this for each Loop because again otherwise it will start adding uh it to every empty slots and we only wanted to add it to the first empty slot that we have and once that has been completed uh we add a return node again and that return node is just going to return the value of has found slots do be sure to hook up the set array element index uh to the array index of the four each Loop for the second one as well uh if you don't do that you run into an issue where it just keeps overriding the first slot of your inventory this is the function for adding items to our inventory system now this is a little much if we're going to remove items uh it's going to be much much easier because what we do when we want to remove a item we can do this in a couple of different ways we can also try to uh remove an item uh based on the item itself and do something similar that we did for adding items that has its Merit uh for the most part what I prefer to do is since we already have all of the information in our inventory we just need to look up what item slot that we're referring to and just remove one from that item slot so when you have an array what you can do is you can just find an item and uh we can just pass in the item to find and this will just find the array index that is equal to whatever structure we put in here so if we already have access to our inventory anyway and we're selecting hey this inventory slot we want to remove an item from it we can just pass that into uh this find function and save ourselves a lot of headache so after we found that we can uh get a reference to it this is quite relevant that we want to get a reference and not a copy because if we make a copy we're going to not actually change the inventory slot you want to directly have a reference and in that reference what we're going to do we'll check whether or not the stch size is greater than one because if it is greater than one we're just going to subtract one from it if it is one we're going to remove the item from the inventory all together so we'll check whether or not this is greater than one and we'll do that in a branching node and that's actually the first execution pin that we have here if it is greater than one all that we need to do is get this text size and say hey decrement integer and that will do what I need to do if it is not greater than one which means that it is one or less than one if you somehow glitched the game uh we're not going to worry about that for the time being uh what will just do is we will uh set by reference variable and then we're going to be making a new structure that we're going to set the uh value as which we also need to do for the uh decrementing INT in a moment uh but we just want to set this to having no items having no stack size and having no item reference at all and for the true version of this what we want to do is we want to have it as an item we want to set it to its new stack size and we want to uh take out the item asset that we already had and the reference that we're setting is going to be the thing that we got from the get reference note so what we're doing here is we have the inventory we find the index we get the uh reference and then we're setting that reference again with new value uh so this is how you set up the simple setup for removing items from the inventory it's actually quite simple and then in both cases uh we're just going to put this into a return node as well and here we don't really need to return a bull whether or not it was successful removing the item from the inventory because removing the item from the inventory is probably always going to be a success now for testing purposes we want to test whether or not this works but we don't have any code to add items to the inventory yet uh we'll do that in the next video for now we're just going to make a new EXT function and we'll just call this something like add Rock uh and we'll simply run the add item function that we have here and we will just add a item Rock and we'll make this cool and editor so we can just press the button in editor a lot until we get to a point where uh we start filling up our inventory entirely with rocks now if we run this we can go into our inventory component now we have ADD Rock and inventory Constructor we need to construct the inventory first I will open up a couple of item slots here and if I add a rock you can see the first slot now has an item stack size one item Rock and I can keep adding rocks to it and we can go up and up and up and up and up and up until our stack size is entirely full and now we can see we are approaching a full inventory slot and we've got a full inventory slot if I add one more now it should start populating the next inventory slot and it does so we have a functioning inventory slot system there's still a lot of work to be done uh next time we're going to make a little bit of a simpler video on actually picking up items and I'll probably throw in a little bit of a bonus we will also make a chest that can uh drop items in the world or something like that and after that we finally are going to get to implementing this in a UI because at this point we still don't have any UI for this this is all just on a technical level like the code works but players need to be able to interact with it so still a lot of work to do but for now if you want this project file with everything up until now working as it is there's a link Down Below in the description to the patreon and for YouTube members to download it and you also are supporting the channel if you do that so thank you very much for watching and I'll see you back next time with some more cool stuff we have items we have an inventory to put them in we have a method to put them into the inventory but we have no method to pick them up yet so let's talk about that today it's going to be a quite simple and straightforward way to do it if you've seen my video on blueprint interfaces and the basic interaction system that I build with that uh that's pretty much what we're going to be doing here today uh so that way we have number one an interaction system built for the game as it is and number two we can also immediately easily Implement something like a chest which would be quite nice so what we'll do is we will uh start off by going into our blueprint and we want to make a blueprint interface here uh which we'll call a BPI interaction we can just call it BPI interaction that's fine uh the first function that we're going to be adding here is um on interacted which should have a input of a acto object reference of course and this is going to be the the interacting actor so this will be the actor that is doing the interacting rather than the actor that is getting interacted with that can be uh really quite useful and then the output of this is going to be a bull interaction finished we want to check whether or not the interaction we uh had is successful for this case we're going to be adding items to the inventory if the adding of the item to the inventory doesn't work out for us we want to be able to send that message back to the player so that the player can do something with that now as you might be able to uh tell we are passing in a generic actor reference rather than a specific player reference and that is because at this point I don't know if there might be enemies that also want to be able to interact with items and pick them up in our game right and I just want any generic actor to be able to interact with this how are we going to do that well the way we're going to do that is in our interaction system we're also going to add a second function and that is just simply going to be get inventory and this very very simply just outputs the inventory so that will be the inventory component that we have made so now we have this BP item which is the blueprint for the data assets that the actual items are uh referring to we're not going to be using this because these can't exist in the world as remember if I try to drag these out like we we can't interact with these because these are not actors uh same with the BP item weapon what we want to do is we want to get the BP World item which is the actor that can exist in the world that represents the items and that is where we're going to be implementing these interfaces so in this one we're going to go into the class settings and we want to check implementable interfaces we check for our BPI interaction and that immediately adds the interface tab here with get inventory and get interacted and in our overridable functions uh those should also now be added in this one is going to implement the UN interacted so whenever this item gets interacted with it's going to try to add itself to whatever inventory interacted with it so let's open this up it makes us a function for this and this is actually quite simple we get a reference to whatever actor interacted with us because that is what we set up and whenever an actor interacts with this we have to pass through that reference but because we also made a function in that interface to send through a inventory component without needing to know what typee of vector this is we don't need to cast to the player so this is now a lot more flexible in what we can actually do with it if we want to have enemies be able to pick up weapons or uh any item for that matter we still can do that they just have to implement that same interface it's actually quite simple so we can simply get inventory and that will return us the inventory of whatever actor is trying to interact with this item now we need to check whether or not this is valid to be sure because if something that doesn't have an implementation for get inventory is trying to interact with this that could crash the game otherwise so if this is valid though uh we're just simply going to try to add this to that inventory so if we get this inventory we can just say add item and only if valid is true we will try to add that item and the item to add will just be our item data assets in here so we can just drag that over in there and and now we need to check okay so if it actually added the item into the inventory we also want to destroy the item that's on the floor otherwise we can infinitely keep picking it up and we don't necessarily want that so we'll add in a branching node here and if this is true added item then we want to Simply uh destroy actor and we want to destroy ourselves if this is false we just want to get immediately back to the return node the value for the return will also be the same as whether or not the item was added to to the inventory this can just be generally useful information uh to have because if this is false for instance if an AI is trying to add something to its inventory it will be able to see hey nothing was added to my inventory I probably should go like back to base and deposit some item and try again something like that you can program that in for now though this is all that it takes to uh make an item be able to pick up now in the third person character itself which is our player character we need to implement that same interface pH as well so we're going to go into Cloud settings we'll check for BPI interaction and here we need to um we don't need to implement on interacted really we want to just Implement get inventory and get inventory is simply going to just return a reference to our inventory components now I'm not going to be using the enhanced input system uh for picking up items and such for right now uh that's not really what this tutorial series is about so we'll just get a uh left Mouse button event and when we press that we're going to do a line Tracer from our camera to wherever we're looking at so we're going to line Trace by Channel our starting position will be our follow camera get World location and then our end Position will be that same location uh with the direction the camera is facing multiplied by a distance we'll work through this real quick so we can get the four forward Vector out of this thing which is just the direction that this thing is facing in World space and we can multiply that by a distance so let's convert this pin into a float and say that the max distance that we can pick up items at is like 2500 units that might be a little bit too much if we add that to the world location for our camera uh and set that to being the end we now have a line Tracer that allows us to potentially pick up an item so the out hit here uh we want to break that hit result and we want to check the hit actor on the hit actor we will try to run the on interacted uh and we want to make sure that we choose the message option we need to pass in the interacting actor so that the items if we are trying to pick up an item know what actor they should add themselves too so we just pass in a reference to self and then we get a interaction finished uh if this function runs but we don't add anything to the inventory it will notify us of that with the value of whatever we were doing uh this is really all there is to it for adding something to the inventory that that's all we've had to do so now uh what I will do is I will do the debug type uh set that to persistent so we can actually see the line tracers for the time being and if I add this uh World item like the rock for instance and I play the game I need to make sure that this rock actually has Collision uh so for right now what I'm going to do not very smart but what I'm going to do is I'm going to uh set the customized Collision to use a complex Collision as simple so that way it will use the complex Collision which is literally just a wireframe of the model as the Collision here uh we do need to have some sort of Collision on these objects in order to be able to pick them up but now the line Tracer is actually triggering but I forgot to set up the inventory Constructor uh so we don't have an inventory to add something to so that's why it wasn't being added now that I have an inventory I should be able to pick this up and the item disappears and going into my inventory I should now see that I have one Rock in it hopefully and I do so picking up items now simply works now that we have this interaction system set up as well it is remarkably easy to also make something like a chest so let's make a blueprint class here uh which will just be a actor and we'll say BP uh chest we will give this chest uh first and foremost a static mesh just so that we can see it I'll just give that like a a cube or something like that as it shape that'll work fine and then we'll also add a inventory component to it because uh we're going to fill this chest with an inventory and then it's going to drop its entire inventory upon being destroyed so in the class settings we're going to again Implement our trusty old BPI interaction interface and we will on interact it instead of adding something directly to the inventory of the player what this is going to do is is just going to spawn in a few actors spawn actor from class and what we'll be spawning is a world item and here we get into some uh interesting stuff so this world item we actually want to set the value of the item data asset and maybe potentially you also want to add something like stack size to World spawn items that's entirely up to you uh but you want to set that on spawning that's the easiest way to do that otherwise you need to then set that afterwards and it can just get messy so if we go back to BP World item what we can do is in the item data asset we can expose this on spawn and that will if we now go back to our BP chest you might need to read the note but it gives the item data asset input so as the item is spawning in it's giving the value for that specific variable and it will be able to use that in the construction scripts as a result of that which is very very nice now we don't want to just spawn in one thing we want to spawn in uh the entire inventory this thing has so what we'll do is we'll get the inventory component and we'll uh get the inventory out of it and the inventory will'll just do a four each Loop and here once again we're going to break this and we're going to check whether or not every item has a slot in it at all before we do anything else just to check whether or not we should even bother and if there is an item in it uh we will then spawn in that item in the world while we're at this anyway uh I'm going to add in a stack size into the world item blueprint as well so we'll go into the world item blueprint here and I'm just going to add in uh stack size as a variable here because we might as well Implement that right now so what we'll do instead of destroying the actor right away this is on the UN interacted in the BP World item blueprint by the way uh what we'll do is we'll set these stack size uh to decrement and only now if this is less than or equal to zero uh will we destroy the Ecto so now we have a simple stacking system where we can click on the same item multiple times and it stack will decrease while the stack in my inventory will increase and this stack size we will also expose on spawn uh because that's the whole reason that we're using this to be able to have chests drop stacks of items so we'll get the stack size from our inventory and set that as the stack size for our world item next and then once all of that is completed uh is where we will uh destroy the chest itself you can also change this to like a open chest static mesh or play animation or whatever uh for now we're just going to destroy the actor and the return now should not be after spawning actor that is a mistake on my part uh it should be after the entire Loop has been completed now the last thing we need to do is uh set the spawn transform where these items should spawn in and uh the easiest way to do that is just uh to split the structure pin the scale should probably remain at one the location we can get actor location we split the location structure pin as well and and uh we might as well split the structure pin for the rotation to because we're going to be doing something with that in a moment uh split structure pin the zv value we will just put into the zv value and then the Y value we will add a random float in range two something between Min -200 and positive 200 just so that every item spawns in a slightly randomized location uh around where the chest initially was and we're going to do the same thing for the X position here as well do make sure that you make a new random float and range note and don't reuse the same one because this will just generate a value once and then use it for both of them you want these two values to be different uh then for the rotation you probably want the roll and the pitch to be zero uh but you want the random float again uh and we're going to set this to between 0 and 360 so we just randomized how rotated is around its own axis and you can make these other two slightly randomized as well so let's say we set both of those to a randomization of between minus 20 and 20 just don't go overboard with these two and now that we have all that we can set this chest down somewhere uh we can open up its inventory component and uh construct an inventory and we can say hey I want uh this to have uh five rocks in it and then has item to through might as well and then I want the other slots to have 10 rocks in it so we can say 10 rocks has item sure and now if I again I keep forgetting to do this I probably should set up some automated way uh to do this on begin play uh if I generate myself a inventory I can still pick up this one rock and we can see that The Rock if I go back into my inventory is now in the first slot here let's actually lock this so that we can keep looking at it as we play and now however I interact with this uh quote unquote chest it should spawn in two rocks it spawned them in pretty much the same location uh so that's a little iffy uh but I can pick up these rocks and you can see it keeps increasing my inventory size and you can see in my print screens that it is adding them to my inventory and after the stack ran out we now have only one rock left and I can 4 3 2 one picked that up as well and now I've got 16 Stone in total which makes sense we had one stone just laying there and then the chest had a stack of five and a stack of 10 so in total that is 16 which means we can pick up items now we can even have chests that have items and in much the same way if an enemy dies it can just drop its items like that which means effectively we now have a functioning inventory system the only thing that we really require at this point would be adding some UI to it and adding UI it's itself is a bit of a bigger task as well so we'll be starting with that in the next part until then though if you want to check out the project file as it is right now there will be a link Down Below in the description to my patreon and for YouTube members to download the project file and just play around with it and try to figure out how everything works if you're having any trouble or just want to support the channel it's time to make a UI for our inventory we have a functioning inventory I also imported uh a mesh for the sword which is part of my low body weapons asset pack which you can get on my patreon or G Route links Down Below in the description all this specific model will also just be included with the project files that you can get as a patreon I also asked CAD GPT to generate me to icons here one for a rock and one for a sword they're not particularly great but they will do for purposes of today and that will be making a inventory screen this is going to be split up into three bits so let's make a folder here for inventory and we're going to be making a inventory slot now we're going to display that inventory slot in a grid which we can scale up and down depending on how many inventory slots we have and then we'll make a screen that displays that grid that we can put on either like the player or when we open up a chest we can display that inventory so let's get started with the first thing first here in the user interface we're going to make a widget blueprint and we'll make this just a user widget and we'll call this widget blueprint uh item slots and this item slot is going to have a couple of things first things first we're going to add a size box here and this size box is kind of nice because we can exactly say how large these inventory slots should be so in our case let's set these to 100 by 100 for a good reference uh instead of making this a fill screen up here this is going to uh change to desired on screen and that's just going to make our design process a little bit easier here because it actually shows us the size and aspect ratio that we're working with now the most important thing that we need here eventually if we want to make this interactable which is the goal uh probably not on this part but we want to interact through using buttons here because that's the easiest way to have interaction that supports a game bad control and also mouse and keyboard control very very easily in here we're going to go into the style and the padding for the normal and press State we're going to set to zero in both cases because we're going to put things inside this to overwrite all the stylistic looks this is literally only there so we have a easy way to interact with our item slots so let's put a border in here next so that we have something uh to work with and this border is going to have no padding so uh in the padding section for the content we're going to set that to zero and in the padding for the slot we're also going to set that to zero and then for the alignments we're going to just make this fill the entire thing now you can just use a normal border if you just want these Square inventory slots uh what you can also do if you have a inventory slot image we can add in an image right here uh right away and this will then be our image for the inventory slots I very quickly asked CAD jpt to generate me something so I have an image for an inventory slot which is honestly kind of bad so let's select that and now we have that as our inventory slot here and we can actually make the Border itself have a alpha value of zero and then in the button style we also should be able to set that Alpha to zero so our button is now just our image and we'll make a variation on this image which has like a stroke around it or something that we can use when we are selecting uh the individual slots but again that is for a future video if you want to have a image like this as your inventory slot texture what you do want to do here is you want to actually wrap that in overlay because borders can only have one CH object overlays can have multiple because we're going to need to add in yet another one of these boarders here because we also need to have the actual item image being displayed on this thing of course and the way we do that again is we're going to uh make this padding for the cont for the time being zero we're going to set this to a line horizontal and vertical so that it fills the entire thing and then we're going to go back into padding here and we set that to something like 10 so it's a little bit smaller in this case I might actually want to set it to like 15 so it really fits within the slot maybe even 20 let's go with 20 so it really does fit inside the slot and once again in the brush collar we can come down to the a for Alpha and set that to zero so we don't actually see anything in there we're going to add in another image because this image is going to hold our for now let's make the default our Rock texture here and now we just got to add our uh quantity here because if items can stack we want to see how many items we have in our stack so we can add a a size box for that or another border if you want I like having a size box here uh you can put that into the overlay as well and here we'll be able to say hey our size box I want that to be in this case like 10x 10 does that sound good I think 10 x 10 sounds pretty good and we want to outline of that to the bottom and the right now it is exactly in the bottom right now which is less than ideal so what we'll do is we'll set the translation to something like minus 10 and - 10 might be a little bit much let's go for minus 8 instead so it's nice and in the corner here from there we can simply add some text into this size box and that will first and foremost be way too large most likely we want to set the alignment here to being horizontal and vertical and then the justification to being aligned in the center and then we just play around with the size something like size six maybe sounds good for now you want to test this out with a uh sample text it's best to use the logic number that you expect to display here for testing so let's for us say that's 99 and 99 fits nicely within this box and zero also looks nice within this box now we can do a whole bunch of other things like outline settings I can make the outline um a size one so that we have a little bit of a black outline around our numbers to make them just a little bit more readable but that's honestly up to what your preference like visually is uh for 99 that still looks pretty good well this is the design of our inventory slot now we need to make this functional so everything that needs to potentially change is going to need to be exposed as being a variable so that will be our text because of course that's going to be changing when we add new items and that will be our image which automatically is set to being a variable let's also name these things a little bit better so this will be the image uh icon and this will be our text number and then in the next part we're also going to come back uh for this image over here which already is by default set to being a variable as well uh and this will be image border because we want to swap the image that displays here when it's selected again not something we're going to do today this was the most intense part of making the inventory screen let's go into the graph up here and in our event pre construct we just want to set a few uh values here so in our text number we want to set something and in our text icon we want to set something and the thing we're going to want to set is going to be whatever is in our inventory slot and we have made an inventory slot structure before so let's just make a variable for that that will be our INF slot and that will be of type inventory slots that's our structure that we made and this one we want to make instance editable because every single slot is going to have its own values there and it's also going to be exposed on spawn so when we spawn in one of these widgets we can immediately set a value for it it if we want to in pre-construct we're going to set the text uh number set text and the text that will be using will be our inventory slot and let's just break that open uh and that will just display our stack size let's get rid of this little comments here because it's really annoying to deal with and we'll hook that up into event pre construct then our image icon uh we will set brush from texture and the texture that we're going to be using will be the icon that is in our item asset so we can get icon which is something that we defined before and we can just set that as the texture that we're going to be using and now if we go into our uh designer again and we select uh the root of this we should see our inventory slot here and we can say uh our stack size is something like 50 and we'll see that I'll zoom in a little bit more uh we'll see that update on the screen right here and we can change Whatever item we have so we want to set this to a rock now it display a rock we want to set this to a sword it displays our sword and again if we want to change this to like 80 it will display 80 so it'll just be as easy as that if we don't have any items or the stack size is zero we don't want to display this image and this number so let's real quick go back into the graph here and we'll add in a branching node which you can do by holding down B and clicking and we can just check has item here and if it has an item we do that and if it doesn't have an item we're going to take these and do the set visible or set visibility rather and we're going to set these to being hidden and we'll do the same thing for the icon so we just copy it over and we set the icon to Hidden now once this has been set to Hidden we also need to reenable this to be set to uh visible when something is added to it so we also want to add these visibility noes uh to the end of our um top here and we're just going to set the new visibility here to visible and hook up our text numbers and our image icon and now with that we can set whatever we want in here but as long as has item is turned off we don't see anything the moment we turn on has item it shows our image and our number and whatever we want now let's make this inventory slot into a inventory real quick and this will be much faster so we're going to make a new widget blueprint again and in that widget blueprint which will just be a user widget we'll call this uh wbp item Grid in here we can uh either put in like an overlay or a size box uh but really all we need here is a border uh the Border here is going to have a alpha of let's say something like 6 and we'll set a brush color to a dark gray kind of color maybe even all the way down to Black inside that border we'll put in a thing called a scroll box and this will allow us to put in elements and if the elements don't all fit on screen we can scroll through so that we can still access all of those Elements which will be good for inventory right because if it doesn't all fit within the box if we have like room for 20 slots and our inventory is actually 24 slots we can just scroll down a little bit and we can still access our entire inventory makes it very flexible especially if you have a game with a upgradeable inventory that kind of stuff this really really nice and how are we going to be adding those things to here well actually there's a very easy way to do that and that is with a wrap box a wrap box will just add in elements to itself and whenever they don't fit inside of the bar anymore it will just wrap around and put them on the next line it's actually very very nice well the design for this went a quicker so let's go into the graph here and what we'll do is we'll put in a variable here and that will be the inventory component that this inventory grid is going to be displaying so we'll have a reference to a inventory component that we've made and we'll also set this to being uh exposed and in our inventory component we have our inventory array which has all of the item slots in it and with that we can just put a for each Loop in so for each inventory slot we're going to be adding wouldn't you know it an inventory slot so let's do that going back into the designer real quick we do want the WRA box to be a variable so that we can access it from the blueprint graph so we can now do that with this rep box and we can add child to rep box and this will take in a widget blueprint and add it as a child there so for that we will need to create a widget and when we create that widget we're going to be creating a item slot and that then opens up the inventory slot here as a pin because we set that to expose on spawn so we can simply pull through our array element into that inventory slot and it will populate it right away and that will then be added to our rep box and that is really all there is to the item grid itself so now lastly let's make one more user interface and this will be our player inventory we can also make a bunch more user blueprints here that can do inventory for different kinds of stuff that we want to display like an inventory for a shop we want to make a separate one that will display the inventory of the shop the inventory for the chest should probably display the player on one side and the chest on the other side we might get into that in uh the next couple of videos but for now let's just make a player inventory so this will be uh widget blueprints player inventory and in here we will finally be using the canvas panel because we want to actually like scale this with the screen very nicely and stuff like that and we'll use a item grid which is what we've just made we'll put that in here and we will anchor this uh to the middle of our screen in this case I think that makes the most sense and we'll also uh then position this at 0 0 and the alignment for this will be at 0.5 0. and then we can size this however we want so let's size this up a good bit something like this for the normal inventory screen and don't forget to compile your item grid blueprint otherwise it won't properly show up in here but now it will so whenever we construct this what we want to do is we also want to have a player inventory variable in here and that will just reference the inventory component on the player when it gets constructed so here as well we do Expose and expose on spawn and we'll just kind of pull that through so on the event pre-construct what we'll do is we'll take the item grid and we will set the inventory component that we're referencing here to whatever our player inventory component will be so that way whenever we construct the UI that the player is actually going to see it will just kind of message along whatever information it needs to the actual item grid now there's one last important thing uh this just gets constructed once and then if the inventory changes uh it won't display any changes so there's one more thing that we need to do and that is make a new custom event in our item grid over here uh so let's do that custom event and that will just be update item grid and really all that will do is it will just execute the exact same that pre-construct does so if you want to be very good about this you probably want to disconnect pre-construct and on prec construct we just want to uh update item grid so it's a little bit easier to read now the one thing that we do want to actually uh change about this now is instead of just adding things to the wrapping box uh we're going to need to clear it first because otherwise we have like 16 items in our inventory and then every time we update we're going to add 16 to it so we don't want to do that so let's copy over the reference to our rapper box here and just clear children every time we update it so it will remove everything and then read everything with the new information on it and going over to our third person character here let's go into the event graph and let's just say uh the Tab Key let's make that an event and when we press this uh we simply flipflop between displaying and deleting our inventory screen let's create the inventory screen on begin play though so we always have a reference to it so on begin play what we'll do here we'll add a create Widget the widget we'll create of course will be our player inventory which will take in the player inventory component that we have here so we can just put that through and we'll update that to a variable so promote that to a variable and we'll call this inventory UI then back down here in the tab we have the flip-flop for doing one thing and then the other and then one thing and then the other again and you know how a flipflop works most likely and all that this is going to do is it's just going to uh add to viewport whenever we turn it on and it's going to remove from parent whenever we want to turn it off and while we're added as well the one thing that I have been not doing at all uh is automatically constructing the inventory whenever the game starts so let's do that as well uh let's do that before we create a widget actually that's quite important and let's just construct the inventory with inventory Constructor and then in our player inventory screen here we will in the event construct itself uh use our item grid and we'll just run the update item grid when it gets constructed so first time when it shows up it will actually already already have items populated in it and as you can see now that we open up our inventory we can see our items in there uh there still going to be a little bit of an issue because when I pick up these items over here also I enabled physics on the items because it looks a little bit better uh it's not exactly picking them up so this is where we go back into our third person blueprint and we have our simple interaction system here and here we check on interacted if the interaction is finished it could very well be that we don't have an interaction with an item here and there is it might be worth checking whether or not we interacted with an item or not at the moment we're going to do that I'm just going to say if our interaction is finished for now we just assume that that's adding an item to our inventory what we'll do is we'll get our inventory UI we'll get the item grid out of that and we will update that item grid and that will put into the true of this Branch node and now it should update our inventory which we can open up uh and now we add in our sword and we can pick up some rocks and we can see our inventory display everything that we have we can close it again and we can open it again and it still has everything in it because it's just displaying data that we already had built previously so that's the basics of displaying a inventory system uh of course this at the moment still not interactable we can't can't move items into different slots we can't like split Stacks anything like that uh that will be a little bit more advanced we'll get into that eventually but for now this is how we set up the display of our inventory so we don't need to actually go through and look at our variables to check whether or not our inventory system works making it interactable is the next step because once we do that we can start making chests and shops and everything you want to do with inventories and items we have a inventory that can display things but it is not yet interactable and that's kind of necessary for a useful inventory so let's today look at simple drag and drop operations to move items around and swap item slots and then in the next video we'll look more into the advanced stuff like merging and splitting item Stacks like you would do in a game like Minecraft for now let's get into this so we've got our inventory uh split up into a slot and grid and then an actual display we're going to be doing all of our coding here in the inventory slot let's go into the graph here and we're going to go into the functions and we'll overwrite a few of these functions the first that we're going to overwrite is on preview Mouse button down this is a alternative way to detect Mouse button down that doesn't have like a callback and that's useful for what we're going to be doing here here with it today because we're going to be using that for a drag and drop operation for now this is going to be relatively easy uh but we're going to build this out a little bit in the next part as well and here we simply want to check if the mouse event is mouse button down and then we're going to check uh the mouse button you can just click on this little uh keyboard value and then click on the left Mouse button and it will automatically populate this with the left Mouse button now this is a little a little bit annoying because this does make it specifically a mouse and keyboard related thing so any controller might have some more trouble with this we're just going to be doing this setup easily with just the left Mouse button for the time being because otherwise all of this is going to end up being very very chaotic so when we have seen that this is indeed the left Mouse button or whatever key we are mapping uh to this if you're using the enhanced subsystem at that point we're going to say hey we want to start a drag operation and the key that we're going to be dragging will be in this case the left Mouse button and that will also um give us a event structure here that we can use as the return value running this node is going to start off a second separate function on here and that is going to be the on drag detected so this will start a drag and drop operation which we'll get into in a minute how that works and when a dragon drop operation starts this event will fire and that will have the pointer event which is whatever we put into here and we also actually need to um connect a mouse event up to the pointer event and that's just going to pass it through to the dragon drop operation now in here we want to check Just for future reference reasons are whether or not we are pressing the left Mouse button or dragging the left mous Mouse button rather because in future we're also going to be checking whether or not it is the right Mouse button because we're going to be splitting Stacks with the right so we might as well Implement that now and we're going to be cutting in here real quick I mixed two things up and what you want to do first things first here on drag select it you can ignore everything to the right side we'll do that in a moment uh you want to check again is mouse button down and we're going to go for the left Mouse button in this case doing that into a branching node now let's go back to building out the rest of the system that you see on the right hand side here now we're going to pause this here for the time being because what we're going to do when we are dragging something we want to have a little preview window of the item that we're dragging around so we need to make that little preview window and it's actually quite easy uh because we're just going to copy over the item slot just duplicate with contrl and d and we'll call this uh wbp item drag preview and this will very easily just be kind of more or less the exact same thing don't mind my scroll wheel being a little weird except we're going to remove the Border because we don't want to be dragging around the border that would look weird and in the icon we're going to come up here to the tint and I want to set the tint for this to be a alpha of about 0.5 so there's a little bit see-through that way it's clear that it is a preview image I still want to display the number and everything uh together with that so in the graph all this we actually want to keep uh but we can get rid of all the override functions that we literally just made because we're not going to be needing those and that is how we make the drag preview it's just that easy uh and the reason that we need to make that is because we're going to be uh needing to add that here so we can create a widget again back in our item slot in our own drag detected function and there we can make our uh drag preview VI we want to give that the inventory slot that we are working with right here and since we're just going to be dragging around the entire inventory slot for now uh we can take the inventory slot structure that we have on the item slot itself and just put that in there and that's going to just make a kind of a ghost copy of the inventory slot that we're dragging from now we need to create a drag and drop operation and for that we need to make a class but I'll add the note first so we we can create a uh drag and drop operation in this we're going to need to put in a drag and drop class it has a default one but that's not really going to do uh for what we need it for uh in the future so we might as well jump in right away and create that I'm going to create it in the inventory screen here because it's UI related coming up to blueprint class we can just type in Drag and that will allow us to make a drag drop operation so let's call this uh DDO for drag drop operation uh drag in slots something simple like that and here we can put in some information on stuff we want to pass through so what we want to pass through is a couple of important things is we want to start working with indexes now specifically if we're going to be uh moving things from one inventory to another in the future if we're going to be worrying about splitting and merging Stacks uh we want to have reference to what the original index was where we got things from in case we need to return items to that slot and in the same way we also need to have a reference to the original inventory component that this thing came from because it is very possible that we're going to be moving things from one inventory component into another and again if something fails we want to be able to return the items where they came from so let's make that inventory component let's actually call it Source inventory component to make sure we know what we're talking about so Source INF comp and we'll make that a inventory component reference and then we'll also say our source index will just literally be a integer and both of these are going to be uh instance editable and they're going to also be exposed on spawn which is quite relevant because we're going to be setting them right away as these things spawn in and while we're at it actually what I'm going to do is I also want to change things around a little bit so that the inventory slots themselves have a concept of a index and you'll see why in a second uh because we have our drag and drop operation now we can set it to our custom one and that will allow us to uh put in an inventory component and a source index now we need a value for both of those uh and the source index the easiest way to facilitate that is to just give our inventory slots an index so let's go find where we created that blueprint structure for that that is right over here and let's just add the variable uh for the index on it you could also put this on the widget blueprint if you preferred I like doing this because it's easier to move information around with this and you will see why in a second because now we have this inventory slot and we we can just simply say uh break that open and we have the index and we can immediately put that in there that said we are not setting the index value anywhere and in order to set this index we're going to need to uh come back into our inventory component here because we have that function uh inventory Constructor if you remember which just add our inventory slots but now what we actually want to do is we want to give all of them a value for their index at least so what we're going to do is we will when we add the slots to the inventory we'll still have them at has item none and stack size zero and item asset being nothing but we're going to hook up the index from our full loop into the index here so every single one of the slots on our array will have a number that references their index even when we're taking something out of the array and doing something with it we will still have that information on where in the array uh it might have to return to at some point in the future which is just good information to have so that sets up our source index uh we needed a little couple changes there to make things work uh but now for the source inventory components there's again a couple of ways we can do this I just want to add a inventory component reference to every item slot so let's make this the inventory component and and we'll make that of course of type inventory component object reference and we're going to set this to instance editable obviously and expose on spawn as well then going over into our item grid where the item slots get spawned in uh we can refresh this node here and that will now have inventory components as a new PIN our item grid itself already had a reference to the inventory component so we can very simply just pull that through and now whatever this is getting set to all of these slots also now have a direct reference to that same inventory component which is very very nice and with that we can simply hook that up into here and now our drag and drop operation will be able to access that information as well and from there we can simply hook this up into the return node the drag and drop operation that we've just made will be our return value and the widget that we have just uh created for the drag and drop preview is going to go into the default drag visual so what this will do is it'll make the temporary inventory preview Visual and it's just going to put that at the location of your mouse cursor you can even uh create a bit of offset to it if you want to or uh set the pivot to somewhere else for the time being we're not going to bother with that and now you'll be able to see we still can't actually do anything with it because when we open up this widget we don't actually have our good and we can't interact with it so in order for that to be fixed uh let's go into our third person blueprint here and we're going to be changing a couple of things around with our the way our item update here uh works as well but not for right now what we're going to be doing for right now is when we open up the inventory here we want to show the mouse cursor and make our widget interactable and for that we're going to need to uh get the player controller and when we have the player controller we can set show mouse cursor which is just a ball that shows mouse cursor or not so when we do show the widget we want to of course uh show our mouse cursor and then when we disable the widget again uh we want to not be showing our mouse cursor and do make sure that you are hooking up the player controller to it one more step is needed because we also need to set our input mode uh we're going to set input mode to game Nui in this case you could also do uh UI only uh but that would not work too well with uh the way I make the UI visible and invisible right now this event will no longer run if the input mode is set to UI only because this is a game input not a UI input so if you do that you need to make something on your UI to close out of your inventory again rather than allowing it to be uh key based so for now we're just going to do it this way cuz that's the easiest way we want to set the widget in focus to be our inventory UI widget and we don't want to hide our cursor during capturing when we remove the widget again what we want to do is we want to set input mode to game only it is not really an issue usually if it also uh still is able to interact with UI but if you've got other UI elements that might mess you up in some way so just set it back to game only to be sure and now you'll be able to see if we pick up this sword and we drag and drop this around we can see we have this preview of course it doesn't really do anything yet because obviously for that we need to program in functionality but we've got a good start going luckily from here it's actually relatively simple so let's open up our inventory component again and we're going to make a new function in that and we're just going to uh swap slots this function will take in two parameters which will both be a simple index so we'll say index uh source and the index destination and both of those will of course be integers because they're going to be indexes and I mistyped I I typed spawn slots uh it will be swap slots we'll come back later through this and uh allow this to then also swap slots between different inventories like if you have a chest and you want to swap things around uh for now this is only going to work within in the one inventory just to keep things a little bit simpler and what we're going to do here is we'll get our inventory array and there we will just get a copy of both of those indexes so we'll just get copy from both the index source and the index destination and then we're going to save those inventory slots with all of their data uh temporarily and the way we do that is we right click this and we can promote to a local variable the difference between a local variable and a normal variable I will call this let's see uh Source stack and we'll do the same for this one which will be our Target stack the difference between a normal variable and a local variable if you are wondering because I don't think I've covered that yet in many of my videos is these exist as long as the object exists in this case the inventory component so this is just going to always exist and once we set a value on this it's going to keep that value and we can always refer to that local variables only exist within the context of a specific function so if I go into my inventory Constructor function and you keep your eye on the local variables here they will disappear because those variables only exist to this function and when this function is done with running it's going to discard the values and the memory allocated to keep those values around so for optimization it's good to when you can put something as a local variable to do that because you're going to be saving a bit of memory but it's also quite useful because uh if you ever refer back to this and you run the function again it's going to start the function with those variables being empty and that's exactly what we want here because we're just using them to store the information of those two slots we'll get our inventory array again and we'll set the array elements and we're just going to swap these around so the reason that with saving these by the way is if we set one of the inventory slots to be contents of the other inventory slot then we don't have the information on the other inventory slots anymore this way they get saved to something separately and then we can safely chop things around so we want to set the uh index source to whatever the Target stack was and then we want to set the target index or the destination index or whatever to whatever the s Force stack was to begin with now for swapping these items uh there's also a bit of an issue with the swapping around of the indexes and we can uh be very bothersome and uh fix that up in here but what we can also do is in the item grid every time we make uh this new item slot instead of just passing through the array element as a whole what we can do is we can split this structure pin and we can break the inventory uh structure and just pass through everything except the index and the index will just be the thing that we take from the 4 each Loop This way everything still gets an index on setup with the for Loop that we did earlier in the video uh but whenever we change something about the inventory the index for the inventory slot structure also properly gets updated to whatever new slot everything is in and now that we' have updated that we're going to need to update the visuals for the UI again in order to do that we could make a inventory UI reference in here and populate that and then just run that function directly every single time uh what we're going to do instead is we're going to make a event dispatcher and we'll call this on inventory changed and this is simply going to uh call out whenever we run something that is going to change the inventory so just to be thorough we're also going to go back into our add item here uh and at the end of our paths here so before the return noes we're going to put in the inventory change as well because as you remember at the end of the last video what I said uh about the where we're updating the inventory visuals right now is we're just doing it on interaction but what if we are dragging things from one inventory into another that doesn't involve our interaction system and whatever we're interacting with something that's not inventory then we don't need to update the inventory so this way we will just link the update inventory to whenever inventory gets changed uh and while we're at it again might as well also do this for the remove item so we uh drag this in we call and whenever an item gets removed we also want to update our inventory visuals and the way we do that is coming into our item grid we have a reference to our inventory component uh on construct what we're going to do is we're going to uh bind event to on inventory changed so that's this one here that's going to make us this Noe with a little red pin in here and this will be able to uh be connected to custom events so we can hook it up to that if we want to what I prefer doing is just simply making a custom event that runs that other event that way if we want to add other things to on inventory change which maybe themselves don't have anything to do with updating the item grid for whatever reason um it's just a little bit cleaner so update inventory delegates or event dispatcher they're called delegates and C++ and that will then just run the update item grid we're running into a bit of an issue here uh that you might have also run into if you're playing ahead a little bit and that is that this inventory component doesn't have a value yet on event construct for this widget it only gets set moments after it is constructed but by that time uh this is already run and failed and we're not binding anything at all which is a little bit annoying there's a lot of reworking that we can do to make this uh work a little bit better uh honestly it's a little bothersome to deal with in general so I'm going to show you a little bit of a hacky way to get around this uh and that is because we're fairly confident that it's only going to take like one tick one frame of processing uh before this thing has a value and will just straight up work so if we simply put in a delay note here and we can set that to like a very low number like 0.1 seconds you can even go lower if you want to like you can set this to a 100th of a second which will just wait one tick I like to play a little bit more save though and go for 0.1 seconds uh that will even construct then wait for about a tenth of a second at which point this value is now popul and this will work even on very slow systems it's a very simple thing that we're loading in it's not going to take more than a tenth of a second this will be fine it's a little bit of a hacky way to do things but it works and that is the most important part so now that we have all that in place let's go over that real quick again because we just did a lot uh we updated our on inventory change and with that we can come up here to our interaction system and uh remove the update item Gade from that in our third person character because we no longer need that now we did a lot of things very quickly there so let's real quick go back over them uh just as a recap our inventory component now has uh a couple of changes with this event dispatcher that we added to everything that is changing the inventory directly we also added this swap slots thing that uh gets the two slots that are being swapped around it's going to save them to a save and separate location and then it's going to set those two slots to the value of the other slot and then of course call the on inventory change which whenever that is called in the item grid it will run the update item grid function that we've made before so it reflects our changes so now let's check whether or not that works let's pick up this sword open up our inventory do our drag and drop now this starts our drag and drop very very well uh the only issue is that we now need to add in the dropping part of the Dragon drop and that itself on the item slot again is an overridable function so we can uh just on drop this has the operation which is the output from our return node here and it also has the point of revent which at this point we are used to for the operation we need to cost this to our um drag drop operation drag inventory slot because this is a generic drag and drop operation and we'll check out our inventory component and we will want to uh swap slots for two things and that's our source and our destination and we can get our source index because we passed that through into our drag and drop operation before and our destination index is just going to be the index of our current inventory slot so we get our inventory slot structure we break that we get the index out of it and that's now simply going to swap any two slots that we are dragging and dropping between so this part of it is really quite easy and now you'll see if I pick up uh the sword and I pick up a couple of rocks which are bouncing all over the place you'll be able to see that I can uh swap these into different places very easily and if I drag it onto a existing item slots it swaps those two around and realistically even when I'm doing this it's still swapping the slots around but when I'm swapping something with an empty slot it just looks like I move from one slot into the other so now we have the capability to organize our inventory a little bit better next time we'll be taking the next step into also allowing us to split our Stacks so if we have for instance eight items here and we want to take half of them and put them into a different slot we'll be able to things get a lot more complicated very quickly with that but I do think that is important to have as a option in your inventory system so we have an inventory in which we can drag around our items and that is all well and good and for the most part that'll probably cover whatever you need to do but I want to take this a step further and I want to go like full Minecraft system where we have the ability to split our Stacks meaning that if we have these 11 Rocks here I want to be able to right click and drag rather than left click and drag which I can already do and split this stack up into two separate Stacks this is where things become a little bit more complicated because we're going to have to think about a lot of edge cases and that's always a nightmare so let's dive right into it we're going to be doing most of this in the item slot again uh if you haven't seen the last part of the series I do highly recommend just going back to the start of the series to begin with uh but especially for this one you do want to have the context of the last part where we set up all the drag and drop stuff we're also going to uh pull up our inven components because we're going to make a couple of functions on that we've got a swap slots function already which works perfectly fine but now what we need is something to split a stack so something that will take in a stack split it in half remove the H that we split away and output the new stack which has that H if that makes any sense if it doesn't hopefully it will as we go along so let's make a split stack and for this we are simply going to uh require an input for the slot index that we're going to be splitting and that will be our integer we'll simply use our inventory here and get a reference let's do a reference because we're going to be directly influencing it anyway to whatever slot that we're working with and what we're going to be doing here is we want to uh break open that inventory slot to get all the information out of it and we'll get the stack size and first and foremost check whether or not it is greater than one because if it is not greater than one uh there's nothing to be split here and we're just going to do nothing so if that is the case we simply uh return and our outputs will include the split stack which will be a inventory slots and just for readability really this isn't really going to do anything but for readability I like to just like make one that I can see is entirely empty uh we do want to uh pull through the slot index in this case though so we actually do need to make one now if it is greater than one what we want to do is we want to get our stack size and divid it by two this will be a rounded division because we're working entirely with integers and that is for our case uh really fine but you should be aware that that means that if we have 11 items one of our Stacks either the split stack or the original item SL is going to have six items and the other one five so we do want to keep track of that in some way shape or form and the way we're going to do that is uh the result out of this division we will subtract from the original stack and then also use as the return value so that it always matches up uh and the way we're going to do that is by set VAR by ref of course if that branch is true and the value here we're also going to uh simply make a value and this will be uh quite simple because it will be the same values that we have so has item is going to be has item stack size will'll get to in a moment the item asset itself is going to be the same and the index is going to be the same uh but the stack size we're going to take our stack size and subtract from that our stack size divided by two and this gets very messy very quickly uh so do be aware of where all of these lines lead after that we will add another return node which requires us to make another return split stack so let's just copy over the make inventory slot that will be our return and our return will be exactly the same again as our original so has item being the same the stack size will be our output from our stack size divided by two the item asset will be the same and the item index and actually uh I made a little bit of a mistake what we want to do is we want to promote the output from this to uh a local variable let's call that to subtract which of course will only do if the output from this Branch node is true and we'll subtract that from uh here because what was happening I'll just tell you right now I didn't think about that while recording this uh is we're setting of course the structure here to its new value so by the time we get to this return node it's just looking back through uh this string over here to this uh data asset to the already newly updated value and it's then dividing that by two as well so by instead of doing that saving this as a separate integer variable we can just put that into the stack size for our return value here and that will work a lot better and for the source index here in the split stack function uh we might as well pull through the original one as well so we have a easy reference to that and this will allow us to uh calculate a stack split which is the first and most important thing that we're going to be doing so now that we have this let's go back into our item slot and on our preview Mouse button down here we want to check if it's not our left Mouse button we want to check if it is our right Mouse button so again you can just click on this little icon and Press Your Right Mouse button and it will just fill that in for you which is very very nice and we connect everything up as you expect and then we detect a drag and this time we're going to be dragging the right Mouse button works the exact same again and the return value will now be the output from this node instead so this way if we go into our on uh drag detected function we can now check for is mouse button left down again which does what we programmed previously uh but that also passes through the value of our Mouse button but we can also check whether or not it was the right Mouse button that is being directag because this pointer event just passes through the value of whatever key or in this case Mouse button is being used so we can make a new Branch for that and really this will kind of be doing the same thing uh so sweet it's not that complicated we just create a new operation here uh and it's only for the dragging and dropping bits that we need to add in some changes because instead of just copying over the inventory slot that's obviously not what we want to do what we want to do is we want to get our inventory component and we want to uh split the stack in this inventory so we use our inventory slot here uh and we're going to break that up so that we can get the index out of it it will now split up our item stack meaning that it will remove the progam of items from the stack that we're right clicking on and then it will return to us the split stack that we have taken away from it so that is going to be the thing that we uh put into the input here and just to test this out what we're going to do after everything is connected up uh that should be in the true not in the false that's my bad and much the same this should also be connected up again you just want to copy what happens up here down here but with different Mouse Buton it's quite simple and with all that we should be able to pick up a couple of rocks here open up our inventory and see we have at 10 and if I right click drag you should see now that is five and this will still work um as the normal moving because we haven't implemented any code uh other than that for it yet now I do think in this split stack what we maybe want to do and this is entirely up to you but as you could see a moment ago the IND stack itself doesn't update it doesn't become less until we actually put down our items in another slot which I don't like so what I'm going to do is at the end here I'm also going to uh call on inventory change and with that we should now see that it immediately updates so I'm dragging around two and this one uh now only has three still though uh we don't have the ability to place our split stack into a new slot so let's get into working on that and for that we're going to go back into our item slot here and we are going to now go into on dropped and here we're going to add some new uh stuff I'm going to first and foremost get rid of this print string which I added in the last episode for some troubleshooting and now we want to see uh whether or not we are left click dragging and dropping or right click dragging and dropping because that does make a certain amount of difference and this is also where we're going to have to code in quite a lot of our edge cases so we're going to spend quite a lot of time in this function here today uh first and foremost we want to get our pointer event and we want to get the affecting button and we want to check whether the affecting button here is equal to our left click uh because if it is we're just going to do what we have programmed in before and that's just swapping the slots around but if it is a right click we want to do something else obviously and we'll get into what that is in a minute because uh we want again get a fating button and check if it is equal to a right click instead for the most part we can assume if it's not a left click it will be a right click but there's no real harm in double checking uh if there's somehow like a middle click thing going on which uh you don't want to have any Behavior it won't do anything uh with this setup now and here we want to check first and foremost whether or not we are going to put this into a slot that has no items in it at all because in a moment we're also going to want to check whether or not we want to maybe merge with an existing stack which may or may not be the next video depending on how long this takes so we check our inventory slot that we're dragging onto which is this one and we'll uh break this open or just split the structure pin that works as well and we also want to check uh if has item already first we're going to implement M the code for then not being an item in this slot yet because that's the easiest thing to work with going back into our inventory component let's make a function for that and that is um put in new stack we'll just simply call it like that and the input for that is going to be the inventory slot index we just want to check that one index which of course be a integer and we'll simply say hey get our inventory array and we'll set the array element to Whatever item we'll also input into that index and that's kind of all there is to it for this I'm not going to lie to you it is a very simple function of course we do want to also call on inventory change here in our inventory uh item slot we'll get our inventory component and if there is no item yet it we will set new put in new stack is what we called it we'll use the inventory slot index that we have here and now we need a way to get the item stack into that new slot so let's take a look at the best way to do that the easiest way to do that is just to go into our drag and drop operation here and also add that as a potential thing that we might be sending through with it so we'll call that the inventory stack and that will be of type inventory slot we want make it instance editable and expose on spawn now if we refresh these nodes real quick we'll see that we now have the inventory stack in there as a option for these two nodes for the top one we're here not going to really use that because we're using the index base system which is a lot more robust but for the bottom one which is the split stack it is very nice to be able to use the split stack output from the function that we made as a input into our uh drag and drop operation because then if we go back into our on drop what we can do is we can get from that cast to uh drag inventory slot we can get the inventory stack as just a whole thing and we can just use that to uh put our item in a new stack and only if there is not already an item in there so now I can once again pick up some rocks I probably should make this easier for testing purposes I've got 10 rocks and I can drag and drop five of them into this new slots and I can drag drop two of them into this new slot and so on and so forth now there is one last issue that I want to cover and that is if we're trying to drag this onto a item slot that already has an item there's already one item taken out of this stack uh but this is going to fail and that item is just going to disappear so in case of our operation being something that we're not allowed to do we should go back to our initial item slots and add back in the amount of items that we've taken away so here if this slot already has a item uh what we want to do is we want to run a different function and we're going to make that function on the inventory component again and that is uh something like add item to stack we already have an add item function but that just adds an item to the first stack that it finds the right criteria for uh this is going to be a function that adds a specific amount of items to a specific stack so this will take in the input uh for the index so that is the stack index that we'll be adding to and this will also take in a integer for the amount to add this can be relatively uh simple what we'll do is we will uh get a a copy or reference it doesn't really matter in the end uh and we'll check that index we'll split that structure pin and then we'll also set array element on that same index and what we'll just do is we will split this structure pin two and we'll just pull through the has item we'll pull through the item asset we'll pull through the index the only thing that we're going to do is the stack size is going to be our stack size uh plus the amount to add and that will then go into our item stack size now there's one quite important thing here and that is we still don't have a method here to make sure that we are not overflowing a stack since we're going to be mostly using this for the time being as a fullback for when we try to add something to a stack and it isn't allowed to for whatever reason uh we already took it away from that stack to begin with so adding it back in isn't going to be an issue if you are going to use this for also merging Stacks which we'll be doing in the next episode uh that's going to be a little bit more Troublesome and as always we want to call our on inventory changed so we can update the visuals anyway we can now simply uh add to item stack and the stack index and amount to add we can just take simply from the inventory stack that we have here so let's break that uh the stack size will be our amount to add and our index will be our index and when we compile that we should now be able to see if we uh pick up a couple of rocks before they tumble all over the place and are gone this should be good enough uh we can split our stack here and if I try to split the stack again I'm just taking away one and trying to put it onto a item slot that already is populated that one will then go back to its original slot and this will again go up to three as you can see let's T that out with a slightly bigger stack so we've got a stack of eight and seven and a stack of four uh this is now splitting up into a ghost stack of three and The Originals four try to put it in here and this goes back to seven now and this goes back to four now and as you can see everything works just as you would expect it to so now we've got drag and drop operations which don't randomly delete items and we can still split things up very easily and of course we still got our left click operation that can just move items around now things can't merge together yet we're going to be looking at that in the next video really merging things together just ends up being a combination of all the things that we've already set up with a little bit of extra logic just sprinkled in to make everything work but we're really getting there we almost have a fully functioning Adventure game inventory and after that we can get started on things like chests and shops fantastic we have an inventory we can swap around slots we can move around slots we can split up Stacks as much as we like but the one thing that we cannot do yet is merge those stacks back together and that is quite an important bit to get right here so let's get into that today because there's quite a bit to this we have a lot of edge cases we have merging things together with a left click we have merging things together with a split right click we have to build in things to prevent it from going over the max stack size and there's just a lot to worry about here of edge cases to program in so let's get started with that we're going to open up our inventory components because we need to do some stuff in that and then we also going to open up our item slots now first things first we're going to add a new function to our inventory component that is going to allow the merging of two item slots so let's make a function for that and call it merge stacks and that's going to have a couple of inputs of course it's going to have the two slots that we're going to be merging so that will be the source slot and the target slot both of which will obviously be a inventory slot structure so inventory slot structure there we go but then since we're also going to have to deal with left click and right click separately we can make this into two different functions if we really wanted to I personally prefer to all be inside this one function so that we can just throw it into other UI elements and it will just work so for that we're also going to add a third parameter and that will be our pointer event and that will be of type you would be surprised to learn pointer event and this is just going to carry whether or not we're using the left mouse or the right Mouse operation but we'll only do that at the very end we'll just make the left mouse version first because aside from that it's just a lot of copying work to begin with so we'll add in a branching node here and we'll get from that the affecting button and we'll just check whether or not that is equal to the left Mouse button and we'll get back to this Branch at some point in the near future the next thing we're going to do is add another Branch a little whils away just to make sure that we have enough room and this is going to decide whether or not we want to just merge two stacks together or whether or not we do a little bit extra trickery and math because two stacks don't fit on each other so let's take a look at that we can get our source slot and uh break that apart and then we also get our Target slot and also break that apart to get all of the internal information for both of them if we want to get our source slot stack size and we add that to the stack size of our destination slot so the amount of items that are already in there the output from this is not allowed to be larger than the max stack size of Any Given item we have an item aside we can take it from either one of these because they're always going to be the same item we're checking that beforehand anyway uh so I'm going to take the top one in this case and we'll get the maximum stack size and here we can simply check whether or not that addition operation results in something that is less than or equal to that stack size let's move that over here to where it belongs if these two things added together are less than or equal to the max stack size we can simply just add them together and that's the simple bit because we can just take our inventory array here and we can say uh set element break open this structure pin just so that we have all of the pins separate from each other connect it up to the true and then we just want to set the array element for the Target slot the thing that we're going to be putting things into uh the index taken from that and we can just add a rerouting note here uh because that's also going to go into the item index then the stack size is simply going to be the output from this little thing over here because it's going to be our source plus our destination is going to be set to our destination the item type we can simply copy over from one of the inputs doesn't really matter which one you pick for this one and the same with a h item this also can just be St to true to be fair because it's always going to be true when we're merging things together but I just like to connect up variables just to make sure and it feels nice right it just it just feels nice then though we have added something to our Target slots but we haven't removed anything yet from the source slot that we've been taken from so what we'll do is we'll copy over the set array element uh of course will be working with the same array here but now instead of taking the indexes from the target slots we'll be taking the indexes from The Source slot instead so we want to set up the index here and the item index from The Source slot and then we want to just make this one entirely empty so has item is going to be false item stack is zero and the item asset will be set to just a null pointer like this that way it actually removes those items from the slot that we've taken them from and once we have done that we can simply uh call on inventory changed so that the inventory uh visually updates as well now the next part is the left click version which is still what we're working with here of what if this is false what if I'm trying to add something to a stack that doesn't allow for that much more room so for instance our stack size for the rocks at the moment is 64 what if I already have 50 items in that stack and I'm trying to add another 20 that would add 70 and that goes over the maximum stack size so we need to implement something for that as well now we're going to be using another one of these set array elements of course I'm just going to copy over the note that references the inventory and naturally just as we were before we're going to use the target slot for the index because we're setting the Target first the item slot can just be copied over from either one of these nodes again it doesn't matter the has item slot again same or you can just set it to being true whatever works for you but the item stack size is actually remarkably easier because the entire point of the setup that we're making here is what we're trying to add is going to overload the stack size so the stack size is always going to be maximum and we already have a reference to whatever the maximum stack size is allowed to be for this specific item so we can just put that into to the SAT element and we'll be fine this is the easy bit but now we need to calculate how much over that stack size limit we go and put those items back in the stack that they originally came from because if you're trying to add 20 to a stack that already has 50 and it's getting set to 64 there's six items remaining left over that what are we going to do with those six items and those six items need to go back from the stack that they were originally taken from so the way we're going to do that is using the add item to stack function that we made in a previous video the stack index that we're going to be adding them to is going to be our source slot so the top one in this case here the thing that we've been taken from that's what we're going to add them back into so that will be the index that we're adding to the amount to add is a little bit more tricky to calculate uh not that much though don't worry because what do we have we have the maximum stack size and we have the amount that our two slots will be added together if we take the outcome from this addition operation and from that we subtract the maximum stack size we now have information about how much overboard we're going so again if this ends up being 70 and our maximum stack size is 64 the outcome from this little subtraction here will be six and we can just set that to being a local variable so we have a place to save it we'll just call that remainder and that way we have a variable that we can access whatever the remainder should be even if we set this array element because at that point all the calculations using these inputs are going to change as well so it's a good thing to put this into a separate variable that we can access even after we change the array elements because we need to use it here and the amount to add will be our remainer because we're adding back that remainder to the original slot that it came from but now we have a similar issue as to what we had here and that is that we are now adding the remainder back into the original slot without taking anything out of the original slot and that's kind of due to how we have the left click functionality set up we're not removing anything with our left click and drag the moment we start our left click and drag operation like we are with the right click and drag operation because we also need to have some functionality for swapping these slots so it doesn't really work that well with it and that's why we're making two different implementations for either left click or right click right click we'll get to in a minute but this means that we still have to subtract the amount that we have added to our new slots from our original slots and of course that's actually quite easy because what we can do is we can just take this stack size over here and we can multiply that by netive 1 to make it negative because it needs to be negative and then if we just add the remainder to that this will now be the proper new amount so we are subtracting the amount from the original stack that we're trying to move but then we're adding back in the remainder for the amount of items that didn't fit in that slot doing that together and using our add item to stack function like that will mean that we now can left click merge things together and of course that also needs to hook up to all on inventory changed now this is the left click version of the entire thing and it looks like a mess but that's just because we're going through this tutorial and just really nearly hooking things up if you're looking into the actual project files that I'm going to be including maybe not the episode by episode project files but definitely the finished project files for the entire series everything will be ordered a little bit more neatly and more readable and if you want to check out those project files you can do so in the links down below description to the patreon or for YouTube members all that self problem added way uh let's add in the right click version so we can also uh go off of the false spin here and that we'll just assume is right click and what we'll do there is we'll just copy pretty much all that we have here and we'll paste it down here which is less than ideal uh but that's just the easiest way to get all the information that we need to have so we need to reconnect up a couple of things uh that being the max stack size for the items can be taken from either one and we need to uh take the stack size from both of these and connect that up to this math note that we have down here both of these indexes should be the destination slot so that's the bottom one down here or the target slot as I called it so hook that up into that index and this one as well uh and then both of these need a reference to the inventory array uh to so I just need to hook up a couple of things that I didn't properly select is really what it comes down to uh the item asset and the has item for this one also copy those over from the destination or the source in this case it doesn't really matter and then this one also is an index that needs to go into the destination slot index uh don't forget to hook up the item has item to something when you're copying this over because I did and that made me really confused and also the item asset itself uh don't forget to hook that up somehow I entirely blanked on that and that's really why you don't want to have a blueprint like this because it's very easy to miss out on things and I believe with that we're pretty much there because the only real difference between the top one here and the bottom one here is that in the bottom one if we're doing any rightclick operations we don't need to subtract from the original slot because that's just baked into the way our rightclick operation Works to begin with now you could make an argument for maybe you shouldn't have done that and you should just make a streamline between left click and right click personally don't think this is that big a deal and I really really do like the fact that when you right click and drag to split a stack it immediately shows you the new number on the old stack so that's kind of the reason we're doing that but we don't need to do any of this math down here with the bottom at item to stack that's just going to be the remainder is going to be the amount to add and the item stack index will still be the source slot so that will be the uh index from the top one here and for the right click you also don't need to do the uh true path the second set element uh you don't need to do either because this is to blank out the original slot and of course we don't need to do that because that's already dealt with by our right click operation so we can delete that one as well and immediately go into call on inventory changed and of course we need to uh hook up these two Branch nodes so the branch node for left Mouse button if it is false it's going into the input for this Branch note over here if I don't mess it up and once again this look like a uh entire mess we'll make sure that things are a little bit more cleaned up in theend in the actual project files that we will be providing uh for extra material so this is the function for merge slots and this was mostly the painful part of today's video so let's go into the wbp item slot and actually Implement that shall we because last time when we left off here just to refresh on memory real quick uh we just said hey if the slot already has an item uh just do the add item to stack which is a function that will put back those items in the stack that they came from but now we're going to add another if statement to this or a branch uh if you will and here we're going to check hey there is an item here that's neat but if that item is actually the same item between the destination and the source maybe we'll try to merge them first so if this condition is false we'll still do the add item to stack and if it is true we will use the inventory components to run a merge Stacks function and we'll plug in those parameters in a minute but first let's do the conditional check here we have our inventory stack which we get from our drag drop operation in case you have forgotten and from that we can just get our item assets and we can just say equal equal as a condition check and we're going to check that against our own inventory slots which we already have a easy to get reference to here actually and just to see if it's the same item and if it is uh we run the merch Stacks it's just as easy as that now we want to pass through first and foremost a pointer event which we can get if we just go all the way back here the on drop has a input for pointer event we can just pass that through easily like that and then the source slot and the target slot the target slot is just going to be our inventory slot that we're working on right now and the source slot will be our inventory stack again the thing that we getting from our drag and drop operation this will only do the merging though for the rightclick version of moving items around left clicking still doesn't have any merging so you can really decide that if you don't want to have the capability of right click merging or the capability of left click merging uh to just not include either one of those I don't see why you wouldn't do that uh but this is also why we made a single function that inside the function just has capabilities for both left or right clicking to merge uh you can also make those into separate functions just put the right click version here and then we're going to be adding the left click version up there uh so let's take a look at that we can just copy over pretty much these same conditional checks up here and we'll just first and foremost check um add on one more Branch node actually first and foremost we will check whether or not the slot already has a item in it which we can do with our Target slot has item let's just go copy this over here just to make this a little easier to work with we get that off of the inventory stack from our drag and drop and let's check whether or not this thing has an item if it doesn't have an item we'll just run the swap slots function which is what we've been doing so far if it does have an item we're going to check hey is there a possibility for merging this if there's no possibility for merging it we're still just going to swap the slots and the way we checked for the possibility for mergers we've done that a million times we check this item asset and then we also uh get our inventory slot we split that structure pin and check that item asset as well and if those are the same we once again do the same thing we run the merge stack function of of our inventory components so we merge Stacks pointer event of course takes information from the input on the on drop function and then we do much of the same way uh the inventory stack that we pull through is going to be our source slot and our Target slot will just be inventory slot that we have on here now there's one important thing that we need to actually update in order for this to work and for that we're going to go back to on drag detected because as you can see on the rightclick drag we send through a inventory stack in the creation of the drag drop operation that we have here uh but we don't really do that at the moment with the left click version so what we'll do is we'll just uh put the inventory slot into there we haven't been using that information up until now so I haven't connected it up but right now we're going to be using it so it is important to have and that is basically the setup for merging Stacks so let's see if it works for ease of testing I'm going to go into my item assets here and I'm going to go uh Rock maximum stack size uh like 10 because otherwise getting to 64 it's going to take a while it's going to be annoying don't really want to do that and for this uh qu quote chest that I have here I'm also going to go in and uh set the stack size for the rocks that spawn in to something like 20 for both of them just I could just spawn in one with 40 I could probably should Let's test it out and now we can like just pick up the sword because why not and then pick up a unhealthy amount of rocks with all my line tracers and this should really be enough for me to be testing my inventory with so let's open the inventory test out we can still uh swap around our slots we can still move to empty slots because that's functioning the exact same way we can still split Stacks like this but now what we can also do is we can pull a stack onto another stack and it will merge them together which is very nice and that just added five and five to 10 that's a full stack but if I take this uh three stack over here and put it on this five it becomes an eight stack which is fantastic now if I pull half of this eight stack off and put it onto this five stack this will become a nin stack even better now if I put this four stack and I put it onto the nine it should become a 10 and this should become a three and so it does so now the last thing that we need to check is if we merge this all together that's fine an eight stack if we try to like go overboard with a uh split stack like this so we take five out of here we try to add it to this one this should be 10 and this should go back to being eight and so it does so our inventory splitting and merging now fully works there's a little bit of iffiness in some of the setup here because of the way we have some of the other code set up again I really do like the idea that when you pull off of this you immediately see that there's five left here and it's kind of just because of the way we have that set up that left clicking and right clicking operations are dealt with differently but now that we have all of that set up we shouldn't really have to think about that anymore because we can use these functions in a bunch of different scenarios now and that's the basics of the inventory itself done the only things that we really can do now is go forward and add things like dropping items maybe add things like chests and shops and we'll do a couple extra parts here to implement those slightly more advanced things but this is the basic setup for your inventory system now that we have a more or less functioning inventory let's take a step back and do something slightly simpler to really reiterate all of the techniques that we've talked about in the last couple of videos and then after that we're going to be moving on to some more interesting stuff with chests and shops again but for today we're going to be talking about how a character can drop items from their inventory back into the world because at the moment what we can do in the game is we can pick up items with this line Tracer over here but we can't then drop them back out our inventory again also I'm going to be anchoring this to the left side of the screen rather than the center so it actually stays uh in my uh view properly I also made the inventory a little bit smaller and uh thinner just to have it look a little bit better so let's get started on our widget that we can use to make things drop let's come into the inventory here and we're just going to make a new widget blueprint here so we'll just make a new simple user widget and we'll call this widget blueprint drop item let's get started here with uh we're just going to use a size box for now uh because that allows us to very easily set the actual size that we want uh which in this case will be the same as our inventory slots I imagine maybe a little bit bigger let's make this 150 by 150 and then for reference purposes we're going to put this as desired on screen so we can actually see how big things are and in that size box we'll just simply put an image and we don't really need to do anything more with it to be honest with you and I had Chad GPT generate me a arrow image which again much like all the other images here it's kind of bad but it'll do the trick for now then we go into the graph View and obviously we overwrite the same function that we did on the inventory slots themselves that is on drop because we're still working with drag and drop operations here doesn't really matter whether on not it is the uh left or the right Mouse button that we have here the only thing that we really care about is the operation which we need to ca to our drag drop operation that we've made in previous Parts with that we can first and foremost delete the item out of the inventory and then we can spawn it into the world so let's go back into the inventory component here which still is a little bit of a mess don't mind that and we'll just simply make a new function here uh that clears out an inventory slot I think that will just be the easiest thing to do so we can make a function clear inventory slot and this will just very simply um take our array set an array element of a certain index to be an entirely empty inventory slot uh but it will still have the proper index and of course as with everything we want to uh call on inventory changed now the drop item now the drop item blueprint is going to need a reference to the player inventory components and since we're not going to be using this in things like the and since we don't really need to use this in context of a enemy or a merchant inventory or whatever because you're not allowed to be able to drop the things in those inventories into the world right that would be just stealing their inventory only really relevant to player inventory we don't need to do anything uh too drastic about this we can simply just get the player character and we can uh get the inventory from that with the blueprint interface that we set up previously and we could promote that to a variable but we're only going to be using this uh right here for this one thing so we don't really need to uh and we can clear the inventory slot like that and the way we can figure out which inventory slot we want to clear is we can uh get our inventory stack split that structure inin and get the index that we want to clear and now we'll have a button where if we hover over it in our inventory it will clear out that inventory slot but this is just a deletion button this this is not a dropping button well first and foremost uh if we copy over this code into a separate blueprint which will just delete something um that actually works out perfectly fine so if you want to also have like a recycling bin in your inventory where you can just delete items out of existence this is simply the way we do that and we might also make that in a second just to have a more complete inventory uh but again we don't really care about doing all that at the moment what we want to do is we want to actually uh spawn an actor from class and we're going to go all the way back to early on in this series uh where we made the world item actor which allows us to spawn in actus into the world and we want to figure out which item we want to spawn in and how much of that item and when you know it we have that information right here so we actually want to do that before clearing the inventory slot for what I assume are obvious reasons because if we clear out the inventory slot then the data we'll be reading from whatever inventory uh slot that we're dragging away uh is now empty so we want to spawn it in and then clear it out so we just drag in the item data asset to the item data asset and the stack size to the stack size now for the we will transform uh we're going to split this one up the scale will just be 11 one one uh the spawn rotation can be 0 0 0 I don't really care about that for the location we'll get actor location from the player character get actor location and to that we're also going to add the get ector forward Vector which will multiply by something like I don't know 200 to have it spawn slightly in front of us when we drop it otherwise it's going to drop on our head and that's not really what we want so let's convert this spin into a float and multiply this by about 200 and then add that to our current actor location and that's going to be the place where this spawns into the world all right and that's really all there is to that so let's go back into our player inventory which again I've have uh changed up a little bit and in our canvas panel we will add a drop item widget which we can just put in like this and we'll anchor that to the bottom left so let's test this out we can collect a couple of rocks here that's all fine let's also collect the sword because why not we have it in our inventory we can drag it into our drop button over here and then it spawns it into Ru clearing out the inventory slot now the real test is does it have two rocks inside of it one two and it's back in our inventory we can drop the sword and it works much the same way so we can now also drop items as a little bonus here because this is a pretty quick and light episode we're also going to actually do something that I wanted to do quite a while ago and that is make this thing have a border when we're hovering over it just to make things look a little little bit better so we'll go into the item slot into the event graph and we'll actually uh select the button that we've added you might have been wondering we haven't been using this button at all why is this even relevant and that is because the button just gives us an easy way to see when something is selected or something is hovered over and that's what we're going to be using here uh it's entirely a stylistic thing so let's say when we are uh hovering over it we will take our uh border image here and we will set brush from texture and we can just select our new texture there but before we do that we want to also go back into the button here and say on un hovered because we also want to set this back to the original image when we're no longer hovering over it so let's set the UN hovered version to our uh border image or whatever we call it inventory slot and really quickly in Photoshop I'm just going going to add a quick stroke outline around it uh it's going to be a little bit bigger than that and let's make it a nice thick color like uh like yellow maybe even a little bit brighter and something like that should work just fine so now we have this outline selected version which we can choose and we'll see now as we Mouse over this we highlight the inventory slot that will currently selecting now let's also uh duplicate the drop item into a uh delete item and here we're simply going to go into the uh graph and on drop what we're going to do is we'll just uh get rid of the spawn actor stuff and only clear out the inventory slots which does bring me to one last thing that I want to talk about right now today because if we add this we can say okay delete item that's all nice uh we want to definitely give this a different image which I also had jpt generate a garbage bin for me and to make this also work with the uh controller inputs or just like keyboard inputs or whatever if you're not using a mouse uh what you can do is you can also add the event on Focus um add it to focus path so that is event on added to focus path for the set brush selected and then um event on removed from Focus path for the normal brush again this way when a inventory slot is selected as being active it will have that highlight around it as well even if you're not hovering over it so I'll show you that real quick I changed the keybinds to open the inventory with I and if I just select something here and I uh make this the active window I can tab all throughout it it still has the blue outline around it that would also show that this is currently the selected slots but we also have our own yellow outline on it now so that's neat and if you do this with uh the arrow keys it also works fully well and so forth and so on same with if you have controller bindings for this you can now navigate this with the controller fairly easily of course you would also need to set up some drag and drop functionality for your controller which we haven't done here but that is kind of the same as we have done but instead of using Mouse events you would be using key input events instead and one last thing that I want to show is in general if you do like a left click operation and you let go of it uh anywhere in the screen that doesn't have any like on drop functionality so anywhere at all uh nothing happens but since we already remove the split stack at the moment we start splitting them if I cancel this operation by trying to drop it somewhere that doesn't have a drop location uh it doesn't add them back into the original slot either that is something that we didn't cover in the stack split video and since this video is just a little bit of adding things and polishing things up uh let's do that here as well so in our item slot over here we can also uh come into the functions and we can see uh when as a quick correction on a part of the video that I don't know how I'm going to cut this yet uh but what what I did in the original recording of this video uh for this section is in the item slot I made this little function over here which was supposed to prevent uh splitting stacks and then deleting items accidentally when dropping it outside of a window and that didn't end up working out too well so instead what I ended up doing and I'm just going to go through this um after the fact I made in the event graph for the item slot the weit for drop event and all that that does is it binds to the on drag canell on a drag and drop operation so the parameter here is a drag and drop operation I'll just call this DDO then on drag detected if that is a rightclick drag what that will do is it will pass through that drag drop operation to wait for drop and this will then fire and then that means that whenever we cancel a drop so whenever our drop ends uh this new custom event will now fire which will of course uh cast to our custom drag drop inventory slot thing that we made uh in which I have made a new variable for Success just a buling that will test whether or not we successfully dragged and dropped into another inventory slot if we didn't drag something into an inventory slot this will stay false and that way we can check whether or not we should restore things to their original slot or not so here we check whether or not uh this is a success and if this is not a success meaning that we release the button outside of any relevant window uh what it will do is it will take the inventory components that we took this from and on that run the add item to stack and since we are just passing through our drag and drop operation much like we do in all of the other code in this system we can simply get the stack that we were trying to add to something and add it back to where it came from and then I unbind that event again until the next time around when we do a drag and drop then in the on drop function we have here at all of the PA end up leading to uh setting the drag drop operation that we get pass through uh to setting the success value to being uh true also what we should probably do is in the uh drop item operation and the delete item operation we also need to go in and uh set the success value to being true I had not done that yet I just wanted to jump in and record this little correction right away because I'm going to be editing this video soon and I wanted it to be in there so again in the delete item we will also jump in on drop we will make sure that we set success to being true this is just a value that we can now look at when we finish a dropping operation to see whether or not we actually dropped it into some kind of other UI element or if we let go of it in the middle of nowhere in which case we need to uh reset it once again this is entirely because uh I'll just pick up a couple of items this is entirely because of the way that I decided that when draggon and dropping with right click and splitting the stacks I immediately want the number on the bottom right here to update on the old stack meaning that I already am deleting items out of it uh if you don't want that none of this really is an issue because if I try to do this with a left click uh it simply doesn't do anything when I drag it out of it uh but now when I do this with a right click it also restores it to the slot that it came from so that's very very good because we're clearing the inventory slot from the index uh what we should be doing we should only be clearing the inventory slot if it's a left click up operation uh which is kind of annoying to deal with so um it's not that big a deal though because we can of course get the affecting button and we can check if the affecting button is a left click in which case clear inventory and otherwise do not clear that inventory stop because we've already subtracted what we needed to subtract so this is a little bit of a messy video all together I am aware let's also do that in the delete item while we're at it and also make sure that the success Val here is said to True uh but every so often you just need to go over your code and test things out and refactor some things and make sure everything works so I kind of guess that this episode reflects that part of coding as well so again get the affecting button check whether or not that is equal to a left click in which case do the clear inventory for right click don't do that and we still want to probably hook this up on the return node uh just to be sure and we set that to true I don't really think it matters to be honest with you at least not for our purposes but we might as well so now we should be able to delete half a stack without deleting the original stack there and the same with this we should be able to drop half the stack without it deleting the original index as well so everything works now and once again I can drop things outside of this window and they will just return to where they came from a little bit of a extra update uh at the end here after I recorded the initial bit and I was working on tiing some things up and I figured out a couple of bugs that I needed to fix still so hopefully this helps and isn't too confusing added on to the end of the video here now last time we did a lot of tidying up of our code uh in certain ways the blueprint still look like a mess I'll work on that later and we now have a more or less functioning inventory uh here which has a highlight selection it has a delete button it has a drop button we can uh pick up some items but as you could see the thing that I just did there was opening a chest quote unquote and I don't know that's not usually how chests work they don't just explode items into the world so that's what we're going to be looking at today uh but as you can see everything works as you expect inventory to work this is what we've been making so far today let's actually make this chest into a chest rather than something that just bars items into the world because that's not really what we want to get started here uh first things first I'm going to uh put this inventory slot image into a different folder and we're going to just copy over the player inventory really uh because what we're going to be doing is a slightly different version of the player inventory so we'll call this um wbp chest inventory and when we open that up uh and uh put it into our uh tabs here we'll see that we have the play inventory as we used to uh for this version of everything I don't think we're going to necessarily need the delete or drop button it could be useful to have that in a chest to be able to take things out of the chest and drop them into the world but if you're going to do that you might as well just keep them in the chest right and the same thing with deleting them there's no real use to having these around so let's just uh remove those and that allows us to make make the inventory for the player a little bit larger then uh we'll name this item grid player because we need to display two item grids here two inventories that we're going to display so let's duplicate this one over uh and we'll put that on the other side of the screen roughly in the same position uh and we'll anchor it to the right side of the screen it's probably not going to look very good right now uh but this is mostly bad functionality and not visual design and this one will call Item grid chest now going into the graph we need to set up a couple of things because usually we have the player inventory component and the um and such all being set through spawning the thing in and that's still going to be how we set the inventory component for the chest obviously but for the player inventory component we don't have to worry too much about it because that's always going to be the player the way I showed you before is a more generic way to pass through information and references from parent to children or whatever which we're still going to be using uh but for the player itself what we can actually do is we can set the player inventory uh component value through a very easy method and that is uh just getting a uh set note and we'll get the player character and since we made a interface to get the inventory from any object really uh right at the start of this series we can very easily just get the inventory from the player if you want to make sure that it is a uh valid object you can put it as valid node in here I don't really care so I'm not going to do that and that way we can get the value for the player inventory component into this very very easily now we could have also done it this way in the actual player inventory and you probably should do it but I just wanted to show you the way to pass through that information from layer to layer to layer because otherwise I would have to explain it at this point and there's plenty enough that we're going to have to cover in this video now that said we do need to also make a chest inventory component which is of course going to be of type inventory components this one we will set in much the same way so we're going to expose on spawn and set this to instance editable and then the player inventory component is actually not going to be exposed on spawn or instance addable for that matter and here we have uh the item grid for the player being set by the player inventory component which is exactly what we want so we'll copy that over and get the chest inventory component and there we will try to uh set as the value for the grid that the chest is going to use so in here we can then also set inventory component because that's a variable on the grid that we need to populate and that'll do what it has to do whenever we construct this thing of course we are also going to immediately do a first update for the player grid and you guessed it we also need to do that for the chest grid so we can just copy over this node link this all up and that will do just fine now if we go back to our chest blueprint and open it up we also have like our interaction uh interface on here and we set that to just spawn in the items inside the chest of course that's not what we're going to do anymore here so we'll delete all of the code that we put in here in the first place we also have a return now just hanging out somewhere and in its events graph we're going to go back here to begin play because on begin play I actually want to create the widget right away and of course the widget that we're going to create is the chest inventory uh because I want to set the chest inventory component value right off the bat and then we'll promote this to a very able uh and we'll call this chest UI because now we can go back to on interacted and we can just get this chest UI and add it to the viewport here so we can add to viewport but the UI element will always exist on the chest we'll only add it to the viewport when they become relevant this is not technically speaking the most ideal version of it because now every chest is always going to have its UI loaded into memory ready to be displayed on the screen these UI elements are so negligently small for your memory footprint that unless you have a ridiculous amount of chests it's not going to matter and it does make this just a little easier to deal with now whenever we put it on the viewport uh we also want to make sure that we have the most upto-date information on the inventory uh it should display the most upto-date information on the inventory but it can't hurt to make a event that specifically does that so what we'll do is we'll make a custom event in the chest inventory blueprint and we'll just call this update item grids and that will just go into the same thing as the event construct we can just run this manually to make sure that everything has the most upto-date values in them uh and we can just run that from our chest UI reference so we can just update item grids just to be sure now then we want to set our input mode to UI only for that we need to get the player controller uh because of course set input mode to UI only you can also set this to gameplay UI really depends on your own game and the widget that we want to be focusing on is our chest UI widget and we also want to make sure that our set show Mouse Cur up is set to true because we're going to be well mousing all around the screen trying to do some inventory management so so set that to true and that should now allow us to open up this chest and see its inventory and we can even within the inventory itself uh move things around but what we cannot yet do is drag this from one inventory into another there is a little bugginess if you try to split it into this inventory that does work for some reason I have not programmed anything in for this to work it just straight up works I'm going to be real with you I'm kind of confused as to how this works so let's get working on that and for that we're going to need to revise a fair few functions that we have made on our inventory components to take into account not only moving things around in one inventory but also have a sense of a source and a Target inventory so let's open up our item slot just to see our graph here with all of the functions that have to do with switching items around and moving items and whatever whatever whatever because all of those are going going to now need to also have a input for a source and a Target or at least most of them let's start with the most important function uh which is the swap slot this is just the left click dragging an item into a different slot and if we open that up we'll see that again this is a quite simple function let's go and add some parameters to this shall we we want to add a source inventory which of course will be a inventory component and then we'll also add a Target inventory so Target inventory instead of just using the array from uh this side over here just dragging that in what we're going to do is we're going to take the source stack from our source inventory so we want to uh get the inventory array on our source and that's going to go into this getting node instead and much of the same we're going to do down here we're going to uh get our Target inventory we'll find the uh inventory array in that and use that instead in this getting noes so no more simply dragging and dropping this from the sidebar because now we need to be aware of the original inventory and the inventory that we're putting things into same thing goes for here this is just both using the normal inventory uh array that we have but we want to put the Target stack into the original Source inventory and the source stack into the target inventory uh so we'll take the source inventory the array and we're going to put that into the first note here the thing that is setting uh where the Target stack is going to go and we'll take the target inventory array and put that in the other set array element now it's also important that we do the call on inventory changed properly because this is just going to call this on the inventory component that is being run itself uh but it should actually execute this on both of the inventories so it should execute this on the source inventory but also on the target inventory and now that we have that set up we can go back into our item slot and we'll see that our swap slots function now has two more pins in it how are we going to get the information to put in those pins well that's remarkably easy for both of them actually because we already have a inventory component on our item slot and that's just going to be our Target because this is the thing that we're dropping on top of the source inventory component is actually also really really easy because if you remember back all the way to when we made this drag and drop operation I added in a source inventory component as one of the values here and up until now we haven't really used that but I knew that we're going to get to this point and we're going to need to use it so included it right off the bat going back into our item slot on drag detected you will remember that we put the inventory components into the drag drop operation that we created so this is taking the inventory component from the item that we're taking and passing it through the drag and drop operation so that when we eventually drop it back into another slot we still have that reference to the slot that we' have taken from and that means that we on drop simply can go back to our drag drop operation and we can get the source inventory component and it's just as easy as that plugging that into our swap slot so that's the basic setup that we're going to have to do for more or less all of these functions uh but let's just show off the fact that it works first here in this so I can now take this from this inventory and put it into this other inventory and I can just swap these back and forth as much as I want to so now let's take a look at some of the other ones we also have uh they put a new stack the add item to stack and the merge stack functions now that we've gone over these uh these are going to be uh somewhat more simple the put in new stack will just take in any inventory array and put an item into an index in that array that's quite fine this doesn't even need a source and a Target this only really need needs a Target and as such we don't actually need to put any new pins into this one so that's fantastic add item to stack this one however is also used to uh add items into a stack potentially in the chest because we're also using this in the rightclick drag and drop operation so this one does actually need to have a source and a destination so let's add in our Source inventory specified and for that we will get the inventory array and we'll just replace this reference here with the reference from our Target inventory which then also needs to be updated with on inventory change going back into our item slots we now have add item to stack here which will be in our Target inventory so we can just get our inventory component from our variables and put that in this that only leaves the merge Stacks function which if you recall is a mess I probably should have cleaned this up before starting this video eh well it's a little too late for that now so let's take a look at we need to have a um concept here of source and Target both so we have the source inventory because this blueprint wasn't confusing enough as is don't worry as I've said before in uh other videos by the time the project is finished and everything is up for patreons and YouTube members uh this will all be a lot neater and a lot more organized the episode by episode uploads that I'm also doing uh for these project files they are going to be messy the final one is going to have more reroute noes going to save things as variables so that they're a little bit easier on the eyes they going to be commented and all that anyway we have our uh Source inventory and our Target inventory now so let's take a look at which ones uh belong where this first one here is setting the targets so let's get our Target inventory because this is the slot that is getting the new items so uh get inventory array so we can replace that with the Target and then this one is clearing out the original slot that things came from so that's going to need to be taken from the source inventory slot so get inventory array from the source and clear that out here and in much the same way uh we need to use the target inventory which is this one in this bottom set array element down here and then we need to add items to stack that's the function that we just uh changed as it was that now has a Target inventory and the target inventory here is going to be the source inventory and that might sound like a confusing sentence but let's just think about what Happening Here we are setting some items to the new inventory slot and everything that is left over is getting put back into the inventory slot that it originally came from otherwise known as the source inventory so we take the reference to our source inventory and put that into the add items to stack function here and then down here we have something very similar going on so we want to uh pull down this reference to our source inventory slot into the add items to stack as well and then these both going to be our Target inventory slots so that will be our Target inventory and we'll get the inventory array out of that one as well so as you can see a lot of what we're doing right now is just retrofitting existing code to work with multiple inventories and not so much doing new code and with that we can go back into our item slot and also uh put in the proper values for the merge stack so the target inventory in both cases merge Tex is in two locations there's the second one is going to be just the inventory component reference that we have in our variables and the source is going to be uh the one we get from the drag and drop operation the thing that we pass through when we start the dragon drop operation so now that all of that is lined up our dragon and dropping between inventories should just straight up work so let's open up our chest and see okay we can drag and drop this over uh and we can drag and drop half of it back over to there and that works drag and drop half over to there and as you could see actually I didn't even mention this uh before but because we set up that chest to have uh two stacks of 20 in it you can very easily set up chests and generate chests that are more compact than you as the player can actually um do because it just generates those stacks of 20 and then when you pull those stacks of 20 apart you can't re combine them anymore because of how we have things set up so if you want to have like a uber chest where the player has to start choosing what they do and do not take uh that might be an interesting way of doing things just adding like stacks of like 100 gold coins in every single one of these slots and gold coins only stack up to like 50 so you can only take half of them at a time just very interesting opportunities for your game design anyway uh we can just inventory manage between these two inventories uh the last little issue here though is that we still can't access out of this inventory uh because our player input is getting blocked because we're setting this to UI only mode so let's get back real quick and the easiest way to just fix that is just adding a simple button uh we'll add a button and we'll add that to the bottom middle um anchor and we'll just add in a little bit of text uh that just has close chest or something like that um close chest and probably make this uh black color so that it's more readable and then when we click this I'll just put that down here somewhere we can do the onclicked event and what this will simply do is it will get the player controller it will first and foremost set the mouse cursor shown to false and it will set the input mode back to game only so input mode game only uh we can flush that input so that the game itself doesn't pick up on that click in case we have like a attack set to our left click action or whatever and after that we simply uh remove this widget from parent so that's going to remove it from The View Board and with that we have a nice chest that we can very easily close again and we have control over our character and you can just add your own items to these chests as well I mean that should be obvious but I just want to show you and if I take some items out of it I close the chest it's just an inventory component uh that is going to survive as long as this object is alive so if I open up the chest again the contents still are the contents that we left in them now if you're streaming this chest in and out of course you're going to need to put that into a save data object uh but that's not really what this tutorial series is about and I'm going to assume that you know how to either save data or carry over data into like the game instance or whatever but this is how you make a chest functional for your game so with that we only really have one more important thing that I really want to do and that is making a shop for you because a shop is kind of like a chest but slightly different to finish off this inventory series let's let's make something like this a shop where we can say hey I want to buy a certain amount of items and then it subtracts them from this inventory and puts them into this inventory and we can select any slot in either inventory that we want to either buy or sell things and we are not allowed to drag and drop Within These inventories we're going to split this up into two parts one part is going to be the setting up of the selection of the inventory slots and then the next part is going to be the actual buying and selling since this is the last thing that we're doing in this series uh there will be only one link Down Below in description which will just be the finished project which is up for download for YouTube members and patreons doing a per episode upload for this one doesn't make a lot of sense because after this we'll be finished and I'm not going to be uploading half a progress update so let's get started on making the shop inventory the easiest way to do that is to use the chest that we've made before and do duplicate that to be the basis for the shop because we need uh two inventory slots just like we do with the chest now in the shop itself we're not actually going to be doing that much different here today uh that's mostly going to be the next part where we do the actual shopping calculation stuff uh so let's open up the other classes that we're going to be working in today as well which will be our item grid our item slot and we will go back into our content folder here and open up our inventory component as well just in case we need it again don't mind all of this mass in the project download that will be down below in the description this will all be cleaned up and much more neatly organized so first things first coming into the item grid we're going to be adding a couple of variables to this uh and number one will be allow drag this will tell whether or not we're allowed to drag and drop within this inventory or not then we will do allow select which does something similar but for click selecting and while we're at it we might as well also make our selected index variable which is going to keep track of which inventory slots we have selected in this inventory uh that will of course be a integer because once we have done that and we go back into our shop what we can do is we can select these item grids that we have in here and now we were able to see that we don't want to allow drag but we do want to allow select so let's set allow select to true for both and now I think about it it's probably a good idea to set allow drag to be true by default because most of the inventories we do want to be able to drag and drop around so we set that to True by default and then select them to false in our actual shop window here but those vales in of themselves aren't going to do too much so the way we're going to use uh the allow drag ball let's do that first is coming up into a it slot which is this widget if you remember correctly into our graph we're also going to add in a allow drag into here which will also be a Boolean which this one will be uh exposed and also Exposed on spawn because we're going to be setting this every time we spawn one of these in then coming into our Mouse on preview Mouse button down uh this is our drag and drop operation uh start here with with either left click or right click this is how we start our drag and drop operation so let's get our allowed drag and put this into a branch note and only if we are allowed to drag in this item slot will we start our drag and drop operation to begin with if this's a set of fals we won't even bother setting any of this up because we're not going to be allowed to drag and drop anyway now with allowed drag being an Exposed on spawn value we can come back into the item grid here and you can already see that allow drag is now one of the pins if it's not what you can do is you can just refresh note and it should show up so we'll simply set allow drag to be equal to the allow drag of the item grid itself so now every time a item slot spawns in it's going to copy over the allowed drag value from the grid that it's spawned inside and you can quite easily test this out if we were to make a shop so let's also do that for for testing purposes we can just copy over uh the blueprint for the chest because it's going to be very very similar so let's call that blueprint shop and uh in the viewport just to differentiate them I'm going to set this to the same material that I did in the preview the beginning of the video the hack Styles you can do whatever you want realistically this would be an entirely separate static mesh uh but in the event graph we instead of creating a chest inventory widget what we'll do is we will create a a shop widget and then the chest UI variable that we have here will also change over to a shop widget variable uh that does make a couple of nodes in another function misbehave we'll worry about that in a moment we can now reconnect these up and just to keep things uh tidy let's rename this shop UI coming into our interface here on our on interacted uh we have this node here which is trying to still use our shop UI and our chest UI and everything but it's not really going all that well so let's remove that and uh repport it we can just add to viewport that's not a problem uh this one we won't be able to connect up because it's trying to run a function on the chest widget class which this is not a chest widget uh but our shop UI has the exact same function so we can just run that don't forget to put the widget in focus to be our shop UI and then everything should now work so we have our shop interactable and we can if we just open this up a little bit create an inventory component uh which we can just inventory Constructor we can like add a rock to it and let's say stack size is 20 for this rock uh pick up the sword as well why not and if I go into this chest over here now you can see that we can't drag and drop these items around if I close chest this will be called close shop in a moment going to my own inventory uh here I can still drag and drop them around so we've now disable dragging and dropping on only the shop because again in the chest I can still drag and drop all alike now dragging and dropping has been disabled in the shop but now we need to enable the selection the left click selection of the slots like I showed you in the beginning of the video and that's where the real stuff get started so let's get into that and the place that we're going to start that off is in the item slot itself because obviously we need uh to be able to click on these things to make them uh selectable and this is one of the reasons that we started out way in way in the first few parts of this series uh with a button on this UI so it's clickable easily we've already used the button Behavior to make it uh display a Bo order on hovering over them uh clicking is going to be uh the other thing we use this button for so select the button up here and add a onclicked event and we'll just pull that up to be in the same area as the other two button related events and all this is really going to do is it's going to call an event dispatcher so let's make one and call that on button pressed and let's just add a call to that now so far all of the event dispatchers that we've used just sent out a message that they have been called that the button has been pressed in this case but now we actually need to send through information to everybody listening in on that as well which is interesting so you can actually make event dispatches use the signature which is just the set of parameters from any other function on this class or any other event so let's make a custom event and we're not actually going to be adding any code in this we're just making this custom event to have a signature to copy from so we call it like unselected or something like that and here we just add in a input uh we'll call that index doesn't really matter will be an integer now you probably want to compile this and then coming back to your event dispatcher you can choose the copy signature from and there we can find somewhere in here on selected and the moment I press that you will see that on button pressed that call now has a integer parameter to go with it now the integer parameter is actually pretty easy to get a hold of because we have the inventory slot uh value and we can split that structure inin and that just has an index we put that in somewhere else in the code so we already have easy quick access to that and while we're in this item slot uh we also want to do something El because we've got these uh two Lev hover things on Hover and on un hover which create those little yellow borders around our item slots image uh we only want to do that if this is not currently the selected item slots because if it is a selected item slot we're going to put another border around it and we don't want that to be overridden by the yellow border or when we move away from it to be just the default inventory flot image so what we'll do is we'll also add a variable here a ball uh called simply is selected and we'll use this value in a couple of other places as well uh and simply what we're going to do is we're only going to allow these set brush from textures if is selected is false so if it's an unselected slot it will display those yellow Borders or no border at all if it is a selected slot we'll just ignore everything to do with this because it's going to have a different port to begin with and that will be it for now for the inventory slot itself so let's go back to our item grid because this is where the interesting stuff comes in we want to go on our update item grid here and move things around a little bit because we're going to be putting some extra stuff in between there in a moment we also want to find our event construct which is uh down here and move that into a place where we also can start adding some more stuff to it because we're going to need to in a moment so in here we want to check if we're allowed to select slots in this inventory uh you will note that I have two different bulls for allow drag and allow select realistically that could be one Bol where you just check hey if we're allowed to drag do the drag functionality if we're not allowed to drag uh then we'll just add in the select functionality for ease of reading I made this into two BS but do be aware that you probably can get with just doing this as one cuz you're hardly ever going to want an inventory where you can both drag and drop and also select slots because those things are probably going to clash anyway if allow selected is false we just immediately move on to add chart to rep box but if that is true we actually want to put in a little something else this thing here creates a item slot widget and we've just made a event dispatcher on that so we can assign to onbot pressed which will immediately also make us a event to go with that and you will not that the event has the index parameter just like the signature we gave it and this is an important thing to realize uh we can just add a different custom event if you want to uh but we won't be able to add that to this event dispatcher because it doesn't match the signature we need to have it match the signature so we need to have a integer parameter and when it matches that signature we can then assign it to that event dispatcher that is quite important to realize and we'll just hook that up if allow selected is true which means that this blueprint is now going to look out for every single on button pressed event on every single item slots and whenever any one of them triggers it's going to run this event with the corresponding index number now let's get our rep box and from that we can use the get child at function which takes in an index and returns us the widget element at that index so naturally we want to get the chart at the index that is being passed in but we also want to get one of these where we get the chart at whatever is our currently selected index because we need to turn on anything related to being selected on the thing that we just pressed but it also means that whatever was selected beforehand we need to turn things off on so both of these are going to need to be cost to uh wbp item slots because that is what these are going to always be anyway so let's add two of them one for the thing that we just clicked on and one for the last active and here we want to uh for both of them get the image border that we added to it as well as a set is selected node so what we'll do is we'll set is selected to true for the thing that we just clicked on and we will set the border with a set brush from texture to whatever brush you might have for the selected highlighted I have a new separate image for that which is uh inventory slot three and that is just the same inventory slot again uh but this time with a pink uh reddish border so let's connect all of those up and then we'll do the same thing for the second item slot again the item slot that was the last active one and we'll actually do that first and the reason for that is in this we want to check first is selected we only want to turn this one off if it was selected to begin with if it wasn't selected in the first place of course we don't want to turn it off so if selected is false we immediately go into just turning on the other one uh but if selected is true the first thing we do is we set is selected to fals because that's what we're doing here and then we'll also uh get the image border from this one so get image border and we will set brush from texture and this is going to set the brush to the normal inventory slot on selected texture and once it is done that it's also going to move on to setting the other one to being true once we've changed all of these things finally then we can set our new selected index to whatever thing we just clicked on so add a selected index setting node and we can just set that to whatever input this event has once everything has been updated we have the newly selected slot then we're going to need to recalculate how much uh our potential uh transaction is going to cost and we're going to make sure that we aren't trying to buy more items than are in stock in the shop that kind of thing so we need to recalculate those things so we need an event dispatcher whenever we select a new slot so we'll say on new slot select it and for this one we don't really need any parameters so no signature need to be copied we just need to call this event dispatcher uh for future use and that really should be all there is to it so let's open up the inventory here and see can we select slots we definitely can and we can easily select slots in either of these inventories so that is the most important basics of selecting slots in the inventories that we can use for a thing like a shop now next time we're going to use these selected slots as a vital piece of information in calculating the transaction value and actually transacting those items and the money involved which we don't even have money yet in the game but that's an entirely separate thing in and of itself so next time the final part of the inventory series and then we'll finally be finished with all of it this project up to dat to this point as well as the finished project where everything is commented and cleaned up as far as like blueprints go will be down below in the description for all of the patrons and YouTube members to download we are finally up to the end of the inventory Ser last time we made inventory slots selectable in specific inventories where we allow selection and we disallowed drag and drop operations in things like this because we are making a shop today we're going to be rounding over the entire series by making the shop into an actual shop where we can buy and sell items to this shop to make a fully functioning item system now the first thing we're going to need to add here is number one uh a value for money that's actually the easiest thing because that's just adding a variable and number two we need a way to count how many items we're going to buy or sell because obviously we don't want to just every time we click on a button uh sell only one item or buy only one item cuz if you have a game where you want to buy like a th000 ammo at once something like that you don't want to have to click that a thousand times you want to be able to set the value in like a little box and then buy in bulk so first things first going into our inventory component uh this is going to be very very easy we'll just make a variable called money and that will be a float value why a float value you might ask because float values are usually nice to calculate things with we'll display these in integers uh but behind the scenes it will allow us to have like half a money which is usually quite nice because it allows you to divide a little bit easier and that kind of stuff if you really are insistent on making this an integer you can usually I only use integers for when I'm like counting indexes and stuff everything else is just to float but the more important part is making the uh shop counter so let's go into our inventory items and make a new user interface which will be a user interface call that wbp uh counter because we're going to be counting things it's just that obvious and we'll drag this over to my main Monitor and start off by adding in a overlay an overlay because we're going to want to add in a couple of different elements here not least of which are going to be uh two buttons you might want to make this more buttons you might want to do this in a lot of different ways we're going to do this with buttons because it's the easiest and most straightforward way to do it so we'll add two buttons one for increasing the amount of things we buy and one for decreasing again you can also make this like four buttons one button for increasing by one one button for increasing by 10 one button for decreasing by one one button for decreasing by 10 make it six buttons also add the hundreds or the thousands or the 10,000s you can make this as much as you want we're going to go for one and one so this will be the increase button and this will be the decrease button and for the decrease button we want to align this one to the right side of the overlay in between we're going to put a little bit of text and that text is going to display the amount of items that we're trying to transact so let's align this one to the middle and also make sure that the justification for it is also so Center text alone we'll set the preview text to zero because that's it's going to be a number right then we can open up the graph here and uh add a variable simply for the counter which since we counting things I just talked about this it's going to be an integer and we'll also add a value for the maximum that we're allowed to count up to because if we are hovering over or if we have a item selected that only has a stock of like 20 we don't want to be able to set this up to like trying to buy 50 cuz dealing with that on the moment where we press the transaction button is a lot more bothersome than just preventing people from getting that far in the first place so let's add events for both of our buttons this is the decrease button We'll add on clicked for that and for the increase button we'll also add onclicked and for both of them we're going to just get our counter and for the decrease button we're going to do minus minus which is decrement integer and for the increment button I think you know what we do we do plus plus increments integer now this is where the max value comes in because we're also going to then try to clamp that integer between a value of zero and the maximum amount of items that we're allowed to have at any given time the output of which uh we'll use to then again set our counter value because that's how clamping works so we just hook that both up from both events into this setting node which is hooked up to this clamping node and that is kind of everything there is to it for now and then we want to add an event dispatcher just to let the rest of the UI know that hey we just updated something you might want to recalculate some prices and stuff like that so we add an event dispatcher that's called on counter updates and we simply call that at the very end here quick PSA uh I'm halfway through this video and I figured out that I actually aligned these two the wrong way around so uh if you get confused at any point in time uh that might be why if you're following along very precisely um increment button on the right decrement button on the left and then we can set the text here to just a bind to the counter value so it will now always just display the counter value now with that we can go back to our shop and start adding in those counters so we have the wbp counter for this side and then we'll also probably want to actually anchor that to a decent spot as well and then we'll add one on this side as well so we'll have one counter for buying things and one counter for selling things just because I like it that way you can have one counter for either just because it makes things a little bit easier to press program uh let's give these things names the one on the shop side we'll call counter buy because we're buying things from the shop and the one on the player side we'll call a counter sell because we're selling items to the shop now we also want to add in uh two buttons for the actual uh transaction when we decide hey this is the amount of items that I want to buy and or sell uh we want to have a button to press so let's add in those with the proper anchoring as well I'm kind of adding these very just eyeballing their position obviously you want to set these to be a little bit more neatly organized if you're doing this for the actual game both of those buttons I'm also going to put the text in uh because the text that we're going to put in here is going to Simply display uh the value of the transaction that we're about to do you can place this on other places on your screen if you want to uh I like just putting them in the botton uh the display pre view it's just going to be zero we want to uh align this at the center and we'll do that for both of these buttons now that was a lot of UI set up now we can finally go into the graph and start doing some programming so we have this event construct and really what we're going to do there is we're just going to be binding to a lot of the event dispatchers that we have set up so let's move these update item grids a little out of the way for now because what we're going to need to add in is our uh boy counter and our cell counter and for both of those we need to assign un counter updated uh and that will make un counter updated event let's also call this specifically uh for boying and we'll do the same thing here assign on counter updated cell and that will create our events that run every single time we update those counters we've just made so every single time we're going to increment or decrement those values what we want to do is we want to recalculate a couple of values that we're going to be making on this blueprint and after those we still do want to update the item grids and such so do keep in mind you want to reconnect those up now for this we're going to make two variables uh the first one will be our boy price which is the price of the items we currently have selected multiplied by the amount of things that we're trying to buy uh so that will be a float naturally and we'll also make a corresponding value for the sell price which will be used for the exact same thing so whenever we update our boy counter we're going to update our boy price and the same thing for our sell counter and our sell price and now we just need to calculate those values and luckily that's actually uh remarkably easy so let's move this stuff a little bit out of the way and get our stuff uh set up so we have these components up here which is our chest inventory component we probably should rename this to shop inventory component uh because we're working with a shop now not just with a chest but we'll deal with this for now so let's get this uh out of here and we want to get the inventory array that we made on that component ages and ages and ages ago from that we want to get a copy of a certain index we can split the structure pin and we'll worry about all that in a moment the index that we're going to be getting will be our item grid for the chest and there we will have the get currently selected index which we set up in the last video where we made all of the uh stuff about selecting the slots in the inventory that will now give us access to whatever type of item we're trying to buy and our item class has a value on them that we set up for every single item so simply we can just multiply that value by the amount of things that we're trying to buy and we have the uh buy counter obviously and that has the counter value so we can simply hook that up into there and that will be our Buy price and our sell price is going to be honestly much of the same so what we'll do is we'll just copy this entire thing over and we need to only replace a couple of the compon components because instead of the chest inventory components of course this is going to be using the player inventory components it's going to be using the player item grid instead so we can delete the other one instead of the boy counter of course it's going to use the cell counter and just as easily as that we have both of these set up now that we have those we can actually make these little texts here display the corresponding values also I prefer setting the color for these to uh to Black because they're a little bit easier to read against the gray buttons we're going to come up here to the text content and we want to create a new binding and this is the binding for the cell so we just plug the sell price into the return value here it will create a two text node which we're actually going to set to uh maximum fractal digits uh zero meaning that we don't want to have any decimal points displaying here you can enable and disable grouping which is like the uh the comma or the dot depending on your region uh and we will of course do the same thing for the other as well so we'll create a new binding and just hook up the Buy price in much the same way which will set to no decimals as well and that sets up the price calculations uh for everything so now we just need to add two more events for when we update which item we are trying to buy so let's get the item grid for the chest and the item grid for the player and if you've seen the last video which if you haven't you're probably very confused right now as it is you'll notice that we I'll just show you actually in the item grid we made a new slot selected event dispatcher every time we select a new slot we call that one and we're going to be using that now so we can assign on new slot selected uh for the boy and we'll also do assign on new slot selected for the cell and of course we need to hook these up into the execution flow so let's do that real quick and then make sure to again also include the update item grid when we select a new item we want to set the max value of the counter corresponding to that inventory and if that counter was already higher than the value that was allowed we want to also clamp that to whatever the new maximum value is and then we also want to update uh the boy prices and stuff like that so that's actually remarkably easy we can start with the chest inventory component and once again just get the inventory out of that and we've seen this before we can get a copy and we want to get the chest item grid get the selected index and put that into this getting Noe in short uh it's the exact same thing that we did over here down to the fact that we're going to split the structure pin but instead of using the item asset which is what we did this for the last time what we actually after here is the stack size so however many items are in this stack is going to be setting the maximum amount of things for our boy counter so let's get the boy counter and we want to set the max and that Max will just be the stack size of whatever stack we just selected and then we also want to set the counter itself to whatever its current value is or the clamped Max so we'll do something very similar to what we did before and that is we want to uh get the counter and we want to try to clamp that one between zero and whatever this new maximum value is so just the stack size and that will be our new counter amount after we've done that we want to run update prices but we already wrote that function over here because that's what we do every single time we update the counter as well uh but we also can just run that as a normal event so we can just update the boy price and that will allow us now to select new items to boy we'll do the same thing with selling I'll go through this a little bit faster we'll just copy over the setup from the counter cell thing that we did and we'll simply copy these over as well hook this up to the new event that we made here which is on new selected event cell of course that's going to be the stack size going into the max the stack size going into the max of the clamp node the only big difference is that we need to swap out the counter boy of course for the counter cell we're dealing with the inventory that's going to be doing the selling and that's how easily we can duplicate uh that function we could make this just into like a function that we could use for both of these probably should I didn't and at the very end here we want to update the sell prices and with that we should now be able to select this thing in this inventory and use our counter to say Okay I want to buy five of them well we've set this thing up way in the beginning to have a value of two so it displays a value of 10 here now the only thing that we need to do and I will just show you real quick if I take items out of this chest as well uh the cell side of things works just the same way uh the only thing we need to do is to make the buy and sell buttons themselves actually work and for that we need to make sure that we uh select the right buttons I don't think I even gave those names so this will be the buy button and we'll also rename the cell button both of those are going to have onclicked events so the cell button and then we have the boy Button as well onclicked and for this we're going to make one single function that's just going to deal with all of this for us because there's quite a lot of node setup to copy over so for this one I'm actually going to make a separate function so let's come up here to the functions and uh we'll just call this boy cell and this is going to have a few values so let's get started by making them uh we want to have the inventory that is doing the buying which will be a inventory component reference we want to have the inventory that's doing the selling so we do the inventory to sell we want specifically a reference to the item grid that we're selling from not that we're buying from so uh that will be our grid to sell and that is going to be of type item grid of course so wbp item grid object reference then we want to have the corresponding counter for that grid so we can make a counter which of course will be of type wbp counter and then we also want to have the corresponding price so the amount of money that will be uh transacted and that will of course be a float so that's going to be all the inputs that this function is going to take there's quite a lot of them but that's the exact reason that I wanted to make this a function because otherwise it's going to be a lot of things all over the place it just doesn't look that the very first thing that we're going to do is adding in a branch because we're going to be checking whether or not uh the amount of things that we're trying to buy can we even afford it right so what's actually quite nice is that when you make a function in Blueprint all of these parameters are just accessible as if they were local variables already so we can say uh the price we can just get that without needing to actually get all of these little noodles all over the place which is just very very nice and in the same way we can get the inventory to buy because the thing that's trying to buy we want to uh get the amount of money in that inventory because we need to compare that to the price of what I were trying to buy and the price needs to be less than or equal to the amount of money that we have and if that is the case then we may progress if not uh you're trying to buy something you can't afford if we progress we're going to do a for loop with break this is very important because we want to be able to break out of it uh for reasons that I will talk about in a moment the first index we're going to set to one usually when you do a for Loop the first index almost always zero this is one of those rare cases that we're actually using this to count through something rather than using them as actual indexes so we're going to be using our first index one and the last index will be our counter and from that we're going to get our counter so the amount of things that we're trying to buy is how often we're going to be looping through this four Loop now in the loop body we want to get the inventory to buy again and on that we have a function already for ADD item and add item is simply going to Loop through the inventory and see if there's any spot in the inventory that can take in the specific item that we're trying to put in so is there any empty slots or is there any slots that I can merge into uh where a stack already exists that's not full and we're going to do that on each Loop so we're going to add these items one at a time to prevent people buying like 50 items in a slot that they can only have like another 10 items inside we don't want people to like overrule the amount of items that are allowed to stack on top of each other so we need to add them one at a time this function already has a output whether or not that succeeded so if it goes through the entire inventory and doesn't find a single open slot that it can put this specific item into uh it's going to return a false and if it does that that is where the break comes in for with the for each loop with break and I'll just add a couple rewriting notes to make this look a little bit more readable for you all now let's back up a little bit because we need to figure out what item are we trying to add and for that we use the grid to sell and from that we get the selected index using the inventory to cell we can then from that of course get our inventory array and use a getting node to figure out what item is in the currently selected slot in that inventory so let's split that open and that item asset can go into our item to add here so that is how we get that all working and let's put this into a slightly more visually pleasing configuration now back into this four each Loop uh if we can add the item if that was a success uh we want to subtract that item from the inventory that's doing the selling so we want to get the inventory to sell and on this actually going to need to make one last function uh on our inventory component so let's make that and that will be to subract specific item and it will just take in an index on Which slot to subtract just simply one from so we can add the input here for that uh and we'll just take in a index make an integer and this doesn't need to be particularly smart or anything because we're always going to just be subtracting from the own inventory so we don't need to make this compatible with multiple inventory interactions or whatever uh we're going to put in a branch to start with I don't know why I'm typing that out instead of just using B and click here we are because what we need to figure out is if subtracting one means that we just remove the rest of the stack we're going to need to set the entire stack to just be non-pop populated so that another item can take its place when the time comes uh if there is items left in the stack we just need to subtract one from it so let's get the inventory here and we want to of course uh get a copy use the index for the getter and we want to uh split the structure pin because we're going to pretty much be using all of the values in here first though we want to worry about the stack size we want to check the stack size minus one so we subtract one uh and we want to check whether or not that is greater than zero still if it is not greater than zero which means that if somehow somebody managed to buy our way into the stock being negative uh this also will just immediately fix that what we'll do is we will uh set the array elements so set array element at the corresponding index here so that will be the index that we put in for subtract item uh and then we're going to split the structure pin here as well and we'll use the inventory note that we have here and then we want to set has item to false item stack will be zero item asset will be nothing and the item index for this slot will still just be whatever index that we're working with however if this ends up being true we also want to set array element but we do need to do a slight bit more uh work so let's hook up the proper inventory array for this uh the index is still going to be actually we can just get that this way there we go as just a simple note to make things a little bit less messy so um we set the index we still have has item uh the item asset itself is going to be Whatever item asset came out of our getting node here from the array and the stack size will be whatever that stack size was minus one so out of the math node we're going to put that into the stack size here and then of course after either one we want to uh call on inventory changed because that's what we do at the end of all the functions in this component now we have a function where we can just say hey this index subtract one item and it will do the rest for us so going back into our shop here uh we're still in the Buy cell function uh we have the inventory to sell we can simply say subtract item and we need to pass in the index of Whatever item we're trying to subtract from luckily we already have an easy way to do that and that is just getting the grided to sell selected index so we can just copy that over and use that as the index for subtract item now after that item has been subtracted we need to remove the corresponding amount of gold from the items value from the buying inventory and add it to the selling inventory which is actually quite easy because we already have Whatever item we are trying to uh transact here through the item asset so we can simply get the value from that and then the inventory to buy is going to uh get the current amount of gold that they have or money I think I called it there we go and we're simply going to subtract the value from that item from it we don't need to multiply by anything because the way we're doing this with a loop we're moving through these iterating through them one at a time so we just need to every time we go through the loop body we need to remove the value of one item and then in the inventory to buy we also need to uh set the money then to the new value so we hook up that new value and we set it and then in the inventory to sell we just kind of do the reverse so we get the inventory to sell we have a note here for that already we set the money and that amount of money is going to be whatever money there already is so get money plus the value of set I now of course this can be a little bit more neatly organized which again I will do after the recording before I upload the finished project all of the blueprints will be more neatly organized so that if you're going through this as a YouTube member or a patreon uh you'll actually be able to read through what things do a little bit better and that is the entire full loop now we need to just do some stuff uh on the completion of this Loop and that's just kind of a quality of life thing uh because what we want to do is we want to uh get get the grid that is doing the selling so get grid to sell and from that we want to uh get the rep box and the target index so the uh selected index and what we're going to check here is after we've sold an item if that item slot is now empty we want to automatically deselect that item slot because otherwise we keep having that slot selected and it just looks a little bad honestly so we'll just uh from the reer box get child at the index that we just gotten and of course we will need to cast that to our widget blueprint item slot and that one we can connect up to the completed pin of the four Loop withd break so here we can simply check now if Whatever item slot that we're working with uh we get the inventory slot information out of that and if we split that open we simply check whether or not the stch size uh is still greater than zero because if it is greater than zero we don't really need to do anything but if it is not greater than zero we set select it to being false and we also of course get the image border at this point it probably would have been better to make a function on this thing to just set the image border to a certain thing instead of doing this getting of that specific component time After Time After Time again uh but that's something that you can do on your own time improving thecode and workability of things a little bit more than they are right now uh but we can set of course the brush from texture and the texture that we can set it to is the inventory slots realistically you could do something with like a enum that's just automatically updating the image uh much easier through a simple function rather than this roundabout way of doing things but for now this will work and that is the entire buying and selling function done now you can see why we didn't want to copy over all of these nodes and change only a couple of values around for both the buy and the cell version of this so we just make one function and whenever we run that we run it as byy cell and we just hook that up to both of the buttons and now just have to put in the corresponding values so when we click the all sell button the player is selling something so the inventory to buy is the shop and of course the inventory to sell is the player obviously the grid that is doing the selling is going to be the player item grid so that will be this one and the counter will be our selling counter the price that we're going to be working with will be the selling price as well and that's how easy we can set that up and for the other button we'll do the exact opposite so the inventory to buy is going to be the player because we're buying something uh which is getting sold from the shop so the grid is also going to be the shop one it's called a chest still um it's because I'm bad at naming the counter will be the boy counter and the price will be the Buy price and then after each one of these we just need to um run the UN selected new slot event for the corresponding thing so we want to do the boy one for the top one and then on new selected for selling we do the other way around that's entirely my bad so the selling function on the selling button of course and the buying function on the buying button quite as easy as that now one last thing that I have not added yet is uh the display of the money on either side of the screen I kind of forgot to add in the text for that but that's quite easy so we can just add in a text uh we can just put that on the canvas panel that's fine and you can put those anywhere you want on screen obviously as usual so let's put that on the bottom right side here align that somewhat decently honestly this is going to not align very well but making a well scalable UI is not exactly the main priority of what we're doing here so let's just get it to be good enough and we'll stick with that now the text block here I'm going to uh justification on from left to right and this one I'm going to do right to left actually just because it'll look a little bit nicer the preview text for both I'm going to just set at zero just looks a little bit nicer uh than having text Block in there and here we can just create a binding so this is the amount of money that the inventory component has so we can just simply say inventory component um so we can just simply create a binding for that get the player inventory component get the money I should point out that if your money is an integer you can just do this directly without having to make a binding I'll show you how with the next one so for the shop one uh you can just say hey just inventory components uh and it shows up with integers here to uh to display of course our money is not integer so we can't do that so we need to create a binding instead and do with this way it's honestly not that big a deal but it's good to note and also I do want to make sure that it doesn't display any decimal points let's set the default amount of money that an inventory component has when it spawns in like 500 5001 why not I made a typo but let's just pretend like that was entirely on purpose uh let's check out whether or not it displays so both of the inventories have 51 gold as I said they're horribly outlined uh don't worry about that for the time being and let's try to buy something so we can select this inventory slot and we can increase the amount of things that we're trying to buy we buy them and we can see that it adds them to our side of the screen and we want to buy seven again and you see it only has six items left in the slot here and now this maximum amount of items that we can select is six which is quite nice it did seem to deselect things there for a moment uh so something that might be worth looking into and as you can see it had a stock of 20 rocks but of course rocks we have set to only allow for stacking up to 10 so when it moves them to our inventory because it's doing it one at a time looking for the first inventory slot that it's allowed to be put inside it split them neatly into two stacks of 10 and I can of course sell them back to the shop for at the moment just the same amount of money that I paid for them in the first place of course you can easily set up something uh where you create a sell price function on the item itself which then also obviously impacts some of the parts that we're doing here because now you can't reuse the same function for both of these so that complicates things a little bit but I think you having followed along with all of this probably understand somewhat how to do that and the one little bug that we had before with the item becoming unselected is purely a visual thing I might add but it is still something that we probably want to so the little bug there where the item slot got deselected after buying something uh it's quite easy to fix it's because every single time we change the inventory visually on screen we regenerate the entire inventory so when we regenerate the entire inventory we need to go ahead and check for each slot whether or not it is the currently selected slot and if it is we need to generate it with the proper border around it so the way we do that is we in our item grid get the create item slot widget and we get the inventory slot information and at the very end here after ADD child to rep box uh let's split the structure pin we want to check whether or not the slot index is equal to the currently selected slot or index putting that into a branch note if it is we just want to uh set that to true and once again if we had a function made for this which we probably should have uh this would have been a lot easier but we can now simply just set select it to being true for that one and hook that up to our branching node and we can use this same strand here to uh get image for the border and set Brush by texture we've done this a million times by now so you probably can figure out how to set a brush from texture at this point and we'll use inventory slot number three and that should fix the visual bug with the inventory slot seemingly getting deselected you will note that the first slot in either inventory is now by default selected that's because we are setting the currently selected index to being active and the default value for that is set to zero obviously the zero with index is going to by default be set to active honestly I don't think this is that big of a deal we just need to make sure that this only happens with inventories that allow you to select slots so if we uh go into the inventory for the player now we see it also happens here but this is not supposed to allow uh selecting of slots so we'll fix that in a moment as well but we can now select a few items and buy them and only when the item slot Runs Out will it actually deselect the slot so that is quite nice so in this branching node we also want to check uh if allow select for the grid itself is uh enabled so we just make this into an end bullion instead uh that way it doesn't impact our normal inventory anymore but it does impact our shop inventory so now in the game if I open up my inventory you can see it no longer does it here but if I open up the shop it still does it there now the very last thing that you might want to do is if you are running into a issue and this is just fixing a couple of little bugs uh where this thing does seem to be selected at first but you can't increase the amount uh which you will see in a moment here if I buy this and I try to increase the amount on this side it's not letting me because it shows it to be selected but it actually isn't quite selected yet um and that might be a issue it's easy to fix just clicking on it I will make it actually selected and you can just buy and sell all you like but that can be a little bit annoying and of course you don't want that in your game so at the very end of our event construct we have our update item grids to that we're also simply going to add uh all of the events that we're binding to these uh event dispatchers here so that is update event boy update event cell update selected boy and update selected cell so if we just add those to the end here so updates boy update cell and then on new slot selected boy and new slot selected cell once you've added all of those to the end as well uh that BG now also should be fixed so we can open up this chest and immediately start buying things without having to double select things and just have it be a little bit messy and honestly if we're doing that uh coming down here to the boy and cell buttons uh what we can just do is at the very end of the function itself uh what we simply want to do is we can just update item grids so that way it just updates both of them anyway um just makes things a little bit more Compact and a little easier to deal with so now we can immediately start buying these things and then we can also immediately start selling them back without having to do weird double selecting stuff and all that uh we have a functioning shop now so again I'm going to clean up a lot of the blueprint uh for this and then it will be up for download for you guys it has been up for download since the first episode because I'm recording is way way way in advance I hope this has been helpful I hope you've learned a thing or two and I'm going to start working on the next big series after this so if you want to support that and get access of course to all of the project files uh you can down below subscribe to the patreon or become a YouTube member and get access to all that and support me at the same time and a very big thank you to all of my patreons you can see them on screen right now if you want to help out supporting the channel there's a link Down Below in the description to the patreon page and a special thanks to my cave Digger tier patreons Serge Thomas

Channel: The Game Dev Cave

Views: 1,169

Keywords: unreal inventory system, unreal inventory, inventory system, inventory course, inventory, items, unreal items, unreal course, unreal tutorial, inventory tutorial, inventory items, the gamedev cave

Id: CFSize4NKsA

Length: 236min 36sec (14196 seconds)

Published: Sat May 11 2024