Unreal Engine - Spatial Inventory Tutorial (1/4)

hey guys and welcome to another one of my tutorials so in this video i'll be showing you how to set up a spatially based inventory system like you see right here so before we go ahead and jump into it let me just kind of explain what it is and how exactly it will look when we're totally finished so if you don't know what a spatially based inventory system is it's basically like the system that they use inside of games like escape from tarkov and resident evil so you can drag items around inside of your inventory and you can place them wherever you want as long as they don't overlap with something else so if i try to drag this knife on top of this ak-47 you can see it shows red and if i drop it here it's going to default back to like the top left corner of the inventory you can also rotate items so if i take this and i press r it will rotate it so you can either have it horizontal or vertical and of course it knows if it doesn't fit so if i rotate this gun it doesn't fit at all anywhere and so if i try to drop it it will default back to the best location that i can find and it's also pretty smart about walking over items so you can see if i close it there's a grenade on the ground right here if i go over and walk over it it adds it to the top left corner but if there's something already there so let me put this knife up here and then i'm going to drop this grenade by just dragging it out here and then if i pick it up again you can see it now populates it into this tile right here because that's the next available one and likewise with these aks if i don't have any room and i walk over them it won't pick them up but if i make some room let's just do this and then i walk over one you can see now it picks it up but if i try to walk over another one it doesn't because there's no room so that's basically the way the inventory system functions um and yeah so you can also drop items like i was showing you before by dragging them out and then one other thing i kind of want to point out about this that's really neat is how easy it is to like manipulate and adjust the settings so once we have it all finished you'll basically be able to click on the inventory component which we're going to be creating and simply change the number of columns and rows over here on the details panel so right now i have it set to 6 by 15 but you know if you wanted to change it to like 10 by 4 you could easily do that and so now if we run it you can see it's now 10x4 and things will adjust accordingly the also or the other thing that's pretty cool about this is that it's in inside of a component so if you had like a crate in your game or like a store that you wanted to have this type of inventory system you can just add the inventory component to it and it would work and then the last thing i want to point out that's pretty cool is that you can very easily change the size of items so if i open up my grenade for example you can see when you construct an item you can just simply specify the dimensions so i'm gonna change it from one by one to two by two and then hit play and you'll see when i pick up grenades now they're now two by two instead of one by one so yeah that's pretty much all the functionality that's supported by what we're about to do so that being said let's go ahead and jump right into it so i'm gonna open up the epic game launcher because we're gonna be doing this totally from scratch and i'm on version 4.25.3 so i always recommend being on that one or newer just to avoid any potential issues and then we're going to select games and then hit next and we want to do the third person template and then hit next and then we want blueprints and we don't need any starter content so we just leave that and i'm just going to call this spatial inventory oops inventory and then go ahead and create the project now while this is loading i just want to say that this is probably going to be the longest tutorial that i've ever done because it's pretty i don't want to say complicated but there's a lot of little pieces to it and it is quite involved let's just put it that way so bear with me if it takes a while but you'll definitely learn a lot if you actually follow through it okay so the first thing we're going to do is create the inventory widget that shows up on the screen and get like the grid showing on the right and then after that we'll like start working on the items so let's come back here to the content folder and inside of here let's make a new folder and call it inventory so right click and make a new folder call it inventory and i'm just going to click this little button over here to show this section because i like it and then inside of here let's add the stuff we're going to need so we're going to add the classes and the widgets that we need we're going to add all of them real quick because i think it's a little bit easier to just have them and then once we have them all we'll go and we'll start filling them out so the first thing we need is the inventory widget itself so right click and go to user interfaces and we want to create a widget blueprint so select that guy and then we want to call it inventory components so our inventory widget oops that's not what i wanted to do inventory underscore widget and then the next thing we want is the inventory component so right click and go to blueprint class and create a new actor component make sure you select actor component and not actor and call it inventory component and then the next one we want is another widget so right click say user interface widget blueprint and we will call this the inventory red widget so this one's going to be specifically for the grid section of the inventory and then the next one we want is another widget so right click user interface widget blueprint and this is going to be for the item itself so we'll call this item underscore and widget the last um we need three more things so we need two structures just to kind of make um make things a little bit more organized so to create a structure you just right click go to blueprints and then go to structure and we will call this line and we're going to be using this structure to help us draw the lines that make up the grid so let's just open this up real quick and fill it out because it's going to be really simple uh why is it not come on open up there we go so inside of here we just want to create a start point and an end point so i'm going to change this guy to if you search for a vector 2d we want that and you don't know what a vector2d is it's just a basically a float with two values so it's an x and a y value and we will call this the start and then make one more new variable and call it end this is going to be the start point of our line and the end point of our line we can just save that and then we can close this and let's come back here the next thing we need is another structure for a tile so right click blueprints structure and call it tile and this is basically going to represent a specific tile inside of the grid so it needs to have an x and a y coordinate so open this guy up and then change this to integer and call it x and then make a new variable and call it y and make sure it's set to integer as well and then we can close that and then the very final thing we need here is a slate brush and i'll come back to why we actually need this probably towards the end when we actually use it but for now let's just go ahead and create it so we don't have to do it later so to do that we're going to right click and go to user interfaces and make a sleep brush and i'm just going to call it sp for slate brush underscore color and we actually don't need to change anything about this we just need it to exist so that we can use it um so yeah now we can save all and we can get started so these are everything we need for the inventory side of things so like i said the first thing we want to do here is create it so that when we press the i button for example it opens up our inventory so let's go into our project settings so you go to edit project settings and let's add a new input binding so come down here and select input and then up under action mappings we want to expand this and we want to add one so hit the little plus button and we're going to call it toggle inventory and we will set it to i and you can set it to whatever you want obviously but for my tutorial i'm going to set it to the i key so there we go and so now we need to hook it up inside of the player so that when the player presses this key the inventory will open so go to your player whatever your player is in your project i'm going to go to the third person character blueprint and open this guy up and so what we want to do is down here at the bottom we want to listen for that toggle event so if we right click and we search for toggle inventory it will show up with that event and we want to basically show the widget if it's not already shown or we want to hide the widget if it is being shown so before we can fill this out we need to actually create the widget and i'm going to do that inside of begin play so real quick we're going to come back up here we don't actually have a begin play yet so we're going to add one so i'm going to right click and say begin play and so what we want to do right here is we just want to create the widget so if we right click and say create widget and make sure you use create widget and not construct object i see a lot of people who follow my tutorials mess this up and they use construct object instead of create widget and then it doesn't work so make sure you use createwidget here and hook that up and so for the class we want to select our inventory widget make sure you select inventory widget and the owning player is going to be our player controller so we can say get self get controller and then we just want to cast this to a player controller so we'll say cast to player controller and then i'm going to right click and convert this to a purecast and that is going to be our owning player and then we want to take this and we want to promote it to a variable so if you right click right here on return value and say promote to variable it will create a variable for us and we want to call this the inventory component okay so now that we have the inventory component being created we can come back down here and like i said before we want to check if it's currently visible and if it is then we want to hide it and if it's not currently visible then we want to show it we basically want to flip the state of it so let's drag this guy in and we will say is in the port so this is going to return whether or not it's currently being shown and we will do a branch like this and so if it is currently being shown it's going to go to true and so in that case we want to remove it so we will say inventory component remove from parent which will remove it from the viewport and then we want to set the input mode back to game only because when we show it we're going to set the input mode to game and ui only so maybe we should do the false first so it makes more sense so if it's false then that means we want to show it so let's just do that first so drag this guy in and we'll say add to viewport and then the next thing we want to do is we want to set the game mode to ui and game or game and ui i think it's called so we can right click and say set input mode game and ui like so uh and this again wants the player controller so i think actually instead of doing that whole list of stuff i did before let's just go back up here to begin play and let's take all of this and right click and say collapse to function and we will just call this git player controller and then let's just come in here real quick so this looks fine but let's change it to be pure and const so we don't have to use the execution pins and then compile and save and i'm going to click on this guy and add it to a private category as well just because it's private and then also send it to private as well so it should look like this just private private checkbox for pure and check box for constant and that will make our lives a little bit easier so now we can come back here to the event graph and you can see it's cleaned up this code a good bit and we also want to do the same thing down here so we can just say get player controller and plug that into the player controller the widget we want to focus is going to be our inventory component so drag that in oh wait this shouldn't be called inventory component sorry this should be called inventory widget i don't know why i named it component so rename this to inventory widget sorry all right so the widget we want to show is our inventory widget so let's hook that up you can set this mouse locking to be whatever you want this is just how the mouse behaves and then we want to uncheck hide cursor during capture because we don't want the cursor to be hidden and then next we want to do is we want to drag in our get player controller again and then drag off of this and say set mouse cursor or set show mouse cursor rather and we want to set this to be true so make sure you select true so that way the mouse shows whenever we are inside of the inventory so there we go so that's what we need to do to show it we just add it to the viewport set the game mode to ui only or set the input mode to game and ui and then we show the mouse cursor so when we're hiding it we basically need to do the opposite of that so the opposite of that is we remove it and then we need to set the game mode back to game only so we can drag in our player controller and we can say set input mode game only and then finally we want to show mouse cursor and set it to false so i'm just going to copy this paste and say false okay so now this code should be working but we can't really test it yet because the inventory widget doesn't have anything inside of it so we won't be able to see it so let's go back to our inventory widget so come back to the main content folder and then inside of inventory we want to open up the inventory widget so open this guy up and let me open up on my other screen as well just so i can reference it here all right so this screen is basically going to be um the widget that covers the entire screen so if you noticed from my other video that i showed at the beginning it kind of darkened the screen it blurted out a little bit and then on the right side it had the inventory so that's what the responsible the responsibility of this widget is is to show like the whole background and blur it out and then to show this little grid over here so to do that we need to add a background border to the whole thing so up here at the top left search for border and we want to drag this guy in and then i'm going to rename this so i'm just going to hit f2 and call it the background border just so we know what it is and then we want to set the anchor point to be expanded and then we want to zero out the offset right and the offset bottom so that it actually covers the whole screen then after that we want to come down here and we want to find the brush color and we want to change this to some dark color so let's click on this and i'm going to set it to 0 0 zero for just totally black and then give it an opacity of like 0.2 so that it just has a kind of a dark tint to it and then i think also i added a blur so let's just search for blur and drag that guy onto the background border and then if you select the background blur itself you can find the blur strength and set it to whatever you want i think i set it to two so now you can kind of see that it's blurring out the background which looks nice obviously you don't need this just just to make it look nicer i think and then the main thing we want to add here is of course the grid on the right so the grid on the right is contained or it's going to be contained inside of the inventory um grid widget so all we're going to do is we're going to come up here and say inventory grid widget and we want to add that and make sure you add it to the canvas panel so drag it on top of the canvas panel and you can see by default it adds it kind of up here at the top left so what we want to do is we want to change the anchor point to be on the right side of the screen so we want to select this one and then we want to zero out the position x and the position y and then i'm going to set the size to be like 100 by 500 but i just want to point out real quick that whatever size you put here doesn't matter because we're going to be overwriting it later but just you can kind of visualize what's going on i'm going to set it to 100 by 500 so we can kind of see it for right now and then the alignment we need to set to um actually one on the x and then 0.5 on the y so that way it's centered and then maybe let's actually add or subtract so let's do negative 50 for the position x so it kind of bumps it off from hugging the right side of the screen so you can kind of see what's what's going on here we want to select size to content as well and you can see when we do that it hides it and that's because the actual size of this inventory grid widget is like zero zero because we haven't created it yet but again once we create it it will look correct so for right now we just need to select this make sure it looks like this and then select it and it will show up later once we actually go and we fill out that widget but it's fine that it doesn't show it um okay so i think that's everything we need to do on this tab at least so let's come over here next to our uh inventory grid widget so if we select the inventory edit inventory grid widget at the top right here you need to have this guy selected in order to see this so select this guy and it will open up the inventory grid widget so this is the one like i was saying before that's going to be responsible for drawing the actual grid itself so we need to fill this out so just like we did before let's add a border to start with so drag in a border on top of the canvas panel and then we want to select this border and we want to actually we want to make this a variable so we can reference it so select is variable and then let's rename it to something more meaningful let's call it the grid border and we want to set the anchor point to be in the center of the screen and then we want to set the position to 0 0 and the size we can set to like 150 by 600 again this size will be overwritten later in code actually so it doesn't really matter what you put here but it's good to have something here just you can kind of visualize what's going on and we want to set the alignment to 0.5 and 0.5 0.5 so that way it's centered we do not want to select sized content here we'll be doing it a different way for this one so we can just leave that unchecked and then finally we want to set the color of it so let's see if we come down here to brush color oh actually we want to set the padding to zero so if you just select all this and say zero it will set it all to zero because we don't want any padding and then for the brush color if we select this guy we want to set it to like 0 0 0 and 0.25 just so it's kind of has a dark tint to it as well obviously you can adjust these values to make it look how you want but i recommend just doing the ones i do for right now until you're totally done and then you can adjust it at the end okay and then finally the last thing we need inside of here is another canvas panel so let's go up here and say canvas panel and we want to drag that on top of the grid border just like so and then i don't think there's anything we need to do here i'm just double checking my other project oh there is one thing we need to make it a variable so select is variable and we want to call it the grid canvas panel just so it has something more meaningful for a name and then i think that might be it i'm just double checking my other project real quick yeah okay i think we might i think that's it for right now for this guy and so inside of here we basically want to um in the graph tab we basically want to draw a grid depending on the size of our um inventory and if you come back here to the inventory widget now you can see this now has a size to it because it's using this widget so it's basically taking this widget and it's drawing it on this screen so whatever we do inside of here will show up right here okay so let's start drawing our grid which is actually the first thing we need to do so let's go to the graph tab all right okay so let's start with the initialize function so let's come over here to the left and add a function and call it initialize and so for this function we need to take in the inventory component that it's representing so make a new parameter change the type to the inventory component and then change the name of it to the inventory component and then we also wanted to take in the tile size so new parameter make it a float and call it tile size this is one thing i probably should have showed at the beginning but let me just run my other project real quick so you can see that the tiles have a specific size to them i think they're 50 by 50 right now but it's set up so that you can very easily change that so let me just drag over my other project for one second so if you were to open up your third-person character once we get it all done and then you can see it's setting it to 50. we could usually change it to like 100 for example and then run it and you can see there'd be 100 by 100 and all the items would update accordingly to be the correct size so it's very easy to change the tile size as well i kind of forgot to mention that but i just wanted to point that out so that's what that variable is it's the size of each tile um back to where it was okay so we want to take this variable and we want to save it so right click promote variable and we will call this the inventory component and it's very important a lot of people don't do this but it's very important to keep your variables organized and set up correctly so we're we are going to do that in this tutorial um so we want to set this guy to private so that nobody else can access it and then we want to add it to well it's okay it's already in the components category i guess that's fine but we want to set it to private and we want to do the same thing for tile size so right click promote the variable and then i'm just going to drag this around so it's a little neater and then we want to make this one private as well so click this guy first of all rename it to tile size and we want to set it to private and we want to add it to a private category as well just like so okay so now we have the inventory component and the tile size saved the next thing we need to do is to set the actual size of our widget to be the correct size because obviously if they pass in a larger tile size we're going to need to be much larger if they pass the smaller one we're going to be smaller but we also want to change our size depending on how many rows and columns there are inside of the inventory component so before we can finish writing this we need to go back to our inventory inventory component and add a rows and columns variable so let's go to our inventory component open this guy up and let me open it up on my other screen too just so i don't mess anything up okay so over here on the left we want to add a variable and call it columns and we want to set this to be an integer so this is basically how many columns there are and we want to select the variable and then we want to set it to instance editable so we can edit it per instance of the inventory system we want to set it to blueprint read only so that way it is constant and then we want to set it to expose on spawn as well so that way if we were to spawn one of these through blueprints we'd be able to edit that variable and then we also want to add it to a constants category since it's constant so add it to a constant category and we want to do the same thing for rows so we can just duplicate this and call it rows and it will copy over all the settings for us which is pretty nice and so that's really all we need to do for right now we can come back and set these up later but we just need these variables to exist so let's come back over here to our inventory grid widget and we want to do a little bit of math to figure out the size of our our grid so essentially the size of our grid needs to be set um inside inside of our grid border so if we drag in our grid border we can say slot to or slot as canvas slot and this will allow us to change the size of it and we want to say set size and so whatever size we pass here is going to be the size of the order so i'm going to go ahead and right click and split this guy up into an x and y so the x is going to be the number of columns times the tile size so we can drag in our inventory component and say git columns and then we want to multiply this by the tile size so we'll say float times and pass in our tile size and that's going to be our x we want to do the same thing for the y except using rows so i'm just going to copy all of this paste and then i'm going to drag in or delete the columns rather and say rows instead and hook that up and and hook that up okay so now we have the correct size the next thing we need to do is create the line so i'm going to make a little function for this because it's going to be a good amount of stuff so i'm going to over here on the left create a function and call it create line segments and we actually want to add this to a private category as well so we'll say private and put it inside of the private category and again i'm just doing this to stay organized because nobody else needs access to this function and so inside of here we're going to be doing the magic to create the lines so we're not actually create the lines but at least figure out the math for where the lines need to go we'll be drawing them in a slightly different spot so we want to do we want to separate this into two sections we want to separate into the vertical lines and the horizontal lines so i'm going to add a sequence node so you can do that by holding down the s on your keyboard and then left clicking and we'll create a sequence you can also create one by right clicking and searching for sequence like so and so we want to basically loop over the number of columns and add a vertical line per column so drag in our inventory component again and we will say get columns and we want to do a for loop so right click and say for loop and make sure you select for loop and not for each loop so we want for loop and we're going to hook that up to the bin organize this a little bit better and so the columns is going to go into the last index so we're basically going from 0 to the number of columns and for each one of these we want to draw a line that goes from the top to the bottom of the inventory so we want to take the index which is the current value of the for loop and multiply it by the tile size so float times the tile size and that's how far it needs to move over and i'm just going to make this a local variable so right click promote to local variable and we will call it the x and then in parenthesis local just to signify it's a local variable and then we'll hook that up so this is where it needs to start on the x um and so we basically want to make a line that starts here and then goes down and ends at the bottom of the grid so in order to do this we need to keep track of all of our lines and we need a variable to do that so over here on the left let's add a variable and we will call it lines and for the type we want to use our line structure so if you search for line you should see the line structure that we created earlier and we want this to obviously be private so that nobody else can access it and then i'm going to drag it into the private category like so okay so we want to drag this guy in and we want to say oh wait we need to change it to an array first so select this guy and change it to an array because this is a this is a list or an array of all of our lines so we want to drag this guy in and say add and then we can hook this up so our line is going to consist of two points so we're going to say make line and that will allow us to specify both of the points the start and the end and then i'm going to go ahead and split these guys up so split and split so for the starting location on the x it's going to be our local x so i'm just going to drag in this local variable like so i guess i can't do that drag it in here say git hook it up the start y is just going to be 0 the end is going to be also this value so we can drag that in as well and then for the end y it needs to be the bottom of the grid so we need to use the number of rows times the tile size so let's just drag our inventory or sorry copy this guy copy paste and say git rows and then we're going to multiply this by the tile size so we'll say float times and then pass in the tile size so that will be the bottom of our grid for the y and so this is now our line so we can hook that up to this guy so just organize this a little bit okay so these are our vertical lines that are getting created so i'm just gonna highlight this press c to add a comment and say create vertical lines and we want to do pretty much the same thing except for the horizontal lines so down here i guess we can just copy this just be careful that you follow along exactly as i do so you don't mess anything up but we're going to copy and paste this and then modify it so copy and paste that and then hook it up to the then 1 node except we want to change it so instead of columns here we want to delete this and we want to use rows because this time we're doing the horizontal lines and then hook that up to the last index and then we want to change this to be local y so i'm going to actually delete this and then right click and say promote to local variable and then hook this up again and then this new one i'm going to call y or y local like so and then we want to replace actually let's just delete these and so for the x we want to leave it at zero and then for the y we want to use our local y and for the end we also want to use our local y so let's plug in local y but for the end x we want to use this guy except we want to change columns to rows this time so change this to columns like so and hook that up to the x something like this is what we want so make sure it matches you have y going into here you have this section going into here and then y going into here as well and then we add it to our lines which is good okay and so let's add a little comment around this and we will call it create horizontal lines like so all right so as you can see here just kind of recap um all we're really doing is we're creating all of our vertical lines and we're adding them to this array of lines so we're not actually drawing the lines we're just creating the lines like the data for the lines and so we need to actually draw these lines in order to do that in order to draw a line on the hud we need to use the paint um i think it's called paint the paint event so if we come over here on the left and we search under overrides for the on paint event we want to add this one and the reason we're doing this is because the on paint event is going to let us draw lines just like straight up lines on our graph or on our hud which is what we want so inside of here we're going to make use of that lines array that we just created so in order to do this we're going to break it down into two sections so let's add a sequence node and hook this up so the first thing we want to do here is we want to draw the grid itself and then actually that's pretty much the only thing we're going to do right now we're going to come back and do the other section later i just looked at it on my other screen but so yeah so really the only thing we want to do right now is actually draw the lines so it's going to be pretty straightforward we want to drag in these lines that we created earlier and we want to loop over them so we'll say for each loop and so for each line we want to eventually call this function called draw line so if you search for draw line it will pop up and it's asking you for a context and the context is actually passed in here so we can just drag this drag off of this and say context and it will show up and so all we need to do is pass it pass in the position a and position b and a color so um so essentially we want to just use the values that are inside of the lines array as position a and b so this is the start in the end but we need to add to it the top left corner of the border because it needs to be inside of that border so if we drag in our border we can say get cached geometry which will get us the actual geometry of the thing and we can use this handy function called get top left which will give us the top left corner we basically want to add this to each one of these um lines so if we right click this array element we can split it and now that will split it apart into the start and the end and so we want to say start and we want to say vector2d plus vector2d and we want to add the top left like so and then i'm just going to copy and paste this node because we want to do the same thing for the end so take that and add this as well and so this is going to go into our position a and this is going to go into our position b and then you can set the tent to be basically whatever you want so this is going to be the color of your lines inside of your grid so i think i used 0.5 0.5 0.5 and 0.5 so it's like a semi-transparent gray color and then we don't want to change any of this well i mean you can if you want you can change the thickness or you can turn off antioxidant i think these settings are probably pretty good though and so yeah that's basically all we want to do um again we'll come back to this function later and fill out the second part but for right now what we're gonna do is just kind of set things up so let's move this return node over here and move all of this oops did not want to go inside of there move all of this over oops messing up move all this over here a little bit and so we're essentially going to be doing one more thing here so i'm just going to set this up and we'll fold out later so i'm going to add our little reroute node and then we'll add a little comment comment box here and so the thing that we're going to be doing later in the tutorial at this section is draw the drop location so this is going to be the drop location of where we are currently holding an item and again we'll do this later and then the third thing we want to do is the actual return so hook up the return to the then too okay so this kind of sets us up for later but we don't need to do that right now because it's not needed all right and so now i think we need to actually come back here to our initialize function and make sure that this is getting called uh let me see my other project yes okay so after set size we want to call our create line segments and hook that up and then now that we have this set up we need to actually um let me look my other code to figure out what we should do next um create item widget i think this is all we need to do for right now in order to get this to work um so let's actually go ahead and run this and see what it shows so if we press play at the top and we press i you see it shows our it shows our inventory but it doesn't show the grid i think that's because we forgot to set the actual rows and columns so let's come back here to our third person character and up here at the top where we create the inventory widget if we just right click and refresh this oh maybe it didn't maybe we didn't set this up quickly let's go back to our inventory widget and go back to our graph um oh we need to set this up to take in our inventory component so over here on the left we need to add a variable and we will call this our inventory component we want to change the type of it to be inventory component like so and for this guy we want to set this to expose on spawn and edit instable and so that way like i was trying to do before when we create the inventory widget we can specify this value as well and we can also set this to blueprint read only and private and then we want to add one more for the tile size as well so add another one and make it a float and we will call it the tile size and we want to go ahead and check those check boxes as well check all those and then inside of the initialize we want to initialize our grid widget so if we just delete all this because we don't need it we can right click and say event on initialize and we want to call our inventory grid widget so drag this guy in we want to call his initialize function that we just wrote and you can see it takes in the inventory component and the tile size which we have so drag in the inventory components not that one inventory component and the tile size which the tile size should be inside of this constants category as well so i'm going to drag that up there and this actually won't work because there's like a little i don't know if it's a bug but the way the engine behaves is when the initialize function gets called the values that are passed in and the exposed on spawn variables don't actually get set until the next frame so in order to account for that we're going to add a delay of zero and a delay is zero basically just delays it into the very next frame which is what we need here it's kind of like a little trick you can use but that's basically what we want to do and so now back here in our first person character if we refresh this now we should see our variables that we created to be exposed on spawn and we can pass in our inventory component which oh we haven't even added that to our player yet so add component and we want to add the inventory component so just like that sorry if i'm kind of stumbling through this it's obviously like there's a lot of moving pieces and it's hard to like do this in a good way that isn't confusing but trying my best to explain everything here okay so we added our inventory component and you can see we need to specify our columns and our rows so i think i used six by 15 in my example but obviously you can set that to whatever you want and so we just want to drag in our inventory component and hook it up there and then the tile size again you can set to whatever you want i think i used 50. so now let's go ahead and run this and see if this shows up so you press play we press i and you can see there we go we have our grid showing up and it is indeed 6 by 15 and just to kind of test it let's change this to like 25 and then run it you can see now they are half the size and if we adjust the columns so maybe let's make it 15x6 instead run it and there we go so it seems like everything is working pretty well we can change the size of the tiles we can change the number of rows and the columns and the inventory component is showing up on the screen now you'll notice one thing is that you can click the mouse and you can kind of move around the screen we will be fixing that in the next part of this tutorial because obviously we don't want to be able to look around like this we want to be able to click things but again we'll be doing that in the next part of tutorial just for right now just make sure that it's working the same as it's working in my video and then i'm going to go ahead and set this back to 50 and then set it back to 6x15 and then at this point i'm going to end part 1 and we're going to start part 2. so i'll see you guys in part 2.

Channel: Reids Channel

Views: 73,621

Keywords: Unreal Engine, Unreal Engine 4, Unreal, Unreal Engine 5, UE4, UE5, Tutorial, How To, Blueprints, Reids Channel, Reid's Channel, Spatial Inventory, Space Inventory, Resident Evil Inventory, Escape From Tarkov Inventory, RE inventory, RE, Resident Evil, Escape From Tarkov, Inventory, Grid Inventory

Id: 4CjpBoKl6s8

Length: 43min 39sec (2619 seconds)

Published: Tue Nov 17 2020