Diablos/Dredge like grid Inventory | Godot 4 Tutorial/Code along

greetings and welcome to Alfredo's group 4 tutorial and code along in this video I will you will be able to follow my design process step by step for a great inventory system of the game I was recently fascinated in with some of my own twists of course okay to start it off we'll start with an empty project and start with the UI and we'll name this UI inventory create a structure for it in this case I'll for simplicity's sake I'll use a color correct instead of a a texture rack you can always use your own texture rack for some sort of backgrounds and texture let's give it some darker color and let's set the value into somewhere around um these numbers as whole numbers for no particular reason okay let's make it slightly darker um all right and we can probably move this around one now let's make a margin container make sure it's filled and then let's create a vbox container and separate into a horizontal hbox container and a I believe scroll bar container scroll container same distance and this is where we will be putting the header this is where you would put buttons to close or minimize depends on what you're doing for now let's just give it a button okay and for this let's override theme to make it somewhere around um let's go let's go to about a hundred all right the button if I could remember where to change the size of it 'll be much easier I think let's skip a big one and let's also make this into a center there we go I'll say 150 too much okay so maybe 50. that looks about right okay now this also we'd want to fill it I believe it's done somewhere differently there okay expand it to the full range and then let's add a grid container and this is where we'll be putting our actual values actual slots all right now that we have a a UI ready let's create a main scene for it and let's add the UI to it so this will be the main save it and save this into the inventory scene add this into this is just for housekeeping not really necessary but um make sure it still runs good okay so let's start uh creating the individual scenes in there that will be needing to make this a creative Android all right first we'll be needing a slot how I'm making the slot is just with a very simple texture rectangle and a another color rectangle underneath it so now let's set a few things inside the item or inside the folder I will be adding a few assets such as I believe here is there we go all right let's create an asset and here I will be putting in inventories texture and a few images which looks something like these all right let's put the drag the icons in there and we'll be having that looks pretty good okay so let's keep a skill on do not keep size ignore size so that would be the same size as what we set it to and let's create a slot that's the size of 50 by 50. and change the color rect to fill so that's completely covering this will be acting as filter so that we can change the color of it when we need it to looks pretty good let's keep that as the rename it into the slot and let's remain renamed this to status so when this is here in the grid container once you duplicate it with Ctrl D you'll be able to have a few different things but what we want is a horizontal horizontal expansion so let's change the column size into eight and see if that makes things better yes okay so this will automatically populate this and we don't want the size or the little space in between them so in that sense we will try to overwrite this with the zero separation let's see if that looks better looks quite good to me all right so now let's change the slot into a pack scene which is Save branch to scene let's call it slots very good let's open that up and get ready for some coding oh we don't need this anymore now we'll be starting to make a few Scripts uh starting with the inventory let's call it inventory looks pretty good and let's go to the slot also create another script for this calling it slot but we'll start to set a few variables and of various signals that I'll be needing in a bit I'll explain what they do once we use them in fact this is the first signal and I think another one for exiting then let's set the on ready variable into have a path to the filter it's not too complicated just for housekeeping and a few things we'll definitely need slot ID to identify what this one is and is hovering this is a way of um overriding the mouse and exit and entered in the control node then we will make an enum for different states this item has or this slot has which I believe I would call it default ticking and free and then we'll have a separate variable to store the state of the slots initialize it to defaults default and then I think that should oops down there and one more for the item store in inside okay let's go back to inventory and first we will try to instantiate all these slots in code and see how that would work we will be using well first let's save a few variables as well it's called slot scene and put the scene we saved earlier in here and then let's put a few things so we want to do is we want to instantiate a few um say this many of slot teams call it a function name create slots this should be a very simple one why is it giving me a I and range okay all right let's instantiate a new slot we've already pre-loaded do we preload this I don't think we did I think that's what you're supposed to do here I believe so yes and then instantiate a new slot scene Dot instantiates and then let's set slot ID um this is for housekeeping and for later I'll be calculating them calculating grid values with these so let's change that they will be uh they'll be given a ID referring to a grid value and I'll just for Simplicity sakes calculate the size of the squared array so every new slot added in is just the next index what was I doing then straighten array name this very good and then just another variable called let's call it um grid container this is where we'll be putting all the instantiated slots to have a good reference to them when I need them a quick container sorry what I meant is I will be creating a pointer to the path of the grid Continuum created container call it this okay and let's add this is the child of the grid container we have and we will connect the two signals I have created here but let's not do that just let's see if this works first always always check before you've made too many too much progress so that you know where you've made a mistake that's my experience at least alright so far the creating process the creation processes no problem let's add in the two mentioned signals slot entered we'll connect that to a function let's call it on slot Mouse entered and another one very similarly called exited all right and I'll be creating those functions in a moment so what we'll want to do here is do something right when the when the cursor is entering the that specific slot and let's do another one here all right so what we want to happen right now is to make sure these signals are connected properly and to test that we will create a set color method in this um in the slot script basically with the set color script I wanted to do is effectively change the color of it so let's create a function name set color I think what I want to have is a default value defaults and we don't really need a return value for this let's call it give it a default parameter or it's also then let's do a match state uh let's call it states dot defaults we just have set it to null color filter.color set that into a nuclear variable create the color white oh this is for the completely transparent defaults so it just looks like the the way it is okay second one we'll call it um another one just to this one is for taken taken and this one is for free taken let's give it red and for free let's give it green okay so these are set and let's see if we can call them upon now centered so I'm also entered it is giving it a slot right so causes arguments and same thing here so whatever slot we entered it's called the set color method and pass it in these uh the state of it we want Twitches I believe dates dots on enter let's just turn it red so it's taken and on exit let's call it tree okay so right now nothing's happening see where we went wrong let's take a look at the slotted Turtle executed all right we didn't set the transparency let's give it a 0.2 and see if they're changing they're still not changing okay oh I completely forgot to actually put in the function part it's quite dumb of me all right so what happens is let's check the rectangle this slot is hosted see if it has a point which the point we're looking for is the global Mouse position so if our boss is in there let's create we already have the hover and it's hovering variable we're basically is checking it if it's not already hovering which means it just entered um we will change this hovering into true and let's emit the signal of slot entered and let's give it itself to go along with it and if it's not basically if it's exiting if it's still hovering while it's leaving the rectangle that means it's just exited let's call this and change the value of this hovering to false and same thing emit signal of slot executed and also give itself I believe that should work just fine perfect now wherever our house is going like it's been sitting into a taken and set the rest into uh green which is free good now obviously we don't want them to all be in there so let's create a clear all method second thought I think I'll just change this into defaults and leave the rest for later so it looks pretty good all right next we'll be making a data Handler to deal with all the input values and the saved item data that we'll be using for this grid inventory let's first create a item Json file and I'll be doing that with the handy Google sheets let's take a look at the little Json file I have we have an item ID for identifying which item we have we have the item name we have a random value I just put in here and the most important part is the great information to do the spinning grid we will use a default grid anchor which is zero zero and the other values are referenced with respect to the zero zero point for example the zero zero zero one and negative 1 0 is the equivalent or it will represent the area value of it's an image that it looks like this so the center part will be called the zero zero grid and this will be the we're using the x y coordinate of usual gaming or I guess programming standard which is to the right is positive X and to the bottom is positive y okay so basically uh use your preferred way of creating this into a Json file I'm using the handy dandy export sheet data I believe you just search Google sheet export Json you'll be able to do that so once you export it you save it into a Json file and save it into a data I'll create a data file here and go to my project folder create a data and I'll save the item data in here now let's go and create a new script let's name it data Handler and we will load this as a autoload for it we have data Handler here okay so what we need to do here is simply load the value load the Json file we prepared all we have to do is create a few functions to do that for us for the sake of modular and being able to reuse them later I'll create separate functions for them we want a low data which loads a specific file with the the path we're given and another one for this specific task loading the grids into a specific structure and let's give it a few variables that we'll access from other parts of our scene first one we'll need is a item data and I'll need a grid data and then the path already item data pass and I think it will be in there we go lovely don't really need to process function all right let's make the load data first you're a very standard so if we if we use file axis for this um if we don't find the file to uh arguments remind us that there's something so we're going wrong item data file not found all right for now let's do open file with file axis to open let's put in the path and let's do the file access read and so access dot we just need to read okay and let's put item data use Json to parse the string and put item data file to get as text okay now we have loaded it into here something wrong uh item file data file data to get rid of the annoying error I'm going to create this real quick okay let's go back here path not declared oops I have to refer to everything standard okay I believe this has been red item data saved and we can close the data file that's a good habit all right just to see if we have it let's do a Quick Print item data see if it's properly loaded and I should be able to see the values that are not there I think did I actually set it as an auto loot I did not of course okay now it should be loaded and the values are coded in very good and let's do a set grid data so what we're doing is taking individual items in the item data and setting them or separating them into a more readable array to iterate through what we're doing point in each of the grid values I think we can access item with the item ID and look for the grid part okay and because I formatted with dashed lines I'll be able to split them Dash and let's save the temp crate array with a splitting them with the columns and then we can push it back into our actual grid data once again using the item id as for it oh it's a dictionary so let's do that save it in there all right so once we're done with this we should be able to see something like adjust the grid data values let's see if that works looks good we've parsed all of them and saved into a easily iteratable iterable whatever the word is pronounced structure foreign the data let's actually do something with the data like creating another new scene this one is very simple I'll just use a 2d node to create something called item and give it a texture it as an icon right and then we'll create a script for it and same thing as usual set some path for easy house gaming and a few variables to help us identify the item as well save some useful informations we'll need the item grids these will be loaded in independently from the data Handler and then we'll have a few things help us select them quick and in and a grid anchor this is used for later when we're snapping them into the grid inventory okay so we don't really need this actually I could use them for now for um for debugging I haven't really decided let's figure out as we go all right first we need to load item and we'll load it by giving it an item ID hopefully it's an INT and give it a void return type we don't need that okay so what we want is a path for the for the code to load uh the icons so how do we do that we can just format string let's figure out what it looks like and let's create a change it into well we can load the name of the item from data Handler let's call it uh I think we can find it in item data locate it with change it to stream because I believe in here it was it's an INT and then get it with name and then we can finish it up with DOT PNG of course and uh in here and I believe that will do it now let's put the image into the texture of the texture of Recon texture rectangle with a load and let's change the grid value or rather low the grid value into a a different format for us to do calculations later well we need to place it into the grid container we have I believe let's do string and item ID very good we will use a temporary converter array it's called converter array and for every individual item in Grid or individual point in Grid technically just do a very easy conversion and call it at 272i and let's save them into the item grid save the specific item scene all right that should do it now we can try to load it up in our inventory and see if it works oh almost forgot before that we should probably do a few things the icon all right once we load it up we wanted to do something and let's say let's start with um Let It follow us follow the mouse right when we pick it up we wanted to follow let's do a very simple Global position and use alert function to let it catch up uh logo position and get the global Mouse position let's give it a speed it's 25 times Delta and I think that should do it uh in the start let's just set selected true actually let's first load the item with um just do one and see if it works I'm saving this and running it with F6 looks pretty good and I wanted to follow the center of the mouse so let's go to 2D scene go to Icon and let's leave in somewhere where is the anchor anchors preset so let it follow the center so once we do S6 to run the individual scene we'll be seeing that it is done correctly and it's loading perfectly so so far so good let's go back to the inventory script and let's make the button do something let's call it uh spawner button let's do button it's fun let's go back to the scripts uh no I lied um go to node and let's link the signal the button pressed to here and let's create a on bed and button spawn pressed function so let's create the item scene which I don't believe I've set items seen here so let's do that on ready VAR item scene item scene it's preloaded where did I put the items see right here let's save it in there okay looks good new item item scene instantiate it and let's add it to the uh inventory new item okay um new item dots load item and for now I'll be loading slot one for sake of the easier debugging but later on I'll randomize it so we have different items spawned and let's make sure the new item is spawned uh we're gonna select it is true so it follows our Mouse when it spawned and let's create a different variable to help us keep track of what we have which is say item held okay so item held equals to new item let's go back to item make sure we delete this we don't need to be called here anymore and let's run the whole thing so right now it's that if we click that button we get a item that follows our Mouse that uh just to take a look better I'm going to give them Mouse a few changes let's say spawn item and use the um over override to make it slightly bigger say 12 look too small um 20. 24. what the good enough okay let's play around with it looks pretty good let's go back to script and let's see what we should do next I believe we should start uh check slots for availability with the great information we have now we're just only checking the original slot we want all of them all right and to do that we will be making a few more variables to keep track of things first we'll have a current slot to keep track of what uh slot or Mouse is hovering over and we'll have a cam place as something to see if we can place down the item and then we'll use an icon and curve to help us snap later two two and a few path links see let's do a one ready usually I'll have one for each of the items here in case I need them but for now I only put the things that we kind of need the scroll container and a column count this is how many columns we set previously in our grid container but you know instead of setting it manually we'll just read into the the quick container we had earlier and let's do a set of columns did I spell this wrong I did okay all right that should get us started on creating a few new functions okay so instead of setting this into a different color uh for now we're just going to change them back and so basically when the mouse hovers over slot I wanted to check all the different grids that this current icon or this current item I'm holding is going to take so what I'm going to do is to check um for a few things first I'll set the icon anchor into a very large value you'll see what I use this for later it's kind of initializing this with an arbitrary large number because we're using the the smallest value all right we want the current slot to be saved as the slot scene passed To Us by the signal and then if item held basically checking if we have an item we will use a check slots availability uh they'll have a low ability my biggest enemy and use a current slot to check for it what does that do let's create it right now check slot of a lobility and the argument will be a slot and their technical all returns void but I might not remember that later on so if we can meet if I forget okay so what I want to do is for every Grid in the item held which uh we saved it into a convenience variable item grid cutting grids we the reason I recruited a specific grid and array to save all the the scenes of the slots is so that I can fetch them easy easily with the with simple calculation but we can calculate the grid ID our grid to check ID technically it's an ID with the original slot the slot we're hovering over at the ID of it and add the offset the offset is the grid value we saved in the item grids basically it's adding a specific number X and plus y uh column count times Y which will get us a integer that is the corresponding grid ID in saved in our grid array I think I'll add in the demonstration with some some sort of graph later on once I'm done coding this and we'll also add in the temporary check because in our array it is a continuous line we don't want to wrap around to happen so we will do a quick line switch check in a very similar fashion we will mod it with the column count so that we know which line it is on and then add the x value into it so once it exceeds uh or once it's less than zero that means it's you know gone past the left side or that it exceeds the right side if the values greater or equal to the column count in that case we will just set cam place to false and immediate return this is the case said camplace to false and return because doesn't matter how many other grids are available if only one grid is unavailable that means this item can cannot be placed down we can just return early with that idea in mind we'll just create all the checks to see if the scene can be placed so the second check is to see if the grids are out of bounds of how many grids we have is less than zero or if it's more than words to check more than the amount of slots we have at the largest IOD we will just upgrade array dot size will also return and set the cam place to false foreign to see the specific uh grid is taken or not we'll do that by putting the grid to check oops grid probably copied this into the grid of raid we saved earlier that has all the slots saved inside so if the state of that is equal to let's fetch the same value again if it's a taken State then we'll also say it is Cam Place false Place false and return now if we passed all the checks in all of the grids then we will say it's camplex true so far so good now that I've checked it I want to set it it's in a very similar fashion I'll do a set grids love this and let's um do that right after the check slot um I think uh for the sake of ordering I'll do a call deferred so that it's done after another function that we'll be adding in a moment okay in a very very similar fashion we can just copy a few of it this part is exactly the same you could you fetch every individual grids and calculate the two values with the track and the lines would check so in a very very similar fashion I guess if these goes out of bound you just continue but instead of returning I'm doing continue here because once a cam place is true this means this value or if can place is false that would also work I am going to set the grids into a red color red tin tint right so if it's wrapped around the outside of the grids on the one side on this side uh it won't just make the grids over here red you'll see what I mean about and then uh line switch check we have that done oh for the sake of um security we also check if it's smaller than zero or if it's larger than the size should also continue all right we've done with the edge cases and let's set the grids and finally set the grids it's been quite a bit all right so oops grid array a little fetch the grids to check with a set color such color let's take the whole thing and get the states stocked free this is a cam place okay and simply enough with the else we will just do the whole thing with taken which will give it a red tint corrects to check oh it's grid to check it's a not plural here okay and aside from that we will also save an anchor for snapping it is basically saving the minimum of the grids in there and take the top left corner of the image simply done with a check if it's less then we save it oh it's two parallel comparisons anchor.y grid zero all right let's see if this works we'll spun item it's not working so far after a quick period of debugging I realized I missed the line here uh once I created a new slot or rather when I'm setting the slots ID they're all zeros because I forgot to put them into my grid array so let's do that and add in the new slot and now if I believe we'll now see them correctly very good now of course we don't want it to last so we should create a clear method and let's call it clear grid simple and very easy we list script clear all the grids integrated a great array we have dumb way to do it but effective color uh with the states Dot default the default there we go and we just call it every time our Mouse exits I think that'll do it let's take a look it's pretty good we already have the correct grids mapped now I think we can do a little bit more with um our items let's try to give it a rotation right in the game I was playing recently uh dredge you can rotate the fishes to better clear out an inventory and I found that very fascinating so I'm going to do that let's create a rotate item rotate item function and I think it's better if we put this in the item to because we'll be rotating grids and we'll save all the values into the item grid instead in that case I think I'm going to go into my item script and code it in here so also call it rotate rotate item and we're using a very simple way to rotate them basically derotating Matrix I every time we rotate just 90 degrees a set value and if we plug it into the rotation Matrix I believe we'll get a very simple conversion as x equals the negative Y and Y equals to X I think so what we'll do is let's just create a template a very simple I believe there's a switch vector2.switch page I don't remember what it's called so I'm just going to do a dumb way for now and you my friend whoever's watching this is probably smarter than I am and you can try to look that up how to do it in one line of code but dumb as it is it should do the job all right and we will also want the visual effect to rotate so let's change the rotation in degrees because I'm lazy um at 90. and I believe Godot will infinitely increase the value increase the rotation so let's just for the sake of my sanity uh reset it bound to zero if it's greater or equal to 360. okay I believe that will do let's go back to the inventory and let's finish writing this font so we'll change the we'll call the item a rotate item in the item we're holding let's do that rotation or rotate item and once we rotate it we want to recalculate everything so let's do a clear grid make sure there's nothing on the field and then we'll just for the sake of safety to check if there's anything um if our Mouse is over in any current slot if not we can just skip the step if we're for example spinning outside of name Android if not slot Mouse entered basically we're doing the exact same thing right uh if it's entering we're changing the item icon anchor and then we'll change the current slot doesn't really change so we'll do a check slot availability and then we'll do a set grid and of course let's give it current slot so I believe now the items will oh right we also have to have something that calls this function so we'll be doing that in the process uh first of course we need to go to our project settings and create a input map it's called a mouse right click I think that was the control and also let's let's give it a mouse a left click as well save them and save the inputs responding inputs and let's go back all right so in the process if we're holding an item we should check um if the input is action just pressed Mouse right click so if it is holding item and I just click the right click let's do a rotate item I think that will do the trick let's give it a try looks good and it's following the the correct grid rotation as well and the Reds looks very good okay now we want to place the item down to do that I think we'll be making a few different functions let's call it Place item all right so first once we enter this once this function is called we need to check if it actually can be placed or not if it cannot be placed or there's no slot we're hovering over we simply return this we can in this part we can also add in visual or audio cues to tell us we can't place it down there okay so let's do that let's do calculate grade ID related grid ID so first we want to calculate where we want this item to snap to right this um this image icon to snap to so we'll be calculating that using the slot ID that we're currently hovering over and offset it by the icon anchor that we calculated earlier this is basically top left of your current image or current item the top left most grid basically we will do that multiply by column accounts then we'll just add it to Icon anchor dot oops and screw.y Adams called okay and so once this happens right place item I've calculated the grid ID I will do a snap to function and we'll provide it with the global position we want it to snap to get that we'll just use a calculate grid ID to pick that out from the grid array and get the global position of that global opposition okay and we'll create snap ID in or snap 2 function in just a moment first let's add it to our process function that if we click on something we'll put it down if input that is I actually just pressed let's do left click Mouse left click and it will do a place item call okay so this will call this place item and let's go to the item and actually create the snap function not two destination I think it would be a vector two what so instead of using the process in lerp I think we'll use a tween for this because we're not calling this over and over and let's just create a tween oops get three three one day I'll be able to do it uh without any heavy cups between okay this part is for actually let's save that for one moment uh let's just make the court tween between property property let's do self Global position destination I have no idea which is happening destination and give it a time for it to go there and might as well set the transition to uh sign tween dot trans okay and once it's been snapped to let's make sure it's no longer selected okay give it a try looks like it's uh it's snapping itself to here this is the top left grid and it is snapping itself to the center of the image so we need an offset and let's create that but uh just for to make sure that all the rotation and the degree is correct we'll do a little Case by case saying uh this is only for non-square items if it's Square it doesn't matter but if it's not Square you have to add the slime see which way it's uh rotated the 0 and 180 doesn't matter but if it is vertical it has been that the rectangle has changed its orientation you will need this to change destination icon wrecked change that by half else we will change the X and Y around and do the exact same thing so we'll take the Y component and put in X and the X component put it in y and then you do the exact same thing I'll accept that you change the icon path size into this and now I believe this will do correctly yes very good okay so also make sure once it is placed I would like to get rid of you know the the item held that's checking the spots for free slots over and over we will do that by clearing the um just doing the cleaning up after ourselves so we'll do a few things first we'll change the grid anchor of the item to the current slot this is effectively saving the value of where this item is I believe I've added here it's great anchor the current slot and then I'll save the value of the item into the slots which I'll do it like this grid and put them held Dot item grids extract this this should look very familiar to you and I'm just going to copy it from a previously area here we go and except we are not using this we're using the current slot because in case you move your curse around too much I believe this is safer and let's change the grid State grid array of the grid to check dot state that to a taken state dot States dot taken and we also want to set the item stored into the item held so that not only all the grids uh are now taken they also know what item they're currently storing they have the pointer to this item and let's make sure this one has right this variable very good and after all that I believe we can now go to item held and get rid of it and also clear the grid okay let's see if that does the job as we think it does or to properly test whether it works or not we obviously need another function to pick up the item and in a very similar fashion you can do that right here tick item or item pickup the way it works so a very similar thing to do right if not current slot so if we're not hovering over any slots um well actually let's do it in the correct order so in the process function we want to test all right if there's no item held which is the else component if input dot in is action just pressed a left click basically we're clicking on an item we're clicking somewhere to see if we want to pick up something all right and I'll also to make sure that um this is safe I'm going to see if it is inside like scroll container get global rect remember the scroll container is listening this area right here we want to make sure if I'm clicking outside of it it is not responding to anything and this is the exact same way we do slots we'll check if it has a point that where our Mouse is global Mouse positioned all right and uh if it is in there we'll do a pick item and similarly let's put that check also in here to be safe and this doesn't matter because it's already uh the right click has only one function so once we click left click let's check if it's not our Mouse is not over a certain slot it's not hovering over a certain slot we want to escape or if it's not uh the current slot does not have any item current slot dot items stored if it's null then we just return nothing happens and now let's go here okay let's give me some more room here item held is now the item in the slot stored in the slot give it that and now item held let's change make sure it is now selected and for each Grid in the item held dot item grids right we are fetching the information from the item the item scene we do a very similar thing we are doing the variable grid to check but it's equal to item held dot grid anchor this is the 0 0 right the ID of the zero zero slot and then offset it by whatever the current grid is we're looking at here in point a similar way of doing it the outside the offset X Plus y times column count okay and let's put it or look for it in the greater rate the container give it the grid ID grid to check and see the state of it or set the state of it em declared um item held not item all right set the state into free once we pick it up thoughts dates dot free and similarly let's set the items stored into null because we picked it up and after all that uh let's do a check slot availability of the current slot because once we pick it up it is now looking for a open slot and whichever slot it was picked up also counts and the same thing set grids and do a call at the Third of the current slots okay now let's take a look to see if this works pick up another item not gonna pick it up put it down pick it up put it down okay let's see if it's overlapping with another grid it is going to be red it looks pretty good and let's see if the rotate also works yes yes yes yes looks pretty good so far okay now let's do a few cleanup work uh to make sure things move as smoothly as I I would hope for so first let's when we're loading the item in the um Mouse button first instead of loading the exact same thing let's do a random integer actually let's do random range I range there we go oh and let's do one and four because we have four items here let's take a look take a look so we have different items and they all look like they're um you know working the same or working as intended I can play this all day okay so another thing I want to clean up is this is scalable as I've promised it is in the scroll container for a reason so let's let's give it a few more let's let's give it 90 slots lighting for slots so you can see this is currently happening here so if I what happens if I attach um an item to one of the grids and they roll out of Bounce right they don't follow and I don't like that right I don't want this happen and if you're you know dealing with this I'd rather have them work in the in a better way so what I'll be doing is I'll be moving the item around in the scene tree so that it would follow the grid container how do I do that let's take a look let's go to place item so once I put it down I will move the item held into a different different parent so let's do get parent get removed child basically remove itself sorry remove the item held from the scene tree which is the base of the inventory get parents remove child item help actually before doing this let me give you a quick look at the scene tree what it currently looks like so this is the main inventory color rectangle blah blah we have the scroll container and we have the grid container with all the slots and now if we spawn an item as I've created it has created a parallel rather sorry um right as the child of an inventory if I create more we have more items right we have more items uh when they're here they don't they're not bounded by the grid container so what we want to do is when we place it down into the inventory we want to place it down into the grid container so what we'll be doing here as I promised is uh remove the child from the the base inventory scene tree and put it into the grid container which we already saved a path to ADD child of the item held and uh to prevent some jittering which will happen like this we will just set the item held Global position to our current mouse cursor position Global position goes to get Global Mouse position so right now I think it should do as intended all right let's take a look at the remote inventory color now it's no longer here as you might notice it is now in here as an item okay so now when I scroll up and down it will no longer be in view and I think works pretty well it is now a scale and when they're outside they're not selectable either very good so the problem with this is if I do that go inside and when I pick it up it is now still inside the grid container we don't want that once we pick it up we want to move it back into the outside of the scene tree which we can do with a very similar way of doing it we just in here um let's put it let's put it here okay we are changing the item held because we actually do need to store it that's why I put it behind item held and let's get the parent same steps parent start to remove child remove it from the current position current scene tree and then add a child to well the the script which is inventory the node attached the script or the script attached it no do you get the idea item held and same thing let's do item held make sure the global position is set so it doesn't snap Global position as get get Global Mouse position now I believe it will get uh forgot a parenthesis here okay now it's now outside but when I scroll it it is now inside if we look at the remotes okay when I pick it up it is now outside you can see um outside of the the grid and then when I put it down is I move inside the grid and I can just do this forever it is quite a fun game to do I would say and there you have it a great inventory a scalable resizable grid inventory all right and thank you for watching

Channel: MrAlphredo

Views: 12,791

Keywords:

Id: WN40PrPRDXs

Length: 76min 2sec (4562 seconds)

Published: Mon Apr 24 2023