UE5 Tutorial - Drag and Drop Inventory (Part 1)

[Music] hi welcome to this unreal engine 5 tutorial in this video series we are going to create a drag and drop inventory in this video we will create a grid panel that shows our inventory tiles let's get started first we are going to create a new folder for all our inventory files let's rename it to inventory and inside the inventory folder we are going to create another folder called images i've already got two images ready to be used in my inventory you could use any square image for either the tile widget or the inventory widget you can search the unreal engine store just google to find a great selection and pick one you like let's go back to the inventory file let's create a new structure which can be found under blueprint and rename it to st underscore inventory open the new structure and let's set up the variables the first one is name in the form of a text we need an image which is a texture 2d the third one is the quantity this will be a integer and the last one is max stack which is a integer as well let's save and close we need a place to store our inventory data i'm going to create a new extra component for that i'm renaming it to comp underscore inventory and inside the component we're gonna add a new variable rename it to inventory and it will be our st underscore inventory structure in the form of an array to actually test our inventory we're gonna add a for loop which will run 16 times the last index will be 15. we're going to get our inventory array drag to the right and search for add connect all the nodes now we can compile and save and close our component the next thing we will need is a widget we're going to rename it to w underscore inventory and we're going to need another widget and this one will be called w underscore inventory underscore tile let's open the tile widget first we will add all the components we need to create our tile let's add an overlay add a size box and change the width and height to 150 we're going to add a border select the border and we're going to set our image to our tile image let's add an overlay set the padding to 10 and let's add another border we're going to set the alignment to fill i'm going to rename it to image check the is variable box now let's add a vertical box change the padding of the vertical box to zero and we're going to add a text to our vertical box rename it to text underscore name check the is variable box hit fill centered we're gonna line it to the top change the size to 14 and set an outline of one we're going to add another text to our vertical box change the name to text underscore quantity check the is variable box hit fill alignment will be the right and the bottom the size will be 14 and we're gonna add a outline of one let's compile and save and go to the graph we're going to need two variables here the first one is called inventory which will be our sd underscore inventory structure and make sure the instance editable and exposing spawn is checked we're going to add another variable and this one will be called index it will be a integer and make sure it is editable and exposed and spawn we are going to add a function which is called set style and from the event construct we are going to run our set tile function let's go back to the function we are going to add a branch get our inventory right click split from the quantity hit is and connect it to the branch we're gonna get our text name search for set text connect it to the true output we're gonna get our image and search for set brush color we're gonna set the alpha to zero we're gonna get our text quantity search for set text we're going to copy and paste our first set text node and connect it to the false output now from name drag to in text we're gonna get our image i'm gonna search for a set brush from texture connect the texture to our image we're going to copy and paste our text quantity node and from the in text we're going to connect it to our quantity and we can compile save let's open our inventory widget the first thing we will need is a canvas panel we're going to need a size box we're going to align it to the center so anchor will be centered the alignment will be 0.5 and 0.5 positions will be 0 and make sure size of content is yes our width and height will be 750 we're going to add a border to our size box and this will be our inventory image we're going to add an overlay make sure the padding is around five and we are gonna add a grid panel make sure the grid panel is centered we're going to remove the underscore 71 and make sure the is variable is checked compile and save and let's go to the graph you can delete the pre-construct and the tick we won't need them we're going to add a variable which is called inventory and this will be our sd underscore inventory structure in the form of an array from the event construct note drag to the right and search for cast to bp underscored third person character we're gonna get our player character we're gonna get component by class choose the top one we're gonna select our inventory component and right click on the return value and promote to variable we're going to rename it to inventory ref let's connect these two nodes we're going to create a function we're going to name our function set grid we're going to connect it to the inventory ref and let's open our set grid function get our inventory ref drag to the right type in get inventory drag our inventory hit set and connect these two nodes we're going to get our grid panel and search for clear children we're going to get our inventory array i'm going to do a for each loop right click the array index promote to local variable and rename it to index search for create widget and this will be our tile widget we're going to connect the index to the index and our inventory to the array element we're going to get our grid panel add child to grid the content will be the return valuable vari return value of the widget node we're gonna get our index divide divide by four and connect it to the row we're going to copy and paste our index and we need the percentage and that will be four as well this means our inventory will have uh rows of four if you want to make them bigger or smaller and you can go to three or whatever you want that's compile and save now everything in our widgets is done what we're going to do now is add our component to our character blueprint so searcher third person character blueprint hit add search for our inventory component and edit compile and save to actually test our our inventory we are going to open our component and from the complete node we are going to search for create widget search for the inventory widget and add to viewport let's compile and save and let's start the game now this is our our inventory everything works perfectly if you want the padding between each style a little bit bigger you can open your tile go to the first border and just change the padding to 5 or 10. now you can see the padding between each towel is much bigger that's all for part one thank you for watching it would mean a lot to me if you would like this video and subscribe to my channel and i will see you next time for part two [Music]

Channel: SoftStoneGames

Views: 14,611

Keywords: ue4, ue5, unreal, unreal engine, unreal engine 4, unreal engine 5, ue4 how to, ue5 how to, ue4 tutorial, ue5 turorial, unreal engine tutorial, unreal engine how to, unreal engine 4 tutorial, unreal engine 4 how to, how to, tutorial, beginners, beginner, ue4 beginner, unreal engine beginner, blueprint, ue5 tutorial, ue5 beginner, unreal engine 5 tutorial, Inventory, UE4 Inventory, UE5 Inventory, Drag and Drop, Drag Drop, Drag, Drop, Drag & Drop, Drag and drop inventory, Inv

Id: A8nSGK0mXBM

Length: 14min 53sec (893 seconds)

Published: Tue Jun 14 2022