How to Make an Inventory System in Godot - (#1)

hey everyone in this tutorial series i'll go over how to create an inventory system such as this one i'll go over the inventory panel the hotbar and possibly tabs and more by the end of this video we'll have a simple inventory system like this and in future videos i'll go over adding more features to it let's add a 2d scene let's rename it to inventory and let's add a texture rack so we can add in the background of our inventory panel and then i'll drag in the png file to the texture property and now it's showing and let's just center it to the middle of the screen so now we want to add slots to our inventory so we can do that by adding a grid container let's move the grid container inside the inventory panel and let's expand it to fill it and now to add items within the grid container we can add and these panels will act as our slots so let's rename it to slot one because we're going to have multiple of these and to make something show let's go to custom styles click on the panel property and then new style box texture and click on that and then within the texture field let's drag in a png file that can work as our background for our slot so it's not showing so far because we need to set another property called min size and i'll make it 18 by 18 because that's the size of the texture that i just added and now we can see it so if we want to add more slots we click on the slot and press ctrl d to duplicate and keep pressing that to add more slots but as you notice it's just one column so to change that let's go to grid container and add more columns and i'll just add five for now i'll try to fit it in and i'll add more slots to fill it up cool now we have slots at least visually to change the spacing between the slots we can modify a property called h separation and v separation under grid container and under custom constants so let's check mark both of them and modify it to however we like so i'll just set it to 4 for both now let's save this scene ctrl s to save and i'll just leave the name as is before we continue let's add an item scene just so we can see items within our slots so let's click the plus sign click 2d scene and rename it to the item we're going to keep this item seem fairly simple and just have an image to show what kind of item it is and for that i'll add a texture rect and i have two sample item icons and i'll just add iron sword to the texture property but i want to randomly select between iron sword and tree branch just for visualization purposes so let's add a script to the item node and within the ready function let's randomly select a number between one and two or zero and one so to do that we'll do the rand i function and then modulo it by two and that gives either zero or one so if it's zero let's just arbitrarily make it iron sword so we'll set the texture rect texture property to be iron sword else it'll be one and we'll set it to be tree branch and ctrl s to save and we'll save it as item scene and for now that could work as our item scene and let's go back to our inventory scene now for demonstration purposes let's add some items to some of the slots and to do that let's add a script to our slot nodes so let's click on one of the slot nodes and then add a script to it and we'll call this script slot.gd and we want to apply the same script to all the slot nodes so to do that let's click on one of the slots hold shift and then click on the last slide and that selects all the slot nodes and let's open up the script section and then drag in the slot.gd into the script property and in that way we apply the same script to all of our slot nodes so let's open up the script and let's randomly determine if we should add an item or not to the slot so before we do that let's define the item scene so we can instance it and also have a variable to keep track of the item within the slide and we initialize it to be null now within the ready function let's call the randi function and we'll say half the time there's going to be an item so we'll do modular two and if it equals zero let's add an item and to do that we set item equal to item class dot instance and then we add the item as a child to the slot ctrl s to save and then let's try running this great so we can see that some of the times we have some items in our slots and there are either tree branches or swords because we had that logic within the item scene to randomly determine whether it should be one or the other now let's close this now in order to change the texture of the slots depending on if there's an item in it or if it's empty we would have to change the style box texture of the slot and here's the code to do just that so we preload the textures we create variables for the styles and then within the ready function we set the styles texture property to be the textures that we pre-loaded and then we have a function called refresh style in which it checks whether the item is null if it is then that means it's empty so we set the style to be empty else we set it to be the default style and if we try running this we can see that there is a difference between empty slots and slots with items so the empty slots are slightly transparent and the slots with items have a black outline and look a bit different from the empty slots so let's close out of this now we want to be able to pick an item from a slot and also place an item into a slot we can do this by first implementing two functions called pick from slot and put into slot within the slot.gd script within the pick from slot function we remove the item from the slot node but we add it back in to the inventory node so we can move it around using the mouse cursor within the put into slot we add the item to be a child of the slot and at the end of both of the functions we refresh the style so it either will change into the empty style or the default style now let's add a script to the inventory node so click inventory and then click the plus sign to add a script and create this is the code for the inventory script within the ready function we iterate through all of the slots and connect any gui inputs such as mouse movements or clicks to a function we define ourselves called slot gui input within this function we check to see if a left click has occurred if we are currently holding an item we will either place it into the slot if it's empty or swap it with the item in the slot if we aren't holding an item but the slot has an item we will start holding it and within the ready function i mean within the input function we will update the holding item's global position to be wherever the mouse cursor is by doing get global mouse position and before i run this let's go back to the item scene and let me get out of this view and let's make sure to set the z index of the item node to be 1 so we can make sure it renders in front of the slot textures and also within the texture rec node let's make sure that the mouse filter is set to be ignore so our mouse plates aren't blocked by the item textures so now let's click play let's go to inventory first and let's click play and we can start swapping items between slots with mouse clicks now and we can drag the item with our mouse cursor and that's all for this video and in the next part i'll work on adding more features to the inventory system such as adding a hot bar in which a player can select items to hold and some ui improvements thanks for watching and if you found this video helpful consider subscribing take care

Channel: Arkeve

Views: 39,371

Keywords: godot, tutorial, indiedev

Id: FHYb63ppHmk

Length: 9min 25sec (565 seconds)

Published: Sat Aug 15 2020

Reddit Comments

[u/G-Brain]

This is for a fixed inventory size, but you could also add a ScrollContainer and add the entries (filled/empty boxes) in code.

[u/Thetopmat]

I've been looking for a video like this. Thanks