How to Create a Skill Tree System in Godot 3.2 (Part 1 of 2, UI) | Player Development Series

in this Godot tutorial I'll teach you how to make a skill tree within your character sheet let's get started so the first thing we have to do is we have to make some space within our character sheet then we created two tutorials ago when we press the skills button we want this whole stat panel to disappear and we want our skill tree to appear to do that I'm gonna go into the feed box container that has everything both the stats and the buttons the buttons we of course want to remain but these stats you basically want this just disappear that we can do that fruit code all we have to do is replace it with something else so I'm gonna be adding a control node in here now control node might seem a little bit unusual at first but I'm gonna be overlapping to V box continues to create a particular effect that I want because I want white lines that I can fill up through a texture progress bar to be connecting these skills together to get a really cool effect of when you unlock skills and for that I need to P box continues to overlap so for that I'm using a control node now using and controller does of course mean under the mouse we have to set the filter to ignore else we wouldn't be able to press any buttons anymore inside that control node now with that controller we can rename it simply call this skills and I'll immediately add these to V box containers that I was talking about this is gonna be deep skills connector container and this will be the actual skill tree or skills inside the skill tree now with that set we can set this skills when we now turn off the stats we can set skill size flag to expand vertically as much as possible thereby it takes the same amount of space that previously the stats window did and I'm the skills connector we can set this to be the full rectangle of the control mode now we have our two V box containers through which we can add elements that is going to be our skill tree all we have to do is hook up these two buttons underneath to do that I'm gonna go and close this feed box that people saying this one I'm going to open up the buttons and I'll say under the stats I'm gonna go to note signals I'm gonna connect the press button to the character sheet we already have that from the previous tutorial and under skills I'll do exactly the same I'll connect the press the button on the character sheet now with that done I'm going to select the control node I'm gonna copy the node path and when we press skills we want to do something with that nodes we're gonna get the note and we're gonna show it now at the same time that we do that we of course also want to hide the stats part so exactly the same we're gonna get that node gonna paste that in and we're going to hide it now when we press the stats button you of course won't exactly the opposite to happen so we're gonna copy and paste this well copy d hides to where we have to show and we'll copy show to where we have hide we'll save that now when we play the game and we go to our character sheet we can now switch between the stats and the skills of course the skills are still empty because that's the whole point of this tutorial to a skill tree in here so let's go over to the actual feed box containers let's start adding some skills to it and then we can start building this puppy up now a quick tip if you want to build a skill tree that goes from left to right or right to left that you don't want to be adding to VBox containers here but you want to be adding to each box containers you want to invert V box and H box then you're gonna get vertical swimming lanes in which you can add your different skills by starting out with a V box container in my example we're gonna be getting horizontal swimming lanes once we're done with this step to add our different skills too so talking about swimming lanes yes to start creating them as a starter I set the alignment for both of the V box containers to the end that means that the P box container will push all the notes to the end and we'll start building up from there that way we can build a tree up from the bottom up instead of the top down now that's a personal choice you can just turn it around as well and make it a tree that grows downwards or whatever you want to call I've also set a separation on and kept it at zero because I want things to not be spaced out at all when you don't have separation on the custom constants then you get a little bit of separation so make sure you put that on and put it at zero so you get the right EXO sizes for the various elements because we're going to be overlapping to VBox containers so we want everything to be pretty much pixel perfect as how we have envisioned this so you put it on for both a box containers now I'm gonna start out with the swimming lanes in these skill trees that will be the lanes where we add these skills to we're gonna simply add a H box container will set this H box container up first the alignment can stay at the beginning but again we need the separation to be armed and at zero I want our skill icons to be a hundred pixels high so I'm also going to set the height of the H box container to 100 now with that setup we can now duplicate this H box container through to time so we have three in total and we can rename the elements I'm going to rename the top one to number three so that will be level number three that will be like that the most difficult to attain skills those are the intermediate skills and this will be the skills you start out with or something similar now if we would add skills to this swimming lane right here they will be touching these buttons underneath and there won't be much spacing in between them that doesn't look good so we add some margin between there I think a margin of 50 is gonna be perfect for us so it means the skills the first row is gonna be over there now but of course we want some connection lines between the two skills so we can also show progress or whatever so we also need some margin between the other two swimming lanes and I think a margin of 100 will work perfect for what I have prepared for us I'm gonna duplicate this container I'm also going to put one between the other ones or the row number two and three so now we have a row so margin another role for skills so margin other over skills and a little piece of the final margin to make sure there's some room in between the skills and the buttons now that we have this swimming lane we can start adding the first skill element that we can copy through into the other rows so let's add our first skill I can with all the bells and whistles that we'll be meeting in this tutorial and future tutorials to create the entire skill tree system I'm gonna go for the first row and I'll be adding in first container which will have our skill again we're gonna start with a texture rectangle that's why the container starts with we want this to be 100 by 100 as that is the size of our skill Lincoln and with expand on I'm gonna start by adding a little bit of a background it's gonna be this double edge background we've used this many times in the in a tutorial so far now with that we want an icon to appear in there that is a-buzzin expressible so we're gonna add a texture button to it now this texture button we can't have it 100 by 100 because then we don't have this background and this border anymore that's the whole reason one and that texture so we're gonna make this 90 by a 90 and the layout will set it to the center now we've expand on because we don't want this to resize anymore we're gonna be adding it some skills so I got these skill icons here I'll add a normal skill and I'll also add a disabled function it's basically a great skill version of the normal picture that way we have an option to lock buttons up and when they're disabled the player has feedback that it doesn't have that they didn't unlock that skill yet and at the same time the button will not be press about just like we made the stat system last week now with that we have a button but we want some more to add here first of all let's make sure that we have a little bit of an effect that sort of blooms up the moment the player unlocks a skill we want to know reward a player give some give some stuff to him you know make it a little bit interesting for him so we're gonna add another texture rectangle and in that texture rectangle I'll set that layout to be the full rectangle hundred by and to it at this gradient circle effect and before I do that I have to set expound on else my house another 100 by 100 anymore and that 100 by 100 what I'm gonna do in a tween when the texture bar fills up when we unlock a skill will start a bloom effect that will highlight the skill just for a second to let the player know that he has unlocked that skill so to do that we're basically in a tween gonna set to scaling up or when we set the scaling up is gonna skill in the wrong direction the reason being is that the pivot point is currently in the top left corner so we have to set the pivot point to be in the center there by April's skill around the texture and not to the side of it so we're gonna return this back to zero and of course we also don't want your sex your rectangle to be here all the time mean that the skill doesn't look good anymore now something the visibility I'm gonna set this to show behind the parent now we want of course this to be tween so I'm gonna be adding a tween to the texture rectangle so we'll always know where this tween is for and where it's what is gonna be tweeting this is a a child of texture eternal now at the same time when we do this the button doesn't become that clickable anymore because his texture of each angle is in front of it actually it is clickable but the hint won't work because under the hints what we're gonna do is we'll add some text with so we say okay this is in force focus your key and gain temporary boosts and come with focus raising both of their constraints so well add a little bit a description to the tooltip hint so right now we have pretty much our contains up all we have to do is rename it I'm gonna call this skill one a I'm not gonna give it the enforced name because I want this to be a little bit of a flexible system you will have to make a skill tree likely for every class or every skill tree that you have the thing is that you're probably gonna have different trees or different connectors or you know every skill tree is gonna be exactly the same although you could make it like that but it's a little bit less creative I guess so you will have to make skilltree could use some tap container on the top when a single character can maybe have skill trees from various I know walks of life but we do want to make sure that we can encode use the same functions over and over again referencing the same sort of connection logic so we're gonna call the skills first of one as if this is in Row 1 so old skills and road two we'll start with it too and then we'll call them ABCDE from left to right that way we can always sort of reference them easily and then with whichever tool tip we fill in there or whichever picture is in there it's gonna be determined on which skill tree is loaded at that moment so not sort of how you can make it a little bit more flexible but at the same time reuse all the code that we'll be writing right with that done if we now will play this game you can see that if we load this skill bar up now and I hover my mouse over here the player is gonna get a little bit of information area what is this skill etc except you can add all kinds of stuff there how much level do you need to unlock it how much skill points is going to be required to use it whatever if you are working on a mobile title what you could do is that of course you don't have hovered with your finger that's not possible in touch what you can do is if you click it and then a new little window would appear where you get the information you want and instead of like we're gonna program it clicking this button to invest skill points you would then in that rectangular pop-up where you show the information have the button spend skill points or up/down undo whatever so you can just as quite quickly to also work for mobile if you want to okay with that done we have ourselves a skill tree so I'm gonna be adding or duplicating this skill into all the bars and add all the correct textures to it then I need for the skill tree that we're gonna be building and then we'll I will add some margin probably and then when we're back in the next section we're gonna be adding the connectors in these second V box containing that we added the skills connector so we'll be overlapping the two right we're back we've got some extra skills let add the last skill together so you know what I did and you can see how easy is this once you set up your base container properly I'm simply duplicating the skill with control D I'm dragging it into the correct Lane first thing I'll do is I'll rename this to half the proper naming so it's gonna be skilled free eight then in the texture button I'll open the textures I'll simply add the correct textures to it that's all there's to it of course you'll also have to change the tooltip if you want to add all those two tips everywhere I'm gonna do that I've shown you how that works and we're we're more focused on the mechanics of the the skill tree here in this tutorial so with that done we've got to make sure there's all spaces out correctly so we basically gonna make use of standard margin containers for that the only exception is we need a label to tell us how many skill points we actually have I want to add that to the bottom left here I'll rename this to skill points and with that label we'll say for example we got three points points good enough that we know we're in the skill tree already we'll align this to center so that looks better now how many custom bonds will add the dynamic font or 130 points for the big enough yes big enough then we're gonna give this a little bit of extra margin on the x-axis because I want this to always be the same song it's quite important that we spaces out evenly everywhere so that is the three points and I'm that 150 is on purpose because I want all the margins to be standard a hundred the same size as we made the skill buttons and that's why that separation in the custom constants is so incredibly important but we also want to add 50 margin to all the starting rows here just like we have 50 margin between these buttons and the skill icons to make this look good so I'm gonna go over to one of the other buttons I'll add a margin container to it drag it to the front of the stack and I'll rename it to front margin so we know that we're dealing with something we shouldn't move and any time we'll add 50 to it I'll duplicate and I'll bring this into number three as well where of course we've got to make sure it's in the front and not in the back I'll rename this to just to be consistent but that's not really necessary well never reference these margins at it with that done we can simply you know we're not gonna duplicate that because we don't want that name just gonna add a new margin container to it and that margin container is going to be exactly a hundred by a hundred just like these skill icons now we want this free a skill to go to the side a little bit so we'll just duplicate this until we think it's in it's in the right position now this margin container we can also you know what let's just drag one over here to the other skill we'll have a little bit of space between the two skills right here and we'll also make sure that we have some space there now it looks like this margin container needs to be maybe giving a little bit of extra incent let's see maybe it's not necessary maybe this looks good like that and we'll just duplicate it and drag this over into number one then in number one we also have to make sure that we got the right spacing that was not the right spacing right spacing in between these and we'll duplicate this one too now this looks a little bit off so probably what we need is we need to have one more margin to get the entire stack off I know what we call this holy holy heavily strike to have this little more to the side and maybe it's a good idea to add an extra 100 in between these two just so they're not that much to this side I'll make sure that it looks the way that I want it but just remember that always make sure that I use margin containers of 100 by 900 that's usually what I do to get things working to space everything out quite easily what I would do in a final product is now that we got a number of margin containers here like five I'll simply say okay and you did margin container I'll put a size of 500 on the x-axis or on the exercise and then I'll delete the other four why I do like that because we've as a duplication you can see you can squeeze to space something out to delete one margin add one here and a little space here add a little bit of space there that way we're just quicker building things up and then we know okay this looks good then just change the real margins and have one larger container because that's of course always better than having five I'll work on that and then I'll see you in a moment where we gonna add neat connectors between the various skills right let's connect these skills up and that's where the magic our gas of two overlapping VBox containers will come into play so far we have only work in the skill tree P box contain and now we're going to be working in these skills connective e box maintainer remember these separation is also set to on at zero and the alignment to ends now we'll first add some margin to make sure that the connections come off the ground a little bit we'll make sure that this is 100 high because we only need for the first connectors to be connecting the top of the layer one buttons with the bottom of the layer two buttons bottom of the layer two buttons yeah that's English we're gonna then connect it and add an H box container will track is above the margin containing because we want it to fill up to the top and we'll set the rectangular size Y to 200 this way we're gonna be overlapping like I set the top of layer 1 and the bottom of layer number 2 now I've had a little bit of a helper texture rectangular just temporarily to show you what we're gonna be doing what we're going to be doing is we're going to make sure that here we have a box that's going to be connecting diagonally between these two skills and here we need a box not this big smaller but we need to be connecting they're vertically now that means that we need to have some sort of a spacing tool to make sure that this all works properly um I can leave this texture rectangle now don't need that don't don't make that yourself what I've done is that texture rectangle with a hundred margin between two skill buttons and two skill buttons of a hundred is of course 300 wide by 200 high the size the height of the swimmingly now I had rectangles here in Photoshop for a hundred by a hundred to sort of replicate the situation that we are having then I've added a diagonal rectangle white to the screen and simply by hiding the rectangles now we end up with a perfectly positioned white bar in a big canvas size layer that we can add on top of that skill tree now of course I've done exactly the same for a diagonal line the other way and I don't exactly the same where a vertical line which I've then cut down to be only a hundred pixels wide so this is where my am progress textures are coming from so it's very easy to replicate as in Krita maybe even Photoshop if you'd give a photoshop so with that set we'll first to this hbox container will first rename it to know what what it is this is of course swimming line one two two and two swimming lane one to two will first add a margin container because of course me to replicate the fifty margin that we gave in the swimming lane of the skill Incans as well so we'll give this fifty margin so we start at exactly the texture and that is why it's so important to set all these separations are also in this swimming lane I'm set the custom Constance separation on separation zero because we want all these hundreds of these elements of 100 white to be pixel perfect to make sure this V box container elements are gonna be overlapping nicely so okay we got some front margin now we'll add a texture progress with the texture progress we know that we want this one to be exactly three hundred by two hundred that's why it's overlapping exactly with the box underneath or the skill tree underneath now the texture progress we two of these two overlap because we have two on top of each other and I kind of come out of the skill on the bottom and I kind of go to the top so to overlap these two of course we can have them both in the hbox container because that will try to pull them apart so we're gonna have to put them in the control node we'll make sure that the control node is 300 by 200 and make sure that the texture progress takes the full rectangle of that now we can duplicate the texture rectangle and have two overlapping each other now with the texture rectangle we're gonna set the textures and then we'll take the diagonal texture the first one that will be to the left will set the under texture and we'll also set the progress section now for the 10th as these are white they're very easy to reset in car so I'm gonna go with 35 if I could type by 35 by 35 for the under texture and for the progress we'll set a little bit of a softer to 55 is pure white that's very hard on the ice so I'll lower this a little bit to 215 that is still white but it's not as hard on the ice no that's the same reason why you have your dark mode everywhere for the value for example we can set this to 50 but now you see it fills it up entirely that's because the fill mode is still from left to right when we now do this from the bottom to the top you can now see that we can imitate a progress of course the 20 will be 20% of the screen so it will come out at about 30 and will go all the way up to about 7075 before the texture is fill so you gotta keep that in mind when you start programming this part but 50 is always going to be exactly in the center say for example the button skill has unlocked the next skill but you haven't put any points in there yet well that's when you can in a show the 50% progress or when you have this skill and you put in the next skill point and that will unlock this one you can show the bar go up or you know you can pretty much do whatever you want with this sort of a texture progress and you can sort of make that animation that many of these sort of skill trees have now with the other texts you're going to do pretty much exactly the same so I'll simply delete this one duplicate this one and I'll only be replacing the Texas thereby I don't have to send a set all my tints again so by simply replacing these will now have two of these coming out for the vertical box will simply make another control node and you might be wondering why another control node let me quickly get this one together we'll put the vertical texture in the under and in the progress we'll make sure that the control node itself knows that it is a hundred by two hundred and let's make sure the texture progress knows that you check take the full rectangle now also for this texture rectangle will put the progress on fifty will set to fill from the bottom to the top and the tint can for under beat 35 by 35 by thirty-five any progress - 15 by - 15 - 15 now the reason why I even though it's only one element put this in a control node as well is because I want the node structure to be exactly the same whether we have two texture progresses or only one texture progress yes this control node for the sorting and the arrangement of the texture progress is not necessary but to make sure that the notepad is going to be exactly the same in the code to approach this node in a single line of code exactly the same whether it's diagonal or vertical we need this extra control node in here now for the naming I'm gonna be renaming the control node itself equal to the skill that it comes from and I'll rename the texture progress bars to the skills that the texture progress is going to that way I can very easily approach if I know okay skill number one a unlock skill number two bead and I know I need to go into our swimming Lane I know I need to go in one two two are you going I need to go into control no one a equal to the skill name and I need to know go to the skill that it has unlocked this way I get a consistent no path towards the texture progress that I need to be activating to get the effect in the animation that we want for the particular skill we've unlocked do exactly the same for this one a full this one B and the texture progress I'll rename to C now of course we need to add some extra margin in between so let's make sure these are closed to eight yeah that's correct and let's add this not this margin container let's add it into one to two skill add some margin to it needs to be in between these two and of course we know this needs to be exactly a hundred actually 200 by 200 and that way our texture progress is exactly lined up there we want it to be now I'll add the election texture progress to the next swimming lane I'll add the next swimming link to it I'll show you the final result now here we are only open up our character sheet we get the stats panel if we press skills our skill bar or our skill tree I should say opens up and right here we got a little bit of a situation which is possible for example this boring skill is being unlocked apparently both skills on the second layer here are also unlocked but only a point was invested in the second skill and right here we have both skills unlocked but apparently we don't have the enough level or we're not able yet to unlock the last skill right there so it's grayed out the button is disabled pop-ups are still works although that is the wrong pop-up as we copy/paste at everything but yeah this is how something like this could look and next tutorial will code in the logic and make sure it's functional that was it for today guys hope you liked it if you did smash that like button hit subscribe don't forget that little belt I can to make sure that you don't miss out on the next video where we coat that skill tree up now if you're curious about the game development that I do myself I'm working my title called saw whisper I lifestream my game development bike on Twitch every Tuesday and Thursday you can find the link in the schedule down in that description box below I hope to see you there one day with all the goat developers that are in this stream now until then or until the next tutorial keep on gaming keep on coding see you later guys

Channel: Game Development Center

Views: 6,190

Keywords: Godot Skill Tree, Skill Tree Godot, Godot Skill System, Godot Skills, Godot Ability Tree, Godot Ability system, Godot Talent Tree, Godot Talent System, Godot character sheet, Godot player development, Godot player progression, Godot player leveling, Godot player sheet, Godot, Godot Tutorial, Godot beginner tutorial, Godot 2d tutorial

Id: nskVFc3tJgY

Length: 28min 46sec (1726 seconds)

Published: Fri May 08 2020