 One of the most prominent features in Zelda Breath of the Wild is the stamina meter. You see this almost the entire game and I think it's where your eyes are most of the time, at least they were for me when I was playing it. And I was wondering if I could create something similar in Godot. So I'm gonna try to create a very simple version of it, of course I'm not gonna go through all the effects, but so you get an idea of how to draw these kind of things. I'm gonna be using here, there's like a ruler mode that they added, I don't know exactly one, I think it's 3.2, but if you see here when I click and drag you can see like the distance in elements, this is very useful when you're just planning things. But if you know this there, there's like an arc that forms to show the angles on top right and bottom and I'm gonna be using the same function that Godot uses to do those angles to make a stamina meter like in Breath of the Wild. This will be living inside a 2D node because it's what actually a node that can be placed in a 2D game and you can also do this in a 3D game but I'm gonna be only working with this in 2D for now. And let's add a script, let's call this stamina meter. Okay so first of all let's remove everything, as always we don't want most of this template and to do this drawing we will be using the draw function. Okay we're also gonna need some variables so for instance stamina let's say it's based on a 100 scale so zero you have no stamina 100 you have it full and since we don't have anything connected as a game let's do some basic inputs on the process. Now this is only for testing purposes so if input is action pressed I'm gonna be using the pressed I'm gonna use the default UI up and UI down where is UI up okay I'm gonna be using the defaults which are the RO keys up and down if it's up stamina will go up by one and if input is action pressed UI down it's going to go down. Okay I want to print this stamina to see if it's working and let's try it out very quick of course saving the scene so testing scene and we see here that it's doing that if I press down it goes down if I press up it goes up the problem is that we are getting over 100 and under zero so to fix that there's a function which is called clamp so stamina equal to clamp and now you set which variable you want to clamp in this case is stamina and what's the minimum value zero and what's the maximum value 100 so that way I'm gonna select this thing that way when we are pressing down it goes to zero and even if I keep pressing down it cannot go lower but if I press up it goes to 100 and it cannot go higher than 100 so that's it that would be what you have in your game and this is the variable that you might be using in this case of course it's just for testing now let's go to the drawing part of this we want to represent this with an arc the function that we're gonna use it's called draw arc and first argument is the center so since this is a new function that I found in 3.2 it doesn't have any documentation but the arguments are enough for you to understand what what is this all about this case what I'm usually doing when I'm learning something like this is I copy the documentation settings and I add a comment on top of it so I have a reference of what the arguments are so this is easier for us to you know like be using them even if you have them while you're typing just as a reference so now center this is the center where the circle is going to be in this case we don't want it anywhere else but in the zero position which is right now this x node the position that we are by the way I made this full screen by pressing here in destruction free mode since we're only going to be using code I don't really need the rest of the stuff but yeah it's going to make things clear I can also make even the font bigger for people watching in mobile okay so we have the first one now the radius this is basically the size that we want to have the circle in this case let's start with 40 which is a random number and let's see if we want to make it bigger or smaller now the starting angle since this is an angle that we're doing and not a circle we need to start and end in the same place so that way we have the full thing and it looks like a like a ring you will see it now better since we don't know the values let's start with a random number and later on I can set the ones that I discovered are the best ones now with the end angle the same we want to end somewhere let's end in zero and see where zero is now we go to point count this is how many sides the arc will have so if we have 10 it will have 10 corners but if we add more you're gonna have more let's start with something like 20 and see if we need to add more or less now we need a color I got a green which is kind of similar to the one used in Breath of the Wild but you can use whatever color you prefer seven one eight nine five eight okay this is going to be the color of the arc now the next variable is the width let's start with something like 10 and last one is anti alias so we want to have this to true so the borders are not very sharp but I created an issue in github because when I was testing this code in my mac I could see the anti alias in working but here in windows it is not working from what people told me in the github issue which is right now on screen I hope it could be because of my graphics card or maybe it's just a bug from the engine but I would recommend you to leave it on and if you can see it good and otherwise you will see the default one so let's see what happens when we run the project now okay we see we have an arc it's a little bit thinner than we expected and it's not entirely completed we can see like the anti-aliasing is not working but at least we have something going on right now it's not tied to anything to the stamina or anything it is just the drawing of that thing so let's try to now tie it with the with the stamina and making it look a little bit closer to what we have in Zelda I was testing for a while and the variables that seems to be good are for the width 37 seems to be the good one the start angle it's 4.7 and the end angle is minus 1.6 I got this but by testing a lot of the values let's see how it looks okay now we're having a better circle if you see there's not enough corners for it to completely close and since this is meant for drawing arcs I think that this part over here it's having that issue so let's add more sides to it here it's the point count I found that 800 was a very good number to make it look very round and good okay so we have it now and since we're going to be using this and later on you will want to have like a smaller circle around like in that or you want if you want to add some different arcs I will move this into a function so instead of drawing it using the draw arc let's create our own so we can duplicate it and do as many arcs like this as we want tank draw stamina meter let's go like that so we will want to have the position we want to have the size because that's of course like relative to whatever we want the width and the current value and the color with these properties we will have enough to make a good arc so let's copy the code that we have and let's replace the arguments so now position will be this one the size remember was the size it was this one the 40 now we will go to this and this the points we want to have them 800 because we know that we are going to be using circles color is going to be color that we set and the width is going to be 37 the anti-aliasing we want it always on so now let's replace this with the name of the function that we created so position it's going to be vector 2 size is going to be 40 width it's going to be 37 and we are going to create the variable that we're going to be modifying which is current angle and let's set it to the minimum and this is the value that we are sending as current to track the position of it and the color will be the color that we set before so now that we have it let's try it out it should be the same as we did before okay it's looking good so now instead of making it like complete like that let's go back to the zero version of it let's try it out again it's not finished okay and let's add the background to it so we can add the background and it's going to be like only size 1.6 and for color I'm gonna do something like a transparent gray so it's going to be RGB 0 and 0.5 the width has to be the same and now if we see we're gonna have like the background to it yeah okay so now we have the green part on top and the dark part behind it and now for the last part let's save this as variables so mean angle it's the minimum that we had before max angle is the maximum because we're going to be needing these values let's replace them max angle here minimum here so if you want to make it not a circle you can just modify this too and let's translate this value to a scale that we can actually get from the stamina so if we are 50% in the stamina meter we want to display the green arc only until here and if we are in 20% we want to go there and if we are 0 to 0 so to do that we have to do like a rule of three but a little bit confusing one so we want to have the mean angle we want to modify multiply by minus one so we make it positive because we need to get the distance like like the interval sorry and we add the max angle and we divide everything by 100 so the current angle is going to be the max angle minus the stamina multiply by value just for this case I think it works enough it's very weird that it's from minus 1.6 to 4.7 it would be great to have these values in draw arc from 0 to 360 like degrees but since it's not like that we just do that thing and that's it one last thing if you notice now we are going to be updating this current angle we're not sending it to this so let's get the current and current is going to be that one okay now everything should be set but whenever we are using the draw function it will not update automatically every frame like if the process one does so if we try it out and I press up and down let's go back to this mode you see that the variable is changing in the output in the terminal but the drawing is not to make it update you need to call the update function so since we know that we're gonna be pressing these two buttons when we want to update it let's just go here and check if up is pressed or down is pressed so if we pressed any of those keys we want to update you have to call this function which will make the draw function update which will call our own function that draws the let's see for a ground okay draws the arc okay hope that made sense now if we are okay let's see 50 percent we got to zero and we have the thing ready I think it looks kind of nice of course like we could add more effects in I think that in the game whenever you are on 100 like there's like a bright green on top of everything like when you're like getting less like you get like a red thing over there but you get the idea like with this you can draw everything like this so now that we have this function let's try out drawing a different one we don't need the reference anymore okay let's draw a different one like around it let's see let's make it like this was the size right yeah second size let's make it a little bit bigger and a little bit thinner and let's do like red let's see I have here okay and instead of using current angle let's do just a random number like two I don't know like to see how it looks like it's not gonna be bound to anything but yeah we have here the outer ring is the one that we just added there and yeah that's it for this tutorial I hope you like it and I'm sure that you can extend this to a lot of your games you can make it look whatever you like you can add twin to it to make it go smoother instead of just updating the position like that but I hope that you found this draw arc function useful and that you can use this in your games I would really like to invite you to my discord channel which you can use to ask me any question regarding the tutorials or if you want to talk with other people that are making programs or just got out projects in general just join with the link in the description and if you want to help me make more of these videos you can always find a link to my patreon and it's thanks to the patrons that I can be doing these videos so thank you very much see you next time bye