Godot UI Tutorial | Godot Inventory System Part 1

hey guys welcome to this first part of our advanced tutorial for an inventory system made in gold up 3.1 in this first episode we're going to be creating the user interface - which will add functionality in the upcoming episodes before we start let's have a look at the end result as you can see here we have a basic inventory system with a background we have different tabs to open our different inventory categories we can select weapons which will show up in item inspector we can compare different items by clicking the compare button in which case we can see Charlton's at the same times to determine which one will be better for our build and of course once we have an item here we can click the delete button to delete the item from our inventory to finish it off we have a go like an encounter to see how rich we are as for the project setup I've got a folder with the art here we'll be using a double-edge background and a paper background we also have a wood panel background and icons for both gold a close button and a trash bin as for the project settings in goda is important that on the project project settings display window I have set the width and height to 1280 to 720 that's not required you can enter your own width and height but keep in mind that the pixel I'm pixel count I'm using to determine the size of different windows and different elements of the window will be based on this width and height also it's important that you set mold in 2d and aspect to keep to get the same functionality when it comes to responsiveness on mobile devices that I'm getting in this example now let's draw this puppy out to start we're going to create a new scene a user interface and I've accustomed myself to renaming everything immediately to make sure I keep an overview so I'm creating a new note this isn't gonna be a container mode in which we put everything else and to that note I'm going to add a texture rectangle which will be my [Music] double-edged background with expand on so that the window the element size doesn't automatically resize based on the art picture size I'm going to add the doll edged and under layout I'm gonna put it a full rectangle now I prefer my UI menus to show a little bit of game running in the background so I think it helps with the orientation of the player so on the margin I'm going to add a little bit of margin in my case I'm going to add 30 pixels now I think this double edge is taking too much space of the inventory system and it doesn't look that great like this so I'm going to add the next background which will be another texture rectangle I'm gonna overlap it a little bit my game with expand on I'm going to add my paper background which I'll set it to full rectangle this time it will be a full tangle to the parent which is the already margins double edged background now if you fiddling around a little bit with my margins and it should be around this for me to get a sort of depth within my inventory panel with our background created we're going to quickly rename this element so we keep an idea where we are and then we need to add our elements when you add elements to Godot it's important to think whether they're vertically or horizontally aligned with each other so in our case if we look at the example we have a header which consists of a menu title and a closing button we have all our main elements and underneath we have a little bit of margin too from the menu - those are vertically aligned and if we look at all the main elements we can see a horizontal alignment of a pair of buttons in the icon and a counter our inventory slots and all the way to the right our item inspectors and delete and compare button we need to recreate this by using V box and 8th box containers it's important that you think about this because when using VBox and each box contains correctly you can create a very powerful user interface which will also be immediately responsive to any screen size to start we're going to add a third feed box container which will have all our main elements now within our main feed box container we'll add three assert to hbox containers and I'm going to use default duplicate all the way on the bottom we're going to add a label I'm used for margins to create margins when a user interface I usually just add a label with assets size that way I'm I find it much more easy to have the menu respond responsively and not reset itself to exclude the margin so for our margin this is going to be a margin underneath so I'm going to set the minimum size to 20 and that will be our margin from now on as we said before the first box is for the header and the second box the second container is going to be for our main elements with these elements set up let's make sure that our V box container expands as much as possible this will be important later on so on the layout we'll also put this one to set full route angle to its parent now let's start making the header I'm ready header I'm going to add a label which will be our menu title and I'm going to add a texture button which will be our exit button on the menu title I don't want to use a standard font winning goal of because the possibilities and the variables would understand that font are very limited so I want to add a custom font for that I'll add a new dynamic found under the custom font property I'll click it once and under the sub menu that pops up our font and say Salo and i have downloaded a font colonia which I'll be using for this tutorial now with this loaded I can set the settings I can set the size to 32 and I prefer my farms to have a darkish great color to make it easy to read if those settings set our inventory and I'll add one space for a little bit of margin on the left hand side now at our exit button I want my exit button to be a size of 50 by 50 pixels and I will use expand on to make sure that when I add a picture that doesn't resize by itself under Texas I'll add the normal texture add the red crust in the normal texture now as you can see the red cross doesn't automatically position itself in the right hand corner of the menu where we want it to be don't start trying to move the button within the properties of the button itself instead when you want to create a responsive menuhin in goda you have to use other elements within the edge box and the V boxes to push elements where you want them to go so on our case we're gonna set inventory to take as much space horizontally as a can by setting it to expand by doing so the label will take as much space as it can thereby pushing the exit button all the way to the end if I select my viewport which is the 1280 by 720 we set in the settings and I would resize it as if I have a different screen size you can see that my menu is now responsive horizontally we have to set the same sort of setting with our margin as you can see now our margin is located just on the inventory and our main elements is a very one pixel a very small 1 pixel high line on the whole horizontal side of the screen we want to set this main elements to take as much space as it can we'll put that vertical and we're good to expand now you can see expanded all the way down here and down there is the margin which is left and which will create our margin on the bottom of the screen we remain elements we of course also want margins on the left and the right hand side so that adds those as well we have two labels we can duplicate these and on the rectangle will set the minimum x size on the x axis to 20 now for ease of reference I'll rename these margins with all this set up we can start adding items or elements to our main elements and create the actual user interface of the inventory let's first have a look what we need to add we have a vertical box with different buttons and I can an encounter we have a scroll container for in which we can scroll vertically and inspect our inventory slots and we have a vertical box which consists of both our item inspectors and a compare button and a delete button to add these we are first going to add our V box container for our different buttons these are tabs within our inventory also we can add our scroll container and scroll container immediately gives a warning as it only functions with either a th box or a V box container so let's add those two and all the way in the end we have another key box container so I can duplicate this one with D drag it down here and call item inspector with all that done we can start setting the space that each of these free elements can take within our user interface for our taps I don't want them to be too big but also not too small so I'm going to set a set size of 180 pixels for the item inspector it's the same story we don't want it to be too big but we also don't want to become too small when it needs to be responsive that stats are not displayed properly anymore so we're going to add a set size of 300 now for our scroll container which will start will contain all our inventory items we can have a little bit of a margin there to create the responsiveness that we need in the horizontal axis so we're not going to set a set size to the scroll container I'm only going to say that it can take as much space as it wants to on the horizontal axis thereby I have we can see the crosshair here a taps button taking this much space a scroll container in the middle taking a responsive amount of space an item inspector at the end with a set amount of 300 pixels now let's add our first button to the tabs I'm going to add a child it's going to be 8 texture rectangle and I'm going to rename this to weapons to that I'll add another child which will be a texture button which I will give the same name and to that button I want to add another child in this case a label so we can label our button now I want this button to have a set size of 180 by 70 I'm going to add a background to this panel and this will create the contrast so that you can recognize the button as clickable with that set you can also include this within the texture when you create your own custom buttons but this is a quick tutorial although on advanced features that I'm simply using a few simple art elements for for a weapon step I'm going to set it to fully tango layout of its parent and again with expand on I'll add a paper background to the normal texture then with that set I'm gonna give it a little bit of margin from its parent to reveal the edge of the wooden background in the back with the label again I'll set it to full rectangle and I'll give it to the name that we want to show as you can see it immediately takes the standard custom the standard found of code up which we do not want so I'm going to load up my phones and all these phones are the same phone as you have seen me set up earlier but then with different sizes so this is a 24 font size set up I'm going to set the aligns to Center so our button name is centered and I'll add a custom color [Music] and have a dark gray as the color right now it's not a functional button yet we'll do that in the next episodes but for now let's copy this tab or this button five times and rename all of them now I've renamed all our notes for all the tabs so all these are now consumables and weapons armor crafts and consumables others have also included those names within all the labels within each button now we can add our gold item which will be a texture rectangle and we can add gold counter rule which will be in a label we rename this for easy reference in the future and will expand on we set the rectangle size we need a retail size of about 180 by 90 for this particular texture and for the cold counter we again will use a custom font in this case we're going to use 30 I believe and that's just test an amount here next I set the color tube again for this tutorial I'm going to be using the same grade on every item or any text that we need to set please change us to your desire as you see fit with that done we have our first section of our inventory now let's hard on to the next section which will be our actual inventory items this is probably going to be the most complex part of this tutorial if you have any questions about it please leave your comments down below you can also find me on Twitch I'm streaming every Tuesday and Thursday in evening European time the times for both Pacific time and Eastern time will be down in the description below for our scroll container which I have not renamed yet with a purpose we already have installed our VBox container and within the feed box container we are going to add the horizontal containers the H box containers for all our inventory items now we have to make sure that these containers take the amount of space that they are allowed to take so we want this the third of our box container to expand as much as possible and also want them to expand as much as possible vertically for our H box containers they already take the amount of space that it can horizontally but we need to set a set size for these H Box containers now I want their size to be 70 I think that's a size that works very very well for the aesthetic for the visual effect now as for our name I'm going to give this the name 101 and I'll explain why I do that later but it's going to be very important for our future functionality when we're going to add code within one container we of course want to have the icon of our item that we have in our inventory for that we're first going to add a texture rectangle for the background and we need the texture rectangle we will add a texture button [Music] now our texture rectangle we can name this the icon background and we can rename this to an actual item button the item background will expand on I'm going to resize this to 75 70 Square and I'll add my double edge so this is going to be a empty inventory slot to which we will be able to add a item button the item button is going to be a layout full rectangle in the future once we lose something or once we are gifted something when something comes within our inventory we'll add a - this item button and that way it will pop up in our inventory of course we want to be able to keep the double-edged background for aesthetic reasons so we need to give this item button a small amount of margin in my case I'm going to add minus 4 but depending on your window signs and the textures that you use it could be a little bit different you can have to fiddle it around a little bit with that now as a final touch I'll add a label to our textured button and that label is going to be a fixed rectangle of a 65 by 35 and I'll immediately add the font to this label and I want it to be size 24 it can stay white that's no problem for our layout I'm gonna put it in a button right and I want to make sure that it aligns the way I wanted to align and it does so perfectly what we're gonna do with this Lela it will have no function within the weapon and the armor tab as I don't want my weapons and armor to be stackable but for every other stackable items for example in our crafting iron bars are in ignites iron or whatever or the consumable health potions many potions you name it you want stackable items to have a number show up within the icon so you know how much you actually have that is where this label will come into play in the future with that done we only have to add one more element for our first inventory slot to be finished within our for a horizontal container we want to add one more child which will be a label and this is going to carry our item name so our item name pops up in our inventory now the item name is going to be able to take as much space as it wants both vertically and horizontally and of course you want there to be a nice font in this case I'm going with a size 30 just exit out I see me soon change the color so we're gonna use a font color again I'll use in the same gray and for our alignment we wanted to align in the center open up that center there in the center so now our whole inventory slot one single slot is finished now to add these functionality to all the slots all the different inventory tabs and to all the slots that we have we're going to be using a lot of copy pasting and when you do this copy pasting in the right order you can actually make this quite easy for yourself first I'm going to delete the word Swart as we don't want to have sward everywhere within our inventory slots I'm going to rename our scroll container to weapons this is going to be the weapon stack where as the armor tab you might ask well we copy it in here so this is going to be our armed tab and we're also gonna copy in a crafting tab we're going to copy in commissionable step and we copy in copy/paste another other tab now I have five scroll containers each for the different elements all five of them are showing at the moment but we didn't see that in our example what we're going to do is we're going to hide all these other tabs until one tab is only visible we're going to code in future episodes how you can code it when you click one of these buttons it will unhide this that's particular tab and it will hide the tab that is currently open there by opening a different inventory screen as for how we can make sure that we can reference the the right boxes for putting the right items in the right inventory that's where this naming system comes in so for all our weapon slots they'll start within the 100 series or our armored slots will in 200 series and so forth for our crafting our consumables and our other [Music] with that or renamed we can now duplicate these items and data automatically go does naming convention will make these 101 to 110 and we can add all those items all those inventory slots for the difference scroll containers containing our different inventory sections now make sure that you first copy past the scroll containers before your copy pasting the item elements else you have to be renaming ten elements in it in every scroll container and if you first copy the scroll contains yum you have to rename one with this all done we have finished our second section of our inventory panel and we can move on to section number 3d item inspector before we start let's have another look at the example to see what we need to make we have two item inspectors which are almost identical and we have the bottom section which has a delete button and a compare button to activate the second inspector to create this let's first set our main elements for the item inspector we're first going to add a vertical box container for our item inspector number one I won't be adding the item inspector number two yet as there are almost identical copies to each other so I'll be copy passing that later now the next we want to add a horizontal box container for our buttons below and we want to have a little bit of margin between the two of them just for the aesthetics so for death we'll add another label which I happily miss use for our margin and let at another 20 pixels of margin to that label let's start by adding our buttons for our trash bin we're going to have a texture button the size I'm putting up to 100 by 100 pixels and we've expand on I will drag the icon to the normal texture as you can see the texture is currently all the way on the top we'll push that down to the bottom later on now for our second button our compare button this is almost a exact copy of one of these tabs so I'm simply going to copy that and drag it down below next to our trash bin let's rename it to our compare let's rename the actual button itself to compare and let's rename the label as well as you can currently see our compare button takes as much space as it can vertically and for aesthetic reasons we want all the buttons to pretty much look the same therefore on the size flags I'm gonna deselect fill and I'm gonna say to shrink to Center that way it will retain its original size and it will Center with the trash bin to make sure that these buttons are all the way on the bottom let's set go to item inspector let's go to the science flags and say that it can use as much space as it wants to vertically there by pushing our buttons all the way down now as you can see right now we are having an issue with our margin all the way down here the reason is that it has been pushed beyond the screen we can fix that by going to the vertical box of which it is part as you can see it is no longer part of your you know layout or the original size layout of the paper background we can simply reset that like on full rectangle again pushing everything up and as we have said everything in relationship to its parent and not with actual anchors on actual positions of the screen or on your menu you can very easily make these sort of adjustments and everything will move along with it let's finish this part up by renaming our button to trash meant for future reference and we can start with the item inspector under the item inspector we're going to add a label and in that label in the future when you select an item it will show the actual item name for now let's go with a dummy text of item inspector so you can see if we have set up our text correctly for that we're going to Center the alignment vertically we're going to change the font size sorry the font color 240 and of course we have to add a custom font in this case we're going to add 30 now let's add the rest of the functionality to the item inspector for that we add a hbox container and within that hbox container we want both the stats and the item icon now for the stars I'm going to add a scroll container because right now maybe our weapons or the IDS already have like two three or four stats on our weapons or armor but in the future we might add with expansion legendary equipment with many prefixes of prefixes and suffixes with many magical properties in that case when we have two item inspectors underneath each other to inspect both items and compare them we probably run out of space to display enough statistics within this space given within the menu so by adding a scroll box container we can prepare our game for future expansion or many magical items within the game so our H box container will be allowed to take as much space vertically as possible and we're going to add a scroll container which will immediately ask for I'd rate each box of d box container it's going to be a V box container again in our case and to that each box container will add a item icon and we'll be doing that with a texture rectangle let's rename all these items so there's going to be the item icon and within movie box container we will have our stats now for the scroll container also the scroll container can take horizontally and vertically as much space as it wants to and the stats these are going to be a fixed size [Music] maximum size vertically and horizontally within this vertical box container in the scroll container just as we did with the inventory elements we're going to add horizontal box containers which will have all our labels to display the information we want to display so a single each box container will consist of two labels and these labels will be e-stat name and the static value now for both of these I'm going to add a custom font in this case I'm going to add 24 [Music] good of them is easier if I would have done this first and copied them afterwards but for the sake of demonstration I'll add more like this let's add a test name and the test value as you can see we currently are not getting exactly as we want it because they don't take up the space as if we would want we want to nice columns underneath each other in order to do that we're first going to set up a set size for the item icon in this case we'll use the 75 70 I con so when we add an icon in the future with expand on through the code it will have a size of 75 70 and we want these that name and is that value to take up the space that is available equally divided among the two of them to do that we're going to set both of these labels to expand horizontally as much as they can and by setting this up for both at the same time they'll share the space available creating two eek sighs labels and that by creating two nice columns arranged as as we like it now for this ice box container we can reign name this to the actual staff that is within the the stat name and the static value and we can start copy pasting this and renaming them as we see fit and thereby of course having to change the labels now off-screen I'm going to add a few statistics so we can add a copy pass the second item inspector in there and after that we'll round up this tutorial and the visuals of the user interface will be done and we'll talk later about a little bit about future episodes what you can expect and what functionality we're going to add to this inventory here we are I have added attack/defense agility intelligence wisdom HP armor penetration stun and bleed as statistics for the different items that we could have and now we're going to add the second item inspector by copy pasting in the second inspector we can immediately start start by seeing that the scroll container works it puts everything in order and both of the item inspectors take an equal amount of space now what I don't like is that there are so close towards each other so just for aesthetics reasons I'm going to add one more label for our margin between these two inspectors and I'll add a small amount of margin maybe even less than the other ones this time our margin of 14 by separating the inspectors as I see or as I desire now with all of this done we have created the user interface that we will be using in the next and upcoming episodes of this tutorial series to add our inventory items now what you can expect for future episodes is that we want to create a loot chest and which also includes the user interface for a loop panel that will also include a generation system to add lose to that specific look chest and then how we can use buttons like loot all and looped a single item to make sure everything goes to our inventory item in the right slot based on all those number identification the 101 to 102 mm and a 201 to the 202 10 to make sure that everything is properly managed we also of course want to add functionality to the window itself adding functionality for pressing different tabs to open different inventory parts and of course we want to be able to select items within the item inspector to compare items to delete items we want to be able to look gold and we want to be able to loot bosses or mobs all of those functionalities will be very similar to the functionalities of a loot chest we also want to make sure that we have something like item tables and loot tables so for that will also be including jason import within Godot and of course once we close the game we want to be able to save the game so we're going to add a item saver that saves our inventory to JSON and how you can load that JSON file like an on game startup all these are sort of function function a letí's which surround the inventory system will all be included within this series if you're excited to continue this project together with me then please like and subscribe to make sure you don't miss any videos press that Bell icon too and again if you have any questions leave them down in the comments below or find me on twitch I stream every Tuesday every Thursday European time in the evening and I'll include the times for both Pacific time and Eastern Time down in the description below come hang out and ask me any questions regarding Godot or game design in general during the stream I'll be happy to see you there until the next video see ya

Channel: Game Development Center

Views: 30,332

Keywords: godot tutorial, godot ui tutorial, godot user interface tutorial, godot tutorial user interface, godot tutorial ui, godot UI, godot ui design, Godot user interface, godot inventory tutorial, godot tutorial inventory, godot inventory system tutorial, godot inventory, How to make a user interface in godot, how to make an inventory in godot, godot, tutorial, inventory system, inventory, game design, game development

Id: ec17gemiKpw

Length: 37min 27sec (2247 seconds)

Published: Mon Sep 02 2019