Make an Action RPG in Godot 3.2 (P18 | Player Hearts UI)

good morning afternoon or evening wherever and whenever you are my name is Benjamin and welcome to part 18 for Godot action RPG series in this video we're going to be adding the UI for the players health and some and we'll be adding in the trees as well just as kind of like a little add-on at the end of the video because it doesn't justify its own video so we'll be putting that at the end of this one let's get started by adding in some sort of a UI for our character now we're going to start by making we're going to start by making a new node in our world scene here it's going to be a control node and we'll just we'll have it be a label for now okay so a label is a node most the control nodes in Godot are related to UI elements so anything with a control node is really related to UI and their position is different from a normal node you can see they inherit from canvas item and so they don't have the same type of position if you come and look at our label here you can see that we have a layout up here we've got some interesting do that what I do I made like a red line there it's I'm not even sure what I did but we've got our label here and this oh I probably moved the origin or something have to do with the label here but this is our label and it has some different information here that isn't the same as like a node 2d you can see we've got an anchor and that is represented by these little green UI elements here we can see we're anchored to the top-left corner of the screen right now which is why everything is zero zero zero zero and you can see we have a margin which is basically just the size of our label right now you can see that changing right as we change this size and we do have we have a rector which contains our position and our size and our min size and control nodes in ghido are very powerful they have a lot of stuff built into them but they're also a little confusing we're gonna start simple and we're not gonna deal with a lot of these different properties they are very powerful and you can get it you know setup to where your your control nodes will scale properly and be you know what do they call it what was that word that they use like I don't even remember but if you scale your screen the control nodes will scale with it and adapt properly to your screen size and be anchored properly so there's a lot of power behind them but this label right here we're just going to set it up here we're just going to say HP equals 4 right we can save on our game so now our character has this label up at the top left of the screen that says HP equals 4 however if we take damage it actually doesn't it doesn't change this label right here so we would have to connect it somehow to our to our [Music] characters helped write and update that properly so we couldn't we can come in here and to make things simpler I'm going to actually add another control node this will just be a base control node with nothing in it really and we'll put our label as a child of it and then leave it like that for now and we'll call this control node health UI and will actually save and will actually instance this as its own scene so we'll do where is that here mate let's see save branch as seen here we go and we'll say that in UI here okay and we'll give it a script to attach a script to it now the reason I didn't just attach a script to the label here is because we're actually not going to be using a label we're going to be using some hearts but for now I want to show you how to do with the label and then we'll change that in a minute to be hearts but we have the same base either way so we've got our base control node here either way and we'll come into our script what we need to do here is add our own variables here so of our hearts well yeah we'll call it hearts for now even though we're just using the label will say hearts equals 10 wait no 4 we know it's going to be 4 set get [Music] set hearts we're creating a hearts variable and we're going to have a setter for it up max hearts and have a setter for that as well so [Music] and we'll get access to our label so we'll just say label here people will say function set arts value art equals lamp zero max hearts okay so when we set our hearts oops I forgot to and properly when we set our hearts we're going to clamp that value so their hearts are never less than zero and never greater than our max hearts set max hearts [Music] and we'll say max hearts equals max value and one so our max hearts can never be less than one and we'll have a ready function and inside of our ready function we will set our max hearts self dot max hearts equals player stats dot help max health self dot hearts equals player stats dot health ok so we're setting our max hearts to be the players max health and our hearts to be the players whoops this should be max health wait no health and our hearts to be the players helped yeah we got it right we got it right the first time okay and then we need to connect to our player stats wait did we set up the player stats health changed I don't remember if we did let's come into stats here and we have no health as a signal and that's all we have right yep that's it so we need to add a new signal to our stats called health changed and this signal will be emitted each time our health actually changes so we'll say signal health changed and then it will have a new value the new value that the health is being changed to each time are we set our health here we can emit signal health changed and we can we can actually send Amit out an argument with it too and that will be our new health value like that easy enough right so whenever our health changes we emit a signal saying health changed now if we come back into our health UI here we can connect to that signal so player stats dot connect we want to connect to health changed and we want to want to do self connect to ourself and then what function do we want to connect to going to connect to set hearts and what it will do is it will take the argument from the health changed signal right which will be our new health amount and we'll pass that argument into our set hearts as the value right here and of course this is going to update our actual variable here so let's let's run the game here and you can see our I gotta kill this back it's gonna be in the way okay we did get hit once I think right so our label here still shows four but if we come into our remote scene here and we look at our healthy UI we can actually see that our hearts did update to being three so we got damaged and our variable updated to be three here but our label didn't ever actually update so we need to make sure that we update the label as well so we'll connect this set hearts function to update the label now you don't have to have your own variables here like this and if you were just using a label it might be easier not to to just have some sort of you know update health label function and whenever health changed gets emitted you would update the label but we're going to actually be setting up this help the UI to be hearts and when I was doing that it was easier for me to have these variables so that I could actually test them in the editor so but we'll set that now so we'll come into our set hearts here and we'll just say if art well if label does not equal null label dot text equals HP equals and then we'll do plus string version of hearts okay arts I did something wrong here label oh I've got a typo there we go oK we've got now we're updating our HP whenever the our our HP label whenever the player gets hit you can see now it's going down properly and we die we're at zero HP we're not even using max hearts yet obviously but we will be using it so let's switch all of this now we've set up our label but we're going to fix this so that it's no longer a label but now you understand the basics of how you could update a label like this as well so we're kind of learning two things at once with this but now we're going to be using a different method which is we come into we can get rid of our label here you [Music] we have a heart we have - we're gonna add two new control nodes and these are going to be called we're going to be using the texture rect node guess we could just search it texture texture rect here okay and this first one is going to be art UI empty this is going to contain the hearts when they're empty when when we don't have any heart there so come into UI dragon heart you I emptied up PNG drop it right here okay that looks good but we need this to repeat right so that when we drag this out it actually repeats and do tile now it should properly tile this as we stretch this out right so we can get more heart so we could set it to four hearts for example and the length for that we might want to turn off snapping so that we just have pixel snap on but we can easily set it to four hearts like this okay now we're gonna add another one texture rect and we'll call this one art UI full and we'll Dragonheart UI full and we'll also set it to tile we'll drag this up here there we go we could set it to three hearts or whatever right now you can see how we could manipulate this value right here in order to create more or less hearts and if we come into the rect here the size is what we're actually changing okay you can see as I move this it changes the size and these are attached to the base health UI node so if we move if we move this around and I grabbed it instead of moving it but if we move this around they move with it but we'll be able to position that anywhere we want in the room probably want to shrink this down so that's not as big okay so obviously our label isn't here anymore we're not using a label for this anymore we're going to be modifying the direct size of these two UI elements right so we'll come into here and we'll say on red Ivar art UI full we'll get access to our heart UI full on red Ivar art you I empty get access to that as well now when we set our heart UI when we set our hearts here we want to change the rect size of our hearts UI full so we'll say if art UI full it's not equal null [Music] are you eyeful I have a uppercase u in there and that's driving me crazy how did I manage that there we go okay that one though okay get dot rekt size dot x equals hearts so that's our hearts variable right here that we're doing times fifteen so we're using times fifteen because if you come into this texture right here you can see that it's actually 15 pixels wide so for each for each heart we have or each single heart we have that the character has his health we need to go over 15 pixels in our texture rep property so if hearts is one then this is only going to go over 15 which is going to be here we're only gonna have one heart right our size over here is going over 15 so we can easily set that up to properly display right amount of Hearts we want to do the same with our max hearts if heart UI empty does not equal null art UI empty direct size [Music] the X equals max arts times 15 so you could set this up too so that this heart system could be applied to other areas of the game if you wanted that's kind of the point of having these variables up here so that you could de couple the the players stats from these actual variables so this could work without the players stats essentially that's the idea behind it so but you know if you wanted to once again you could set it up to where this actually doesn't update or to where this just uses the players stats instead of having its own variables both of those are an option we need our stats to have a max health change signal as well signal max health changed value and then we need a setter in a getter on our max health set get [Music] well this isn't with this is an export variable so I should be fine set get set max health this is something that actually didn't do in the reference project because I don't actually have the players max health ever change but you may want it too [Music] you [Music] max health changed so we're just gonna put this in and set it up so that you should be able to change the max health now when when we change the max health right here generally what you'd want to do is make sure that your actual health is never higher than your max health right and so you'd have to come in here as well and say health dot alt equals hmm self-help to make sure we call the setter equals [Music] max min alt max health that way our health can never be larger than our max help if you set the max health to lower then your actual health then your health is going to drop down and be set to that max health value as well that's what we're doing here and that should then carry over to this as well but you may want to set set it up to do it in here as well so self dot Hearts equals min our max hearts like that the same thing okay so once we have that set up we can connect to that signal as well player stats top connect alt max help changed self set max health or max hearts I mean but make it a string here I can't wait until in Godot for they're actually going to have signals and functions have their own types so we don't have to use strings like this all the time which will be so nice but for now we got to use strings that's that's the what we're working with here so let's see art UI empty this should all work now theoretically so let's run the game see if this works okay we've got an error message here and I use the function Minh cannot convert argument one from Neil to float so okay here I was a little worried about this actually because of our export variable so our export variable here because our health is an unready var it actually doesn't have a value when we set our max health right here on red Ivar so the solution would just be to we'd have a problem here when we're setting the max health I wonder if we want to this is what happens when I aside my reference project a little bit we get to do a little bit of debugging together but basically what happens here is because this is a non ready variable right here and if you remember we did that so that we could just set our health property to our max health right here right so we could say helped equals max health and that does actually that does actually work but the problem is now when we set our health here if we try and clamp our actual health here because this variable hasn't been created yet because this set function is being set right at the start of the game before we're actually calling the ready function our help doesn't actually exist yet we were having a problem here so we'll just turn this into a normal variable and then we'll come and set will make a ready function down here and just say self dot health equals max health you [Music] in the ready function and I think that'll work yep and now our hearts are oh it didn't update when we died that's interesting it should have okay we'll have to figure out what's going on there now the question is is it the hearts well let's actually let's actually use our remote inspector again because that should give us a really good indication of what happened let's come into our remote inspector and we'll look at our health UI and we can see these variables here and we can see that hearts has been set to zero okay so our hearts have been set to zero properly but the UI our emp'd are full here hasn't been properly set to it hasn't been popped set to zero so let's see what happens when we come in here and we set our size to zero okay that didn't work it set it to 15 here so there's a problem the problem is that we can't actually set this to zero the size it's not letting us make it smaller than then 15 here and that is a big problem because we want to be able to set it to zero so if we come into our size flags here I think the solution is this at this to expand if I remember right let's see here let's try setting it to zero no no it still didn't work so that wasn't the solution so expand here will allow us to have this control nodes will expand to try and fill the control node that they're in and so when we set this to expand it would it would try and fill up the the parent control node that it was in see here arts you eyeful so let's see what was it oh it was expand up here actually I think is that it that was it okay yeah so I got the two expands confused so this one right here will make it try and fill up the space that it's in this expand up here is actually a little bit less it says the texture scales to fit its bounding rectangle which makes it which makes it seem the same so I'm gonna be honest I don't actually understand this expand right here as well as I do down here and it's kind of interesting that they both have the same name this one I've used in multiple places and I have a better understanding of it and I'm not going to go into the exact details about what it does I I think I want to do a Godot series that kind of goes into control nodes they kind of need their own series they're rather complicated powerful but they're they're not easy to use and they feel a little bit counterintuitive at first but up here this expands I haven't really used that often all I know is that if I set this then I'm able to actually set my size to zero properly now it won't default to 15 so you'll need to have that active then let's run the game again and if we get hit and see we can lose all our hat all our hearts that way let's try and inside of our players script inside of the ready function well actually let's just go into our players stats try setting our players max health is something higher let's set that max help to six or so save the game and run there we go now we have our player has six health you can easily set the max helped value like that let's come let's set this back to for save we still get this interesting error here for the editor that I never quite figured out nobody really knew what that was I think it's just an editor error here it actually won't affect our game let's close out of our player stats let's come back into our player now and inside of our player what I want to test here to make sure that this is working properly is let me get so this doesn't make any sense by the way but each time we we roll [Music] let's set our player stats dot max health - equals 1 so I want to make sure that this properly updates the arts oh darn it oh I managed to kill it without getting hit okay so if we roll okay so it did set it did set our players it's our heart down less one but it's not actually setting the max health properly and we're getting an error here so I'm glad I tested this it says error calling method from signal max health changed method expected one argument but called with zero okay so let's come into that okay so this is where we went wrong you can see when I omit the signal inside of our stats I don't actually send out the new value like I do here with our health changed so we need to make sure and send out max health right here so that that gets updated properly and save we can clear this right here run the game get rid of this bat and roll and there we go now we can kill ourselves but we're never allowed to actually set our max health less than one so it does leave the max help that one which makes sense it never actually gets rid of the UI which is what we intended but you can see we are able to set our max health to be less or if we have our player and actually increase the max helped as well and that doesn't give us health right it just increases the max health the reason it lowers our actual health is because we set up for that use cases where you could potentially have less where you would never want to have more help than you do max alt at least in the game that we're designing now you could make this go off the screen and it won't properly loop around to the next to the bottom here but that's not a problem I'm going to be solving in this series you'll just never want to let your player get that many hearts so we'll remove this here and wait where is it right here we'll remove it we're actually adding to our max health and you can see that that is now working properly our health UI here is working quite nicely we'd be able to shrink this down to be the same size as these okay and we'll save so our health part is working properly let's quickly make a new scene for our tree I'm in here we'll do a 2d scene actually delete that a static body is going to be review a little bit here just like our bushes loose static body will add a sprite or like this come in to find our world come in to grab our tree and wanna move it up so that we get it centered better we want and where we want our origin for why sorting to be and we'll attach a collision shape in shape and I'm going to use a capsule I'm going to rotate this capsule by 90 degrees drag this in and move it up a bit should probably be good and we're gonna add another sprite this will be our shadow [Music] the big shadow for this Oh when I put sprites or the shadows are they in oh I have a shadows folder we'll use a large shadow for this there we go or tree has a nice shadow now save this inside of world save come back here and our bushes so let's create a new y sort node I sort this will be for our trees and what some trees on this node probably only the one or two trees they're big be seen up it here scene maybe I'll drop this in up here call it good make sure they the collisions make sense and they work with why sorting and such okay looks great our bushes don't have shadows either let's actually add shadows to everything bush there we go out of sprite make sure it's above our other sprite here a doe sprite I'm going to shadows for this one wait maybe I did a large shadow for sexually oops if you hold all you can make sure and select the one that you currently have I guess I did medium shadow for large shadow for the bush it looks like or maybe I didn't even do shadows for the bush I don't remember but there we go now our bushes have shadows as well let's give her a player shadow I'm in here at a sprite [Music] here Oh sprite and I think I did medium for the player [Music] thought down let's see maybe there [Music] I think I moved it down only one our character has a little bit of a shadow too there we go uh-huh that is killing me so now we've got our arts up there in the top left-hand corner we can actually move them down let's grab them here move it down just a bit snap I'd rather have it position somewhere like here so it's just a little bit inside from the corner and this these hearts will not follow you around in the view we'll be handling that later when we start when we add the view and such so if you were to add your own camera to this game these hearts won't follow it but we will be solving that when we add a camera so that's gonna be it for this video thank you so much for watching it was made possible by my 1 bit ghetto Kickstarter backers I'll have a link for that into the in the description if you enjoyed the video and learn something from it be sure to give it a like subscribe to my channel and I will talk to you all later

Channel: HeartBeast

Views: 49,698

Keywords: Godot Engine, Godot 3.2, Godot 3, Tutorial, Series, Action RPG, RPG, Pixel Art Game, Indie Game, Game Development, Learn gamedev, Gamedev

Id: 7A4EPIr-6Sc

Length: 35min 42sec (2142 seconds)

Published: Mon Apr 20 2020

Reddit Comments

[u/MarcellusDrum]

His videos are very special . For most "professional" online tutors, they have a clear set of objectives before each video, and they already know exactly what they are going to do and how. This means the videos are shorter, more on point, and just packed with information.

For his videos, he is developing the game in front of you. He explains his train of thoughts, he makes mistakes and debugs them in real-time, he sometimes try to do something but fails, so he tries different methods till it works. This makes the videos a lot longer, but they are actually way way more helpful. You gain experience just by watching his videos. His course prepares you for working alone on your own projects. You know what to expect, and how to solve issues. May not be the style for everyone, but definitely give it a chance.

[u/TheFirst1Hunter]

It's nice from you to share his videos

[u/RelogioDeParede]

Im following his tutorials. Yesterday I learnt how to put animations in my char without to write "$AnimationSprite.play("Walk)". It was like heaven.

[u/Stef7930]

Good stuff. Actually I found I was already subscribed to his channel, but it's nice that I got reminded of his videos again. I might start to finally follow along with his tutorials.

[u/SodyumHidroksit]

Keep it up man i learning something

[u/corageous_nerd]

His 1-bit Godot course is also amazing!!