Slot-Based Inventory System w/ Drag&Drop - Part 1 - Setting up ! [UE5 - BP]

hello and welcome to the start of the inventory system tutorial this series will probably span over multiple videos but we will try to get through it as quickly as possible the final result will be a slot-based inventory system with drag-and-drop capabilities as well as the basics surrounding it such as pickup actors item details etc in the first video we are simply going to be setting up some of the framework of the inventory itself and towards the end be able to populate the inventory widget with the slots from an inventory as you can see here right now if you learn anything from this video if you enjoy this video or if you hate the video please let me know in the comments below remember to subscribe if you want more videos and hit that like button if you enjoy the very first thing that we're going to start with is a hud so we are going to open here open our cartridge drawer it's like new folder we're going to call this one inventory and change the color to green on that in here we're going to make a new folder we're going to call this one interface open that up right click anywhere you want user interface i'm going to call this one wvp hud which is going to be our main main display let's go open it and dock it we're not going to do too much in there right now after that i'm going to select a new interface with the blueprint user interface i'm going to call this one wwp inventory open that up and dock and then i want to make another one i'm going to call this one wvp inventory slot so we got all of these now what i want to do is head back into your inventory folder and i'm going to make it a blueprint this is going to be a type actor and it's going to be vp inventory open that up and then open your control drawer again right click anywhere you want select blueprints select structure i'm going to call this one inventory slots inside your struct you want to add a new variable and we're going to call this one item and the next variable we're going to call it a quantity quantity being an integer we can't set the item yet so let's fix that right away in higher let's right click anywhere you want select a new blueprint class of type actor call this one master item the item in our inventory slot structure is going to be of type master item class now we can close out our inventory slots in our bp inventory we want to set a new variable of type integer name it max slots and also another one actually we're going to call this one inventory slots of type extract that we just made so inventory slots we're set both of these to editable and explosive spawn like so now what we're going to do is set this inventory response to an array sorry and then on begin play what we're going to do is resize this to fit our to fit our our mac size right just to delete this other ones on begin play resize and plug in your max slots like so what we're going to do next is head over to our first person character or your character in question uh initialize with a begin play and here we're going to spawn in our spawn actor from class our class being rbp inventory i'm going to show with my slots we're just going to put it to 7 for now something like that we also need a first person reference in our inventory so let's head back into rbp inventory and create a new variable called fbp ref or whatever you have i'm using first person so expose that and it's make that edible get back into your first person character refresh this blueprint fpp ref is ourselves what we're going to do out from here after i figure this out there we go go into our hud for a quick second create a inter graph create a new variable call this one inventory i'll type bp inventory make that ad pull and explosive as well in our character we are gonna create a new widget of type hud of the inventory ref is our bp inventory like so after that we're going to promote address promote to hard rest like so and then add to viewport let us go into widget blueprint for our inventory i'm not a designer so this is going to look horrible but we're going to try our best i'm going to add a size box the size box is going to be a override of 500 by 300 inside the size box we're going to add a border inside this border we're going to add a scroll box inside this scroll box we're going to add a slots panel a grid panel uniform grid panel we're going to call this grid panel panel and it's going to be variable what we're going to do is we're going to head into our graph for a second we're just going to delete all of these and then right click type in a new custom event we're going to call this one initialize when we initialize we're going to get our slots panel we're going to get all children now i'm gonna do something that might be a bit redundant i haven't really tested it but i'm also doing this sort of on the fly we're gonna get all children and then we're gonna remove from parent this is to double check because i'm also gonna be clearing children afterwards so i don't think i i think this is really redundant but just to make sure that everything is fine and and reset okay so we got our inventory now we need to get a hard drive in here so let's add a new variable call this one hud ref of type wbp underscore hot editable and exposing spawn head into our hud to set that and in here we need to add our inventory do we need a canvas funnel for that probably right the camera is fan of that and then let's add our inventory to that canvas panel click it size the content i'm just going to put it in the middle okay go into your graph again on your construct get your inventory and what you want to do is set hard drive in your inventory to ourselves after that it's done you want to get your inventory and you want to call in it the one that we just made we haven't set anything in it yet but we are going to call it back geometry inventory blueprint widget widget blueprint after we cleared everything what we're going to do is we're going to get our hard drive and then we're going to get our inventory wrap out from our inventory rep we're going to get slots i have from slot add a for each loop and then we want to create a new widget we haven't made that widget yet so just type in create widget and then let's leave it for there and head over to your content drawer in your interface now we actually do have our widget slot in our class select your slot our slot needs some intel as well until that we have not set up yet so head into your slot go into the graph go to add a new variable variable one being item of type master item add a new one called quantity type integer explosive and editable on spawn on both of these like so what we're also going to add is a hard drift i'll type uh wwp hud editable and explosion spawn is there anything else we need here we don't need our inventory because we can get that from our hud let's head over back into our hud and double click inventory in it when we are creating our slots we actually need to refresh this for a second we want to create the slot but first of all we need to get our hard drive get the a inventory ref and that's not how we don't get our hard drive put it in there and we need to figure out the quantity and we need to figure out the items so let's get our slots get a copy so for each of these loops we're going to get a copy of we're going to create a slot and then we're going to populate it with a copy at the index in question right we're going to put a plug in the index like so and we're going to break this pin and we're going to plug in our item and our quantity over there promote this after we have set our slot ref we want to add this slot to the grid and then we grab in our slots panel and we type add child to uniform grid the content is the slot so what we're going to do is we're going to type a get a divided by and what we're going to divide it by is the get the hard drive get the inventory out from the inventory we're going to get max max slot now we're going to actually make a new one in our inventory a new variable we're going to call this one max horizontal slots of type integer we can also expose that if you want so you can edit it on the fly later what we're going to do now though is put it to three so we've got seven total slots three in width head back into your inventory and then we're gonna get max horizontal slots we're gonna divide the array index by the max slots and that is going to be our role after that we are going to do a i'm going to right click here and type division call the remainder and then we're going to plug it in and it's going to convert it for you we're going to convert we're going to have the index at the top and then our horizontal slots at the bottom so we hit divide then we're going to get our remainder and we're going to truncate it into the column so we got that all set up if we click play now we're not going to see anything because we actually are we're going to see our inventory we might yeah so we got our inventory here we can't actually see the slots so let's head over to our slots in our designer let's add a size box i'm going to do 72 by 72 up here do anything you want really only 72 super 72 and then i'm going to do a border like so set the brush color to something a little bit different like that inside this border we're going to add a canvas panel inside this canvas panel we're going to add a image image it's going to be called item icon it's going to re resize that manually add a text into our canvas panel text is going to be called quantity text variable set the content text to x99 or something the color and opacity i'm just going to set it to like a dark gray and then add a shadow color alpha to one and let's just put it like like that that's that's going to be good enough for us we need to actually work with our disability settings so the quantity is going to be not here testable self and children icon is going to be not hit testable self and children canvas panel is going to be not high testible self only border is going to be not a testable self and children and then the size box is what we're going to use as visible if i click play now nothing is actually happening i'm stupid i'm stupid i'm so stupid head into your inventory unplug the remove from parent to declare children add from completed then we're gonna do a clear play and we got our slot i actually don't like how this looks i'm to add a couple more slots to this inventory so let's head over to our bp inventory i'm going to put max uh horizontal slots to like five we're gonna put inventory slots the max slots to like 15. there we go looks a little bit better so now we've got our slots out here what we're going to add quickly before we uh before we end this first part is a way to toggle this and to do that we're going to head into our first person character i'm just going to comment this out to be initialize and then i'm going to find a spot here and i'm going to do a keyboard e uh no keyboard tab sorry actually i'm going to keep it i but it i over here i'm going to do a get from the hud get the inventory get the visibility that's not the right one visible and then hold on b make a branch plug that in there now if it is visible you want to set this ability to false so hidden after that we're going to get our player controller set input mode game only and then set show mouse cursor to false if it is not visible we're going to make it visible so set visibility to visible and copy that down set input mode key and ui okay menu right and then set show mouse uh set show mouse cursor from our controller set show mouse cursor from here set that true head into your hud select your inventory and select that to set that to be hidden right so now we can toggle it and we can just go like that

Channel: Dragonsaur Studios

Views: 17,444

Keywords: unreal, ue5, tutorial, beginner, blueprint, 2022, foliage, runtime, inventory, dragdrop

Id: EM9AxcBHtqY

Length: 16min 4sec (964 seconds)

Published: Fri Aug 19 2022