Grid Based Inventory System | Godot Inventory Tutorial

in this godot tutorial i'll teach you how to make this grid-based inventory to go along with our character sheet that we made the other day we'll not only be looking at user interface elements but also some code to make sure that the number of inventory slots is equal to our backpack size and how we can load up our inventory based on a data structure that may come out of a safe load system for your player let's get started first things first though in the last tutorial on the character sheet i've been getting some feedback on my use of margin containers and how i can optimalize that and you guys are absolutely right to point that out i've learned from you and it shows why it's so important to join a community like i talked about the other day let's address this real quick together and then we'll jump into the inventory in the last tutorial i used four margin containers to section off the borders of the background panel that is not necessary so i'm going to be deleting these margins the one at the bottom the one on the right the one on the left and the one on the top then this v box container is going to be the margin container and using the custom constants we'll be able to section off all four sides so i'm going to change the type into a margin container i'll rename this i'll call it the m for margin container to keep it short and now under custom constants we can set our margins to be exactly as we want them to be and i believe that on the right side we wanted it to be 11 as that was just a little bit different and just like that we have simplified our note structure considerably and we are making use of the margin container in i guess the way the margin container is used thank you so much guys another quick fix is the top control mode of character sheet that's currently the size of the viewport that's a problem when we instance in two user interface panels as these control nodes are going to be overlapping each other the default mouse setting mouse filter is set to stop which means we cannot click anything in another user interface panel because the entire control node is blocking it we can quickly fix this by going to character rectangle change this into the size that we make the character sheet in the first place select our background go to viewport full rectangle and then on the character sheet we can position it as a default location when it loads into the game now for the grid-based inventory gonna create a new scene it's gonna be a user interface i'll rename my top note to inventory and let's start by saving it under my folder scenes ui with that done we're going to change the size similarly to what we just did on the character sheet i'll make it the same size so they look equal i think that will look good i'll give it a default position so it will load in a location where it doesn't overlap the character sheet by default of course later in this series we'll make these panels draggable now of course we need to add a background so i'll add a nine patch rectangle we'll rename this to background and we'll resize this to the full rectangle then with that done i'll drag in this big bar as it's called in the pack that i'm using now this big bar has a also the corner elements that we've been playing around with before and i've already checked that we can use a patch margin of 240 to make sure these elements are sized correctly now there's one downside now though because these elements are now the background but i think it would actually look really good if our inventory slots that are gonna be in the scroll container that they are behind this element to give it a little bit more depth so what i'll do instead of having this element here i'll change it to the big bar with just the background so this doesn't have the borders i do have to have the background selected there so i'll change it to this bar with just nothing in the in the border art we'll duplicate this background and we'll rename the other one to foreground with that foreground selected i'll drag in this frame and now we have the background and foreground separately the background image and the foreground as the art elements so that our inventory slot items can scroll behind it now with that done we have basically two elements to add one is a title of inventory so that we know which user interface panel this is and then we have to add our grid container we split this panel by first adding a margin container to make sure that nothing of these elements that we'll be adding is going to be overlapping the border art we go to layout full rectangle we'll rename it to m to keep our path short and under custom constants we do it the correct way this time we're going to be adding our margin i'm using a little bit more margin on the left and the right side so that the elements that we'll be adding to our grid container are not going to be hugging and snugging up to the border art but there's going to be a little bit of padding in between with that done we can add our v-box container to split the panel into two sections the top header and the grid container and we'll add these at the same time the first one is going to be an hbox container for our header this will have both the title but also a little bit of an excel icon so you can actually close the panel there's going to be an exit icon we'll set the minimum size of this rectangle by 80 no that's the wrong one we want y80 and we'll add another element to the vbox container that is going to be a scroll container and in that scroll container we're going to set the size flags to expand vertically as much as it wants to now the scroll container always needs to have either a grid container an hbox container or a vbox container and we'll be adding a grid container to this one so choose add child and we'll add a grid container to it now this grid container by default is going to be very small so again we set on the size flex to horizontally expand and vertically expand based on its parent and as you can see now we have a little bit of extra padding in between the border and where the elements are going to be filling this panel up and it can go all the way to the bottom here but remember it's going to go behind these art elements as those are part of the foreground and the foreground is lower in the hierarchy of this node tree therefore it will render in front of it but we'll see that as we start adding items first for the header i'm gonna go to the hbox container and i'll add a texture rectangle where we'll put the name in we'll use the same kind of art that we did for the character screen so that the panels look nicely matched together the texture rectangle we will rename into tidal background as this will be the background image for the title we'll go to rectangle and we'll set the minimum width of it to 325 with that done we turn expand on so it doesn't change again and we'll drag our little bar to the screen now with that done we can add an outlet child to this we can add a label we can set the layout to full rectangle and we can type in our title in this case inventory we'll set the align for both horizontal and vertical to the center and i'll make use of a custom foam that we've used from the last character sheet screen so we'll load this up from resource i'll use ariel 26 but i still think this is a little bit too small so i'll make it unique i'll go into the settings i'll change this to 36 then i'll save this in case i ever want to use this again in the future now as ariel 36 with that done we have to center it but we also have to add that exit button so let's work on that we start by adding two control nodes to our header that is one and we've ctrl d duplicate a second one i'll drag the first one to in front of the title background i'll rename the other one exit i'm going to be controlling with the size flags of these two control nodes the position of the inventory but at the same time give myself a container to add our exit button to by setting this horizontally to expand it's pushing inventory all the way to the back by setting the same size black horizontally expand on the second control node these two control nodes are now telling each other to share any available space thereby pushing inventory to the middle that is beneficial for us because once we start programming that this screen becomes resizable by the user the inventory will always stay nice and neat in the middle now with exit we have to add this exit button we do this with a texture button and i'll rename this to exit as well or actually it's already called exit there so let's just call this button with button i'm going to go to the rectangle i'm going to sit the minimum size i think 50 by 50 would be fine in this case and i'm going to turn x band on so any textures that i add won't be resizing the container i got two buttons right here mini exit and mini exit pressed so i'll drag these to normal and i'll drag these you can see this one is a little bit darker i'll drag that one to press so that the player gets feedback the moment he presses it now by using the layout top right it doesn't matter how much this container if we a player were to drag this panel bigger it doesn't matter how much bigger this control container will be as the anchor is the top right corner which will always remain in the same place now of course this doesn't look very good and you can already see how this foreground texture that we added in the beginning is working because now it's overlapping this button that doesn't look very good either so under our margin it's one of those rare cases that i do use margin i'm going to be pushing it a little bit further to the left i also have to make sure that then we add a little bit more margin here and from the top we already had 19 margin from the margin container so we have to add 16 on this side and now it is nicely spaced in relationship to the art of the border but it also is fairly in the middle of the texture container right there and i think that spacing looks pretty decent now with that done our header is finished now we can focus on our grid container let's start work on the grid container by adding our default inventory slot we go to the grid container we add a child that's going to be a texture rectangle i'll immediately rename this to inventory one and how you name it is not super important but that one at the end is so please make sure whatever name you give it it ends with a one it's going to be important in the code a little bit later on with inventory one selected i'll set the minimum size to 95.95 because that fits my art quite well and the sizing quite well and with x-band on i'll drag the inventory frame background to the texture parameter that is going to be our slot now we need to be able to fill our slot with an item icon that we have in our inventory so i'll add another texture rectangle as a child i'll rename this to icon i'll set the layout to full rectangle i'm going to give it some margin so that any icon that we may add does not interfere with the border art of our background texture with that done we can duplicate a number of these to set up the settings of our grid container to behave as we intend it to if i start duplicating these these slots are going to come in vertically we want them to come in horizontally fill out a horizontal bar and then continue vertically so we go to the grid container we tell the grid container you're going to have five columns once we start making this panel draggable we'll have to separate or add more columns as the player is dragging out his inventory so that is something we'll have to do in code once we start adding those dragging functions now with that done i think that these slots are really snug they're really cuddling up to each other and i think that doesn't look that good so i'm going to add some custom constants and i think 12 will look just fine now with that done we can add a couple more of these and as you can see now it starts looks pretty good if i add more and we get vertically the uh container is automatically at a scroll bar now i left on purpose a little bit of extra space so you won't actually see that you you really have to look closely to see that you got a little bit more space on the right side i leave that a little bit of extra space to make sure that the scroll bar has the space to come in now i'm not going to go over how you can change the look of that scroll bar you can do so through the theme settings but as an old tutorial by itself of probably another 30 or 40 minutes so that may have to come another day with that done now we have our grid container but it's still very snug to the title here to the header so i'm gonna go all the way up to the v box container on the top gonna turn on the separation and with 20 pixel space maybe even a little bit more 25 we got a little bit of more normal spacing between our header and our actual grid container now with that done we don't actually want to set up the amount of item slots by ourselves we want to do that based on a parameter maybe the amount of slots the player has in its backpack so when the player upgrades his backpack you get more slots or maybe buy some quest rewards you get more slots or maybe it's a micro transaction in your game so let's set that up next and also make sure that we have some data and load that data into the inventory the moment that it's opened up to start working with some data in this tutorial i've created this data table that is going to be functioning as our item database we have the ids of each item the name category and type the equipment slot the item goes to in case it is an equipment piece attack defense and block potion human meta and food satiation now i've got an extension installed on my google sheets that is going to help me export this data table into a json file that is open up here on the right hand side of the screen and if i hit export a json file will come into my google drive i've got an entire separate tutorial on this check it out i'll link it up on the top if i hit that export button we're going to get this json file with the first column as keys or main keys and then every column header that comes afterwards as sub keys underneath the main key with then the information inside this is a perfect dictionary format that we can load into godot and then start referencing in the code i've also created this inventory data file which has 28 inventory item so that means we're going to be creating 28 inventory slots and if the player were to loot a bigger backpack we could simply add more slots in this inventory table and of course i've added some items to number one to nine is currently filled and as you can see i'm only using the item id references i don't need to be pushing more data this is a sword this is an equipment set a helmet how much attack how much defense that's all not required because i got a central item database from which i can reference all the data that i need the most practical way to get this data into godot is by making use of singletons i've already created a new folder called singletons in my project and i've created two scripts under that so i've done drag mouse cut button and go to new script these are player data and game data let's have a look at game data first the code is very easy it defines a new variable the item data this is going to be the item table that i created and under the ready function we define a new variable item data file it's going to be a new file we open that file on the location where we stored that file i'm going to get into that in a moment where you have to store these files then we define a new variable item data in json format which is going to be a parse function of the json class and we're going to get that file as text then we can close the file that we originally opened that's why we free these resources up from the memory and then we define the item data json results as the item data and now on this singleton we can reference this item data and that's going to be exactly the data that came out of that json file and that is a dictionary type now going over to player data we have pretty much exactly the same function only difference is that this is looking into the user file where the game data looks into the rest file i make this separation because the item data is static data the item table doesn't change during a player session or over various player sessions an iron helmet remains an iron helmet with the same amount of defense as its base value because of that we can store it in our project folder which is when a player installs is on their computer basically going to be on the program files now we don't want to constantly change files on the program files and some operating systems may even limit that as a write applications have we have for that our user valve for example if you're a windows user is simply going to be normally your first hard disk c and then users and then your username and you'll find many games save their data there because the operating system gives more freedom to various executables various programs like our games to store and change files on that location so going into our file explorer to see where these files are stored we first can have a look at that item data this is simply under my project so this is the project you can see it's exactly the same as my file system there and under the data folder i got my item data sheet1 json which is pretty much well not that one need to have the game data you can see here res data item data sheet1 json is exactly that path for the inventory file however it's a little bit different that is under as i said before user stefan and then we have app data that's an important one app data by default if you install windows is a hidden file as storing system information or system files so you have to go into your folder settings you have to uncheck the box hide system files then you can approach the app data folder go into roaminggo.app user data and then your project name of the project you're working on in my case i call this code of equipping record there i've added the inventorydatafile.json now with those two files added to the right locations and these two scripts added to godot we now have to set them up in project project settings under autoload we have to approach the script so we're going to go game data load that up and we'll do the same one for player data load that up now there are singletons now they'll be added on top of the scene tree where they'll load first when the game opens up making sure that this data is always available for any node that loads afterwards and may need some of that data and we can reference them very easy as you'll see in the code in a moment before we can start coding we have to do one more thing right now we've got all these inventory slots in our grid container but we want our grid container to start out empty so that we can fill it up with slots based on our inventory data so i'm going to be deleting all these inventory slots out of here except for the first one inventory one i'm going to save this one as save branch as seen i'll save it under my scenes ui but this is not really a ui panel by itself so i'll create a new folder here which i'll call templates and i'll save this inventory slots as an inventory slot now it is saved as a separate scene and i can delete the last one out of here as well now we're ready to start adding code to this inventory so that loads up all the data based on the data we've just created and added to godot the code for this is really easy i'm selecting inventory my top note here i'll add a script that can be called inventory no problem and i'll add some code to it and this is all the code we require first we define the template inventory slot that we just saved and we can pre-load that and we can simply take the path that we have saved it at then we want to get the grid container because we're going to need it a couple of times and we don't prefer any long get node references so we're going to get this node and save it as grid container then under ready function when this inventory loads into the scene we're going to go over every key in player data inventory data keys and for every key that's 28 keys we're going to define a new inventory slot which is going to be an instance of the template inventory slot then if the player data inventory.i so that is going to be the inventory slot then we retrieve the item and if we quickly have a look that is going to check if there is an item in our inventory data whether it's a number or whether it's no if it is something else don't know it means we have an item in that slot then we define the item name by checking our game data item data so that is the item database and in the item database we need to get that item id the item id is stored in player data inventory data i item now we have to turn that into a string because it's currently a integer and the keys in the inventory data are strings so once we then have the item id input in for our item data table we can retrieve the name and that is of course going to be the item name now that we have the item name we can load the texture by simply using a load function we know where the assets of our item icons are stored we know that they end with png and we can simply add the item name in the middle i of course made sure that under my assets icon items i have added an icon for every single item that i've defined in my data table now that we have the texture we can take the new inventory slot so that's the instance we've defined here within this new instance we can get the node icon that is where our item icon is supposed to go and we can set that texture to the icon texture we have just defined the line above then we can take the grid container and we can add this instance to the grid container this last parameter here true means that it's human readable names and that's important because that means that the inventory or the nodes are simply going to be called inventory 1 2 3 4 5 6 all the way up to 28 and that happens automatically because we've made sure that our first template the first instance we add has that one at the end and that's why it's so important with this done i've also added the inventory as another user interface panel to the user interface canvas layer here now when we hit play we can see that our inventory loads up automatically it has automatically added 28 slots to the grid container and it has checked every slot where there is something in there and of course i've added a couple of items and as you can see all the icons are loaded up properly in the next tutorial we'll have a look at drag and drop functionality so we can drag some equipment from our inventory to our character sheet that's the next tutorial though this one is over i hope you like it if you did smash that like button hit subscribe don't forget that little bell icon to make sure you don't miss out on the next tutorial thank you all for watching see you next time until then keep on gaming keep on coding see you later guys

Channel: Game Development Center

Views: 12,214

Keywords: Godot Inventory, Godot Grid Inventory, Godot Inventory System, Godot Grid Based Inventory, Godot How to Make an Inventory, Godot Inventory Panel, Godot Beginner Tutorial, Godot Tutorial, Godot

Id: lrAwX2t1mGY

Length: 24min 24sec (1464 seconds)

Published: Sun Feb 14 2021