How to Create a INVENTORY in Godot 4 (step by step)

hello so inventories are really important to any game and you have to make sure that you have a really great inventory system but today I wanted to go over a really good way to create a extremely wellworking inventory system just like you see on screen now we have apples and sticks that are able to be collected around the map and then get added to the player's inventory I wanted to teach you how to create this inventory system step by step but before we get started if you could please subscribe to the channel to help you Tobe push this video to more aspiring game developers then it would mean the world if you have any questions or you need help on anything within this video then let me know in the comments down below but let's get started so let's get started with creating the inventory also I forgot to mention that this video is technically episode 4 of the Survival series but even if you're not following this series and this video will still teach you how to create an excellent inventory for your game now we're going to first start by creating two different scripts that are going to extend resources one for our inventory items and then one for our inventory script so to do this we'll go up to our script and we'll click on the little file button up here create a brand new script and then we can name the first one our inventory item. GD and we want this to inherit a resource and not a node so we can just make it inherit a resource just like so and then we can click create to create the brand new script and this script is going to be for our inventory items so we'll set the class name to be inventory item and then we will have two export variables whatever the variables that our item will need so it's going to need a name and it's going to need a texture so we'll say export for name is going to be equal to to a string and the string for now is going to be equal to nothing and we'll have another export VAR which is going to be the texture of the item and that's going to be equal to a texture 2D right so that is our inventory script and to make this into a resource or first I want to go down to our file system create a new folder and I want to create this as an invent inventory folder and the reason this is going to be an inventory folder is because I want to keep everything organized so we'll throw in our little inventory item. GD script into here and then I want to create our inventory items so for this video I'm going to be going over an Apple so if we go into our inspector over here we click this little plus button it's going to open up a tab to create a new resource if we type in the resource or the script that we just made that extends the resource inventory item the class name it's going to come up inventory item and then if we click create you're going to see we have a name and a texture and we can implement these so for the name it's going to be an apple and for the texture we can load in our Apple's icon texture whatever we want to show in the inventory so we click on the Apple we can click on this little save button save and then we'll save this into our inventory folder but I also want to make a new folder and I want to call this folder items and we'll store all of our inventory items within this folder and then we can rename this uh resource to apple. Tes because this is our Apple icon and our Apple resource so now in our items we have a little apple resource here and that is how you create a resource but I want to go and create a new script and this script is going to be called just inventory. GD because this is going to be the main script for our inventory and this is also going to extend a resource and I'll explain why this extends a resource here in just a minute but we'll have a class name and the class name for this will be inventory and the export VAR on this one is just going to be what we have stored in our inventory for now so bar items and then what items are going to be in the inventory which is we have to store that in an array and what do we want to store in the array well we want to store inventory items in the array so inventory items is the class name for our inventory item. GD so we want to store this so that means we'll be able to store apples in the array but that's all we'll be able to store so far is just Apples because that's the only inventory item resource that we have created and the reason our inventory. GD is going to extend a resource is because we are going to connect this script to any inventory that we have so it could be an NPC's inventory the player's inventory a chest inventory and how do we add this to our player or make it into a player's inventory well we're going to have to create a new resource for that right so we can go up here to the inspector click on this little plus button and then instead of inventory item we're going to look up just inventory and you can see our inventory. GD comes up we can click create and then it's going to pop up over here and if we click on this little array here it's going to open up and it's going to allow us to make a size so for this size is we're going to insert how many slots we want our players inventory to have for this video I'm going to go with 12 and you're going to see that it adds 12 slots to our inventory and then if we go and grab some apples we can drag in apples to random slots within the inventory just like this and you're going to see that we have an apple here an apple here and an apple here but how do we save this well how do we actually add this to the player well if we go up here to the top we click save save it and then we can I want to save it into the main inventory folder and then we can just name this the players inventory. TR and we can save it but this is every single slot so this is slot one of the inventory slot two of the inventory slot three of the inventory and slot three of the inventory has an apple slot uh this is going to be slot seven down here so this is going to have an apple and Slot eight is also going to have an apple so that is going to work correctly we just have to add the visuals and we have to connect this to the player so to connect it to our player well we can go to our player script and then we can go up here towards the top and we can make a exported variable and this exported variable is just going to be our inventory so it's going to be a VAR inventory and we can just make this equal an inventory or that class name and then if we go to our 2D scene we can go to our main K our character body 2D and you're going to see our little exported variable if we grab our players's inventory and we drag it into that variable and we click on it you can see that this is our inventory we have three apples stored within the inventory so that is going to have all the slots and now it's connected to our player but now we have to have visuals for the inventory because this is the inventory but we can't really show it and appear it on the screen so how are we going to do that well if we go up to the top we can create a new scene and we're going to use another node and we're going to use a control node because this is going to be the UI and we can rename this control node to our inventory UI because that is what it is and then for now I'm going to throw in a color wct as a child just for testing so we can test the opening and closing of it and then we can go back to our inventory we can click on a new script and we can add the inventory. UI and I want to add this to our inventory folder as well so we can create this and our inventory GD script down here I'm going to also add to our inventory and for this little control node script here we're just going to have it extended control and then we're going to have a variable to check if it is open or Clos and when we start we want it to be closed we are contrl s i just contrl s it and we save the scene and we saved it into the inventory folder so make sure you do that but then we're going to have a function at the very very beginning of the game to make sure the inventory is closed so on the ready function we're going to close the inventory now this is no function but if we come down here we can make the function close and in the function close we're just going to change the visibility and we're going to say is open is false so we'll say visibility or visible is going to equal false and then we're going to say is open is going to equal true and then we're also going to need another function and this function is going to be our open function this function we're going to say visible is going to equal true and is open is going to equal false wait wait it's going to equal true what what I don't know what I'm saying but it's going to equal true because if we open it then the inventory is going to be open right and then we're going to create a process function so we can grab input and we can just say function uh process and then we can say if input. is action just press whatever button we want we're going to use I so we're going to have to go up into the settings and make this a input and then we're going to say basically is or if is open so if it's true then we want to close then else we want to open the inventory right so if we go up to the project project settings we go to our input map we can create a new action we're going to say I we're going to add this and this is going to be the I key and that's the key that we're going to use for the inventory now if we go into our player and we go to the 2D scene and we add this inventory scene to the player you can see that it's going to show and if we join the world and we play it's visible off start we click I and it's not turning visible and why is that well we can go and see exactly why that is okay so this is my fault down here at the uh close function you can see that we have is open equals true so basically we're never showing the uh UI so if we change this to false that means when we close it well it's going to equal false and that means we are going to change it and or that means we're going to uh Change is open because if it's always equal to true then we're always going to be closing the function right we're never going to be going to the open so it's always going to be playing the visible is false and I added this print stab just to make sure everything was working but I will remove that and now if we go to our world or if we go to our player and we instance the UI so basically all I did was go up here click on the player click on this little chain Mark and then we instance our inventory UI right here and then if we go to our world and we play we can see that when we walk around the inventory is close we click I the inventory opens and it closes again so how do we make this look a little bit better well we can go to our inventory UI we can remove the color wct and then we have to add a way to create the actual UI and the inventory so we have different slots at the player can see so we're going to add a nine patch wreck for this and this nine patch wreck is going to be a basically over here if we go to it's going to be able to expand it but keep the corners of the inventory the same so we can basically make it bigger but it make it look the you know the same scale or the same athetic I don't really know how to explain it but I'll explain it right here so we can see that we have a texture if we load our inventory texture which the links to this will be in the description below so if we go to our art we go to our inventory art you can see that we have our inventory slot and our inventory background if we click on the inventory background you can see that if we expand this well it's going to look kind of funky right so that's not going to look right but if we go over here and we use patch margins then we can say we want the left six pixels and we want the top six pixels that means it's going to hold those pixels right so those won't move they'll stay the same and only the middle will move so if we do all the side six then you can kind of see how this works and it's going to look a lot better right so we can make this bigger and we can expand it so that is how we're going to do that and that is how a nine patch scene work our nine patch wck works and then now we have to go in and we're going to add a grid and we're going to add all the slots to the grid then we're going to have a way for those slots to update so we can display it on the player or we can display what the player inventory is holding but you know visually so if we CLI contrl s we can save this scene and I want to make sure everything is saved into our inventory scene down here and it is so that is all good okay so now we need to go and create our slot and to do this we're going to add a panel as a brand new scene and we're going to rename this into a slot or for our slots so we can name this inventory UI slot just like that because this is our inventory's UI for the slot and we're going to first have a background for our slot and we're going to make this a Sprite 2D we're going to go over here to the texture and we are going to load our art in inventory art and we're going to we're going to add the inventory slot.png you can see that it's like kind of up here so we can go to offset and we can disable centered so it lines up like this so whenever we go to our grid during our or in our inventory UI It lines up correctly and it doesn't line up and it look funky so then if we go to the parent node or the slot we want to first of all get rid of this color or first we want to kind of line it up with the slot so it's the same size then you can kind of see how there's a little outline if we go to our visibility we go to our self modulate and we can change this a to nothing and then that is going to be invisible just how we want it and then if we go into our layout we're going to see a custom minimum size if we open the transfer we're going to see a size here we want to copy these numbers the X and the Y up here to the custom minimum so it that's the size that it stays and then we want to save this scene into our inventory as the into our inventory folder as the inventory UI slot and then once we save this now we have our slot so if we go to our inventory UI then we're going to go to our nine patch wct and we're going to add a grid container this is so the this is so that our slots will show on our inventory so if we add this to our grid container then we can instance 12 slots as the child of this grid container so that's going to be a lot but if we click on this instant button and then we look up our slot scene we can instance this slot and then we can copy whoops we can copy this slot paste it paste it and then paste it as many times until you have as many slots as you want and we're going to go with 12 so this is four five 6 7 8 9 10 11 12 so now we have 12 slots in our grid container and I'm going to go up here and name this first slot one just so it's easier for us to read and then if we go over here you can kind of see that it goes in know one long line all the way down so if we go to our layout for our grid container you're going to see this column not even the layout just in the grid container in the inspector you're going to see columns we have one column if we have two columns it's going to make it two then if we have three it's going to make it three and then if we have four it's going to make it just like this and that's how I'm going to leave it I'm going to have four columns and then we're going to go to our nine patch rect I'm going to expand the backside so it fits the that so that it's able to fit our inventory slots and you can kind of see how these are off centered so to fix that we can go to our grid container we can go to our layout and we can go to our our layout mode and this layout mode we're going to change it to Anchors and we want this to be anchored in the center and as as it's anchored in the center you can see how this changes it we can go back to the N nine patch wck we can move it around a little bit just like that and that looks centered to me so these are going to be our inventory slots and then once that is centered and it looks just like this we can resize the root node which is our inventory to match the exact same size as our inventory itself so whenever we want it to align with something EX for example on our canvas layer or we want it to show in the middle of the screen that's how you're going to want to make sure that this is perfectly in line right so then we can go to our root node and we can go to our layout and then we can change the custom minimum size to equal the transform size just like this and then we can save the scene so there's two ways to implement an inventory first you can have it in the world to where it's on a canvas layer so it pops up in the middle of the screen and it doesn't matter where the player is that it's going to pop up in the middle of the screen or you can have the inventory where it follows around the player and if you want to add it to where it just pops up on the screen well you just go to your world you'll add a canvas layer just like that a canvas layer right there and then you'll add the inventory slot as a child node but for this I'm going to add it above the player head so it follows the player around the map so we can go to our player and we can see that it's already you know inserted in and it looks more like an inventory if we just move it above the player's head just like so it's going to look good right and if we save the scene we go to our world we play the scene you're going to see that we can run around we can open it and we have an inventory we can close it inventory close it open it close it open it close it open it close it open it close it open it close it and it works just good but there's no items in the inventory right if we go and we click this apple well it doesn't appear and there's no apple in the inventory so what are we going to do well this is going to be a little different thing and we're going to have to go to our slot scene and we're going to have to build an item display so if we go to our slot scene we go to our slot and then we add a new thing we'll add a Sprite 2D and we'll name this our item display because that is what it is right our item display and then we'll add a script to our slot and this script will inherit the panel just like this and in this script well we're going to go over um first we're going to need an onready variable just so we can access our item display so we can change it so we can say onready VAR item uh visuals so item visuals is going to a Sprite 2D and this Sprite 2D is going to equal our item display just like that then we're going to create a new function which is going to be our update function which is going to update the item that is displayed so we'll say item is going to be an inventory item has to be an inventory item but then we're going to say if not item then item. visual. visible is false because there is no item there so if there's no item then we want our item visual to not be visible obviously because there's no item to show but if there is an item then we want our item visual. visible to equal true because there is an item and we want it to show and then we want our item visual. texture to be changed texture to be equal our items texture so for example if it's an apple then it's going to equal our Apple's texture right so now if we go to our inventory our inventory UI script and we open up this script well we're going to create a couple new variables and the first variable we're going to create is going to be for our players inventory so we can get our players inventory so if we go and we'll say on ready for inventory equals inventory equals preload and we're just going to preload the players inventory right here here so we'll get the player inventory resource and preload it and then we'll have another unready variable and this unready VAR is going to be for the slots that are in the inventory so slots and this is going to equal an array and the slots are going to be our nine patch re and our container and then we're going to get all the children of that grid container because that's all the slots because we want to get all the slots and not just one of the slots right so we'll say nine patch wct slash grid container and then we we want to say get children so we get all of them right just like that and then we can create a new function down here and this function is going to be the update slots function and in this function we're going to go and say for I in range so basically for we're going to have to get all the slots we're going to say minimum inventory and I'll explain this in just a second but minimum inventory item item do size and then we're going to say slot. size so we're going to get the size and then we're going to say slots the I that we just checked do update so we're going to call our slot and we're going to call our update function so it's going to update it into whatever the inventory item is for that specific specific slot so basically all this is doing is we're going to find the number so it's going to go through all the slots we have right so it's going to check it's going to check slot one it's going to check slot two it's going to check slot three and it's basically going to say and it's going to update our slot so it's going to check it so it's going to say for slot zero then it's going to update slot one it's going to check for slot one then it's going to update slot two right and it's going to keep on going all the way down the list so that's calling this update function and it's going to pass through the variable of our resource right that's in our player inventory that we just imported so if we go to our ready function and we call the update slots variable or we call the update slots function in our ready function we go to the world and we play we are we are going to have apples visible or we should have apples visible but we are getting an air so where is the air coming from well let's see okay so this air is a quick fix we have item instead of items we have to make sure we have the S on there and now if we play the world scene we'll see that everything loads up if we click I we have apples in the inventory they don't look right they're not centered but that's an easy fix but you can see that they are in their correct slots that we added earlier and I'll go around and I'll play around and I'll change them up but to fix this we got to go to our slot scene and then we're going to have to add a center container on our item display so we'll say on our slots We'll add a a center container and then we will add a panel within our Center container and then we'll move our item display into the p panel but then our Center container we want to make sure that we make it the same size as our panel itself just like this and then we want to go to our layout we want to make our transform we want to make sure the minimum is the same as that and then once we move our item display here it should show right here in the middle of everything right so or we got to update our item display in our script as well so this is not going to be just at item display it's going to be at Center container that's going to be our new path right so now if we go to our world and we play and what just happened okay so we got an air and this is a simple error because our little thing up here is messed up because I don't know why it kept the the ending on there but we just want item display just like that now if we play our world we can see that if we open up our inventory the apples are going to be even more messed up so so it's way up here something's way up here I think that's our okay and the reason it's so messed up is because our item display our transform is way off so if we reset our transform to zero zero then it's going to be in the center as you can see it was way up here now it's way down here so now if we go back and we play our world then last time third times the charm we click I you can see that the apples appear where they should but if we close it we go to our player we go to the players's inventory here we can kind of change this up so we can say we want here we can say what if we want to add an apple to the very first slot well we drag an apple to the first slot we can remove an apple from this slot then we can add an apple to the last slot so now we have an apple in the first slot the last slot we go to our world and then we're going to have two more apples within the inventory but if we click I you can see that the inventory updates and that is good so now we have an updating inventory the inventory updates based on what we have in our uh players inventory next episode we're going to go over how to stack items and how to actually collect the item and it to update live in the game so we're going to learn to insert items into the inventory and have it update on the screen automatically as you collect items as we pick the apple tree so if we play the scene one more time you can see that we have an apple tree once it grows next episode we're going to be able to pick it and then we'll be able to open up our inventory and we're going to see that it updated but this is how the first episode of the inventory and now we have basically a working inventory system we just got to collect the apples and have it passed through the system that tell us oh we collected an apple and then it's going to stack the items as well so this is episode one of the uh inventory I hope this was helpful and I hope next episode is even more helpful as it's going to finish up the inventory system and teach you everything you need to know about inventory in Goda but thank you guys so much for watching if you have any questions please let me know in the comments below I really appreciate it and if you could subscribe to the channel it would really help me out and I would really appreciate it it would mean the world to me thank you so much but until next time stay safe and I hope to see you in the next episode where we go over part two of the inventory and we learn all the ins and outs of stacking items and collecting items but thank you so much and I can't wait to see you next time bye-bye

Channel: DevWorm

Views: 23,547

Keywords: godot, godot 4, inventory, inventory system, how to create an inventory in godot, godot inventory, how to make an inventory in godot, how does an inventory work in godot, how to make an inventory for my godot game, rpg game inventory in godot, inventory tutorial for godot, godot how to inventory, player inventory for godot, 2d inventory system for godot, inventory in godot, godot engine, godot 4.0, inventory system in godot, simple inventory system, step by step inventory system

Id: X3J0fSodKgs

Length: 25min 31sec (1531 seconds)

Published: Thu Oct 26 2023