Equipping and Character Sheet | Godot Tutorial

in this godot tutorial i'll teach you how to make this character equipment panel this will be the first episode in a mini series of episodes in which we'll also make an inventory panel to go along with that one and a drag and drop functionality including the proper data backbone to ensure that you can program this into your game let's get started i'm here in an entirely blank project follow me along as we set up the basics first thing we need is a main scene that can start up when we load the game i'm going to select another node and i'm going to make this a normal node i'll rename this to scene handler which is usually at the top of my scene tree which handles all the scene switching now we've seen handler we're going to save this and we're going to save this under a folder i already created scenes i'll save it there you can see the folder structure i've got for this project right here so if you want to follow along one on one you can pause the video and take this over now with this done we're going to go into project project settings and under the run right here we're going to set the main scene to that scene handler some other projects that we have to set is under the window settings under windows settings we want to set the width and height to 1920 by 1080 or at least that's what i'm going to be doing because i'm going to make this sort of like a desktop tutorial i'll not select full screen because just super annoying when you're developing and testing select that once you start exporting for release and we set our test width and height to 1680 by 1050 so it doesn't take up that full 1920 by 1080 we can drag it around a little bit and check what the editor is doing if the editor is throwing errors whatever underneath here we want to set the mode to 2d and the aspect ratio to keep to make sure that everything stays nice and tidy and doesn't resize in any weird ways next up we can set up a basic scene structure this is not absolutely required for the tutorial to work but it will help you navigate this project and where to plug and play these various elements into a project that you may already be working on i'm not going to be emulating the game menu or any of the scene switching we'll only be doing the main sequence this can be either a 2d scene or a 3d scene that's up to your choice and what kind of game you want to make this is a user interface tutorial so it applies to both of these dimensions i'm going to make 2d scenes because well i've got to choose something i'll rename this to main and a main sequence is always accompanied by a canvas layer node the canvas layer node helps us to project our user interface elements in front of everything else we'll rename this to user interface and the user interface pretty much consists of two different kinds of user interface elements we have the graphical user interface and we have our user interface panels you want to make sure that your graphical user interface panel i'll rename it here immediately set to full rectangle layout is on the top of this canvas layer node that we re named to user interface therefore any panel that we instance into the world a character sheet an inventory a skill book quest log whatever is going to be a child of ui will therefore be a child that's underneath gui and therefore will be projected over the graphical user interface that way you can drag your inventory over your health bar and over your skill bar and it's really just on the top while you're working in that user interface panel now of course we would want this character sheet to be instanced into the world when we press a button or hit a shortcut i'm not going to be programming that so we'll just make sure that it's always on here to do that i'm going to go to scene i'm going to go to a new scene upgrade this time a user interface that's automatically the full layout and i'll rename this to character sheet now i'll save this scene under my scenes ui and i'll save my main menu under scenes main now with that done we can go to our scene handler and under our scene handler we can instance the main scene and in the main scene on the ui we can instance the character sheet again normally you would have the scene handler only instance in the main scene after a new game or low game is pressed and you would have the character sheet only instance into the user interface canvas layer when the player presses that button or hits that shortcut now we have set up sort of our tutorial project and if i play the game now you can see our window of 1680 by 1050 and when i go to our remote explorer you see our route our scene handler our main scene with ui with that character sheet in there so now we're ready to go and whenever we test something out it will be projected onto the screen now we can start working on our character screen and for that we're gonna need some assets i've already imported mine into the project i've got a font to make the text look better i got these two icon icons of a shield and a axe to play around with i'll add more as we go in the series and i've got these elements for the user interface to build the panel with for example this chest so that the player visually knows what kind of piece of equipment goes into which slot but also things like this inventory background uh picture now with that set you can get these kind of elements and icons anywhere you can draw them yourself in photoshop krita or or you can even use paint for all i care you can also get some free packs from hio and opengameart.org i've got this particular pack of which these elements are only maybe like two percent from a professional pack from the unity asset store which is pretty much plug and play you just take the textures out of unity put them into go that you're good to go um cost me five dollars on promotion i believe it's ten dollars now so if you're looking for a quick start with all the elements you would need for a professional ui that is a a method you can or a route a path that you can take as well now let's start with that background for the background i'm going to be adding a nine patch rectangle to the scene tree and of course i'll rename it to background now a nine patch rectangle is only necessary if the original texture that you are using has art elements and the original texture size is not the same size as you intended to be that means that if you're making your own art and it's fit to size then you would be able to use a texture rectangle instead of the nine patch rectangle however i've got art that is decorated so i have to use this night patch rectangle and you'll see why that is necessary i'm going to go into rectangle i'm going to change the size i'm going to go for 580 by 690. i've calculated that before and i'll put it a little bit out of the corner later on in the series we'll also make sure that this entire screen is draggable around so the player can position it wherever it wants for now for testing we'll just take it a little bit out of the corner with that said we're now going to go on the texture we're going to draw this inventory panel and here we are with our background now the problem with these sort of decorated art elements that are not exactly fit to size is that the scaling of the texture is done over the entire length of the texture both the width and the height that means that this art element which is basically a square but then only oh let's say that the height and the width of this art element is intended by the original artist to be exactly the same however it is not the length the height i should say is stretched out while the width is not and we can change that here with the patch margin in a nine patch rectangle if i were to change this top from zero to two hundred you you focus on that art element you can see that it sort of compresses it back in and it now closer to what it's intended to be the actual value i need is 230 and you'll see that the last little bit of tail of the art element here is now also shifted in is compressed in and now it has the right dimensions which the original artist intended with this pack now with that we also have to do the button also 230 i don't have to do anything with the uh the width as the compression the the size that the texture started with and the size that i wanted to be makes that there's currently no c weird compression or stretching from the width of this element so by using this nine patch rectangle i can make sure that the original artist impression that was you know the creativity of the original artist is is kept in how i'm using the art and there's no weird stretching or compression so now comes the fun stuff because we have to start sectioning this panel up into its various elements we need a left row of equipment slots a right row of equipment slots and in the middle we want the name the level the class the silhouette and the main and the offhand equipment slots now this is where people start to either hate godot's control notes or they absolutely love them i absolutely love them and i think it's a super powerful system but it can take some fiddling around to understand it so i thought instead of just going through a super fast sequence of exactly things that you can copy paste in your project i'm going to take you a little bit through the fiddling around with these notes so you don't only learn how to copy paste what i'm doing but you actually learn how to use the control nodes a little bit more and apply that knowledge to other user interface panels that you may want to make so with that said to section up this entire background we first need to separate it we do that with an hbox container so go to our background and we'll add the hbox container to the scene tree now it starts small so we want to set the layout of full rectangle and let's start now with adding the v box container for the left section of the equipment slots we use a v box container because we basically want to section that element up into five different sections for the various equipment slots we need to add so on the hbox container we'll add a vbox container now the vbox container starts out small so let's give it a little bit of size and let's say that your rectangle you are 110 well that's not enough but we don't want this border art here on the left side to be included we want the elements we'll be adding to this v box container to be nicely centered in front of this orange brownish background so we want this v box container to exactly overlap that yellow brownish background so we can set the margins this will be the first thing that most people think to do and of course now we got it right there but we see okay our box is not big enough so let's size our box up to the correct size and you know you're fiddling around with that you set it 218 and there you go your margin has reset and that is annoying and that's usually where people go crazy and pull their hair out and i can understand why so my solution is to use position and margin as little as possible my solution is to not start with the vbox container but we're going to start with a margin container at margin container we're going to set the size of that margin container to 12 pixels and of course we have to drag it in front of our v box so that it's in front of the panel here so now we have our margin container taking up the space for this border and we may have to make it even like 13 that might even be a little bit better and then we can set that v box container that has to be 117 size then we can set that to take up take up the next space but as you can see our margin container and v-box container have a slight separation there's a little bit of padding between the two that is because this hbox containers custom constants are not being activated yet so we want to check the separation here and we want to leave that separation at zero that way this margin container and v box container are gonna snuggle up nicely next to each other so now we have the margin container and the v box container i should zoom out a little bit the margin container and the v box container so that works properly now now if you resize it to for example 119 the vbox container stays where it was in terms of the left side of the background because the margin container is there and it cannot push that margin container away so of course i'm going to reset this to 117 and we're good to go now the problem is we also got some some elements on the top here and of course we want these five containers these five equipment slots we'll be adding we want them to nicely space out so we also need some margin on the top to make everything look good to do that we can use the hbox container and put that in a higher hierarchy vbox container so that's a little bit the world around but let's add a vbox container we'll make this hbox container child or vbox container so instead of starting out and splitting this screen up into three horizontal boxes i'm gonna start and split this screen up into three vertical boxes the top box being the margin container for the top then the horizontal box which is going to be the divider of our main elements and then a margin container for the button to make sure that everything is nicely organized and neatly together so with this v box container i'll add a merge container and oh before i do that i see i first have to set the layout to full rectangle here then we'll add this margin container we'll add another margin container at the bottom we'll set the margin container at the top rectangle to be a minimum y of 12. we'll do the same on the bottom rectangle minimum y to 12. now of course we have to set that custom constants as well as separation zero so also these elements snuggle nicely up to each other and you can see now the hbox container has resized itself it's not the layout anymore because previously we could when the hbox container was a child of background we could set the layout properties just like we could set the layout properties of this v box container but now that the hbox container has become a part of the vbox container it is the behavior of the vbox container which determines the size of the hbox container so there's a hierarchy difference there that's very important to know that you think clearly about the structure of your user interface panel because as you can see if you change the hierarchy sometimes this means that things are going to be resizing even though maybe you don't want them to resize so we now have this margin container this margin container and basically the hbox container one pixel high in between now we can change this by setting the hbox container size flags to expand vertically that means that this hbox container is going to take as much space as it possibly can within this vbox container taking into account the other elements and that's why we have set the size of this margin container not to be size y12 but the minimum size y12 because we have set it to minimum size if we set the hbox container to expand vertically as much as possible it's not able to shrink the margin container because the minimum size of it has been set so we're going to press expand here and now you can see the hbox container has pushed the margin container on the button all the way down and the hbox container now has the right elements or the right size in relationship to our brownish yellowish background i'm not sure how what color to call this now within the hbox container we still have our margin container on the left of course with the heads cut off and our v-box container is now exactly the orange panel in the middle now with that done within this hbox container we can draw some quick duplicates because we also need a margin on the other end of the screen and we need another v-box container so we can duplicate this one on the other end of the screen now in between here we of course need a big panel and the question is how big does this panel need to be well the answer is we don't care we're just gonna add a new panel there this can be a control node in this case and we're just going to tell this control node size flags to horizontally expand as much as possible as we have set these v box containers minimum size instead of their absolute size they know exactly how big they are allowed to be and that means this control node cannot push them anywhere smaller than that minimum size so with the both of the backgrounds to be at symmetrical sizes we now have this control node which is exactly the same size everywhere now we of course do want to check this has worked out properly and although this one looks a little bit a little bit too big so maybe this margin container sometimes that's in the art sometimes it's in the in the shadows to give it a little bit more of a 3d feel so now this hbox container this looks looks pretty good although this includes the border and that's maybe not so nice so we'll make a small adjustment here make this 116 maybe even 115 yeah that's better and then we'll leave the control node a couple of pixels bigger that's absolutely fine so now we have a perfect separation feedbox control and another v box of course you want to rename this a little bit to make sure that it it's more clear what we have done if we revisit this panel a couple months later and we also want to make sure that all these names are not so unnecessarily long so in the code our note references are going to be a little bit shorter as well so we'll quickly rename this vbox container i've got a new custom i'm just going to call this v margin container we're never going to reference there are not really a problem here hbox container we'll just call this h or we could even rename this to main as this is holding all the main elements now margin container we don't really care about here we got the left equipment slots we got the right equipment slots and we have our middle panel i keep my names intentionally short so once we start coding and we need all these note references short shorter names is is handy for how long your lines of code are going to be okay with that said let's start adding the first equipment slot with the equipment slot we want to have a stacked texture rectangle we're going to have a textured rectangle for the background and then we're going to have a texture rectangle for the icon that goes inside the background inside the slot so let's just make the first one we're going to go to our left equipment v box we're going to add a child node and it's going to be a texture rectangle as you can see as we bring that in it's one pixel high and it takes the full width of its parent v box container and we don't want that we want this to be a hundred by a hundred now don't start and try and set these size parameters right here it will resize itself anyway because its size is governed by its size flags so you want to go down to size flags these determine the behavior of how this element is sizing itself inside its parents so we want to go and select shrink to center for both vertically and horizontally and as you can see from the the outlines we now have an equal amount a symmetrical amount of padding on the left and the right side as is now centered in its parent and we set the parent v box container to be exactly over this brownish yellowish background that's why it was so important to set those margins up so that now we don't have to change anything in terms of like margin or positioning we can just use these size flags and everything is positioning itself automatically the way we want to so with this done we can rename this this is going to be the head so this is where helmets are going to go we're going to go to the top we're going to set expand on so that we don't get any weird resizing and we want to drag an inventory frame in here now the asset pack if you use this asset pack or if you already bought this when it was on promotion in november it comes with this inventory frame which is just the the frame itself and it comes with this little background frame which is like a frameless background i've combined this into this inventory frame background in photoshop so if you can't find this element in the pack itself but if you combine those two elements in krita photoshop or any other program that can do that there's a couple of free ones out there don't worry you'll you'll have no problem we can make sure that we need one note less per equipment slot so with like i don't know 12 equipment slots that's 12 less nodes in the tree and less is always better as long as it has the same outcome so with that set i'm going to drag this uh inventory frame background into the panel here and as you can see that looks pretty good already now we need to add that default icon in here so we're going to add another texture rectangle underneath this texture itself with this texture rectangle selected we're going to tell this texture to be the full rectangle of its parent so it's going to take the 100 by 100 size that we just set to the first texture now we can rename this to icon with icon selected there we can go into margin because we wouldn't want it to overlap i can demonstrate that to you if i said expand on i'm going to take my helm background i'm going to put it in there you can now see that we have lost the borders of our inventory slot that doesn't look very good so i'm going to set the margins to be four by four by minus four by minus four and now it positions itself nicely within the border now with that done we of course want to space this out and we need a couple of them so to get a couple of them we're just going to duplicate four of these in here and we can rename this and i'll rename this and i'll drag some textures in here so you know with the magic of editing you don't have to sit through this all right here you are lucky fellows that you don't have to sit through that now we've got our five items in here head neck chest legs and feet with their correct corresponding icons of course we want to space this out a little bit so we're going to select the left equip v box we're going to turn on its separation and i believe 20 is a pretty nice separation now of course we want to push everything down a little bit and we can do that very easily by adding another margin container to the top here and i believe with a uh 25 y we're pushing this down pretty nicely looks pretty symmetrical to me that looks uh it looks pretty good now with that done we can start working on the right container but before we do that i actually have a tip for you you see i have a problem with this asset pack and it's not a big problem but it's a problem that i very often see within game developers and they just it's an easy mistake to make and it's not even maybe a mistake but it's just really annoying i've got here let me just find an example i got here this image and it's called neck background and i've kept all the names exactly the same here in the asset files normally i would rename it but for anybody that is using the same asset pack i just want you to be able to know which exact texture you have to be looking for and do a search command for so right here i got my neck texture and here i have my pens texture and i'm not sure if you recognize the difference here but neck is a body part where pants is a piece of gear and normally you would call pants legs and that's what you see me do you see me call this hat instead of helmet even though the texture was actually called helm underscore background so we got head neck chest legs feet i call it by body part and we're going to continue on the right side with back shoulders wrists hands and fingers or fingers if it's on one ring so let's just call it finger i do that because sometimes with different equipment characteristics the naming convention can change you have very often leather caps but you rarely have a iron cap or a steel cap we tend to just call them helmets at that point and you have these sort of differences in naming conditions on various types of items it's like maybe it's a cloth shirt instead of a cloth armor cloth armor is not really anything you hear very often so because of the different naming conventions you can have from different pieces of material or material dictated naming conventions you want to make sure that you just use this by their body part instead of their their usual item naming that is going to help you structure everything in the data because then you can simply say in a data field that your chest armor goes to the equipment slot chest and you can also say for your cloth rope that the cloth rope also goes to the equipment slot chest there's no weirdness in there instead of having to call one of those either rope or armor so with that said i'm not very happy with the naming convention and you see that the artist that created this pack actually made that mistake because some things are called pens ring and then we have shoulder here we have gloves helm and then we have chest so you can see that how he's mixing up item names and body part names and that just makes for bad data structuring so do make sure you rename that and my advice would be if you're using this pack to also rename those icons those textures those png files so that you have absolute clarity on what you're actually dealing with now with this container on the right side we can of course start duplicating and dragging or start redoing everything again there's actually an easier way make sure that you save your scene so everything is saved then with the right equip selected we're going to go right mouse button merge from scene we're going to select the character sheet itself that we're actually working on and we're going to select the margin container and every other node for each of those five equipment slots we hit okay and bam they're in the right side as well now we can simply go to the right equipped container we can go to our separation turn the separation on turn it into well not 230 is a little bit too much turn into 20 and now we got a symmetrical layout on both the left and the right equipment slot and of course i'm gonna be renaming everything putting in the right textures i'll not drag you through it okay here we are we got the right side of the panel as well now let's focus on the middle section for the middle section let's just make sure a couple of these things a little bit smaller the middle section we're going to add a child we're first going to add a texture rectangle to have a little bit of a panel in which we can put the name so we're going to add that texture rectangle and that's going to start out small now now we're going to be using a different layout system here now we're going to go for top wide we do that on purpose so that if any time you want to make this responsive you know the middle container is set to take as much space horizontally as possible and as we set this texture rectangle to take the layout top wide if this center panel were to widen itself no matter what kind of size flags that texture rectangle is set to it will grow along with the control panels if you want to make this panel responsive so the player can drag it out resize it make it bigger whatever this will automatically make sure that this name section is a resizable element and everything is nicely and responsive we're going to rename this to name background and we'll tell this rectangle to be a 80 minimum size we'll turn expand on and i gotta check out the little bar that's the one with the little bar added we now have a little bit of an element to put our names into now the names are basically gonna be two elements it's the name and then it's the level and the class of the character so we're going to be adding a v box container so we can space those two labels together now the v box container we're going to set layout to full rectangle of the parent with that the v box container will also resize if you make this resizable and responsive and we'll add a label and we'll actually add two labels we'll rename the first one to name and we'll rename the other one to level class now with this let's just add a name here uh let's add subscribers because well subscribers are cool of course tip tip hint hint and we'll add here a level 32 warrior now of course this looks absolutely terrible so let's change this a little bit first of all let's make let's start at the top let's first change how the labels are actually sized and how they're spacing the text itself so for the first name it's already set to full width under its rectangle we're going to set that the minimum y is 45 so it's going to take the most space we want the name to be big then we're going to tell it in this align options right here to align to the center and we're going to align this one to the bottom here now we can make it bigger make it grow out to the top for the level class we're going to do well we're not going to set the rectangle size we're simply going to go with the size flags and we're going to tell this one to vertically expand as much as possible and just take up the rest of the remaining space now we're also going to set this one to align to the center but vertically we want this one not to be at the top it's actually already correct now of course the text as i said before it looks pretty terrible in go.standard so we want to of course make sure that the text is a little bit better so we're going to go to custom fonts we'll create a new dynamic font we'll click it we'll go to our font resource we'll load the font resource in as i've shown you in the beginning i had a font ready for this now that looks pretty terrible as well because we have to turn the filter on got to put this at 26 and that looks decent now normally what i like to do for my custom colors i want to turn on my font shadow that is very subtle but if i were to click here a little bit you can see that just adds a very subtle shadow shadow even if i leave the shadow size at zero so i kind of like that gives it a little bit of extra depth in there um we might want to reuse this font at some point in the future so we can save this font now i'm going to save this on the resources as this becomes a tres file a text resource file so i want to save this and this font is actual arial rounds i'm sure if you recognize that so i'm going to save this as arial 26 now for my level class i can use that saved font resource [Music] i just need to change it a little bit so i'm going to go and load instead of make a new dynamic font i load a dynamic font i'm going to select my arial 26 i'm going to say that make unique otherwise i'm going to be changing the original file and i'll be changing the subscriber here as well and as i've made this unique and i can go into settings and make this a little bit smaller now we might want to save this for future use and then we can simply save this as arial 16 and there you go you got yourself a name a level and a class next up we want to make sure that we have our main hand and our offhand equipment slots and those are going to be on the bottom right there we can do that by simply going to our middle we're going to add an hbox container of course to space these two elements out and for this hbox container we're going to go to the layout and we're going to tell this one to go to the bottom white again we're going to be making use constantly of these layouts we make use of the positioning the margins as little as possible make use of that layout makes use of that size flags so that everything spaces itself out automatically that's much better than doing it the other way around with the hbox container we can call this uh maybe the middle equipment or the middle equip i should say to stay in line with what we've done with the left and right equip with middle equip we'll simply go to merge from scene we'll select the character scene we'll select the hat now you can see that the hat goes on the bottom that's of course not what we want so with middle equipped the hbox container selected we're going to go to grow direction and we're going to set it to vertically begin that way it grows up instead of down now of course we need two of these so we're gonna add two we'll rename this to main hand and we'll rename this one to off hand and for the icons we will make sure that we add a in this case it's called melee by the artist not sure if i agree with that naming either make it something logical for your own game and we're gonna go with shield now of course we want to make sure that we space this out properly so with our middle equip selected we're going to go for the alignment that it aligns them from the center that puts them in the center already and we're going to go to custom constants we're going to give this like 45 or something like that maybe even more 65 that looks pretty decent and with that done we have our middle equipment now that does look a little bit on the big sides let me just quickly check the size flags now there are actually a hundred by a hundred and this middle container we need to make this a little bit bigger in that case we're going to give this a minimum y size of 120 thereby the icons have a little bit of padding with the um the border on the bottom otherwise they look they look a little bit too crammed in there now they're a little bit better spaced out if you want this to be horizontally aligned that's totally possible too but if we add the silhouette we break up this uh this alignment and then it looks pretty good again already adding that silhouette is pretty easy we go to our middle section add a child node it's gonna be a texture rectangle that texture rectangle will drag that in between our naming background and our middle equip that's where it is nonetheless in our visual layout it's not important because we're not in a vbox container but it's just easier for manageability when you're looking for something in the future you see in the middle you see the silhouette so you're expected to be in the middle of the tree with that set we're going to go to layout we're going to set this to full rectangle with x-band on we'll add a warrior silhouette here now this warrior silhouette is a little bit on the big side so while we rename this this is one of the few moments that i do use the margin containers because we're not in a v box container we're not in an hbox container we're working here in the middle which is a control node the control mode doesn't have all those size flags so it won't resize anything automatically so in this case this is one of those rare cases that i do use the margin and i believe when i add like 50 under 20 minus 30 minus 40 we have a reasonable size position silhouette but you know change that whatever you have you may also want to put like a sprite maybe in here or maybe a 3d model that demonstrates the equipment that is actually equipped on the character so with that said we now have a pretty decent looking uh panel if i hit play we can now also see that right here i can size this up to the full screen as you can see looks pretty decent now maybe just for demonstrating purposes before you go um of course this means that once we start dragging and dropping things in here if you take for example this middle equip this main hands i can i of course have those sword and shield icons to go along with this so we would replace the icon for from the background to the actual axe and we would for example do exactly the same with the shield as the shield and the axe are with a transparent background now the background of the offhand inventory frame is now visible and you can see the equipment is in the panel and of course we can add equipment icons for all kinds of equipment and all kinds of equipment types from different materials whatever you need for your game whether it's a sci-fi game or a fantasy rpg doesn't really matter that was it for this tutorial guys i hope you like this control note mayhem a little bit i hope i was able to shed some light on the control mode functionalities of godot and how it can help you to build a pretty amazing looking user interface panel in you know less than an hour if you liked this video and if it was helpful smash that like button hit subscribe don't forget that little bell icon to make sure you don't miss out on the next couple of tutorials in this series but we will build an inventory panel in a similar way but then a little bit faster probably drag and drop functionality the data structure in the back end and we'll probably do something with like calculating new player stats based on uh equipment changes and stuff like that to make sure that it's like a fully uh fleshed out feature that you'll be able to implement in your game hope you're looking forward to those tutorials i sure do i hope to see you there until then keep on gaming keep on coding see you later guys

Channel: Game Development Center

Views: 4,392

Keywords: Godot Equipping, Godot Equipment, Godot Equipment Panel, Godot Character Sheet, Godot Equiping Player, Godot RPG, Godot RPG Tutorial, Godot Beginner Tutorial, Godot Tutorial, Godot

Id: lwTPlnW1qhA

Length: 36min 3sec (2163 seconds)

Published: Sun Feb 07 2021