GameMaker Studio Tutorial - Advanced Healthbars

hey there everybody is the dankest over here and welcome to the first of many game maker tutorials yeah so I'm deciding because like previously this channel has been a a gaming channel and whatnot you know had some games played some games had some Goossens of gas but lately I've been deciding I was like you know what I feel like I want to switch over to a programming channel because that is what like I mainly do is that I mainly program video games and stuff so I was like well what so let's uh let's start doing that um so the first tutorial that I'm gonna want to do here is something I'm gonna call it super awesome health bars because they are super awesome health bars but basically it's like it's gonna be health bars that look a bit better have a bit more functionality and just kind of are a lot more advanced than just your regular run-of-the-mill draw health bar right so let's start off by showing what we're gonna be doing here so we'll just let that load let that go so I made like a short little you know small little project of course we ran out of this load and just so we can check it out real quick and whatnot so I've got just some basic stuff nothing's you crazy basic little character here a very big health bar but just to show what we're gonna be doing here so we just got a little character everything like that so his health bar is showing 100 200 300 400 500 and like 50 health so for instance I've got the arrow keys programs when we like subtract help it's got like this little red bar that like follows it you know we got the health bar that just kind of gradually slows down and kind of winds down to where it's going also where it's going up so you can see we kind of get more health we can kind of heal right and we can gonna go boom boom when they take a ton of damage and we're like ow that freaking hurt right also something to mention is that like the health bars got like a little animation so in case anybody wants to do like little animations for a health bar it's kind of got that functionality too in it as well so let's go into it so first off we're gonna just take a look at the some of the sprites of course got a little player nothing too complicated got himself a kind of long animation that's just like - I could just do it so it's a - like image animation just slowed down the image speed but I was like nah let's do it this way then we just got a few little sprites here for just different little parts of the health bar so for instance we've got the health bar border which is just as you can see it's just kind of a fancy little part that goes over everything so it has like this white little line right here to kind of make it look a little glassy and whatnot so it's just a little thing it's also worth the mention that inside of this is the width of the health bar that we're gonna be messing with later so keep that in mind and the origin is in the center the origin of where the health bar is everything is based off of its in the center so it's easy to move around the health bar and everything like that then we have like a background we can kind of zoom in on this so it's just a little sprite that I made real quick just so this is like that you know of course the back of the health bar so everything's like in front of this is also centered but it's also the width of the actual health bar which in our case is 186 and then we've got our health bar which is just the sprite of course nothing too complicated enema and animation just kind of moves down and wraps around but of course this can change to whatever you want your health for animation to look like so this also keep in mind is not centered so you want to keep the origin of your actual health bar part 0 0 for the the sake of these this is tutorial examples so let's get started this is gonna be really easy because everything is set up and like scripts and everything as we can take a look these are all just scripts that we're gonna be making eventually for everything so let's get right to that so the first script we're gonna go into is I'm calling it setup cool health barber of course you can call it whatever you want just gotta make sure it has three arguments the first one being for the maximum HP which would lead of course how much healthier character has in the beginning moreover all the section size so this is how much HP the health bar will separated into sections so as you saw before in fact we can run that again to this is like how much health each individual section on that I'd like the health bar is going to represent so for instance each of these represents 100 health so that argument is 100 for 100 HP in between each of the little black lines and of course any of this you can modify so for instance you don't have to have like black lines or anything to like separate HP but you can like if it is in here in case you do want that so and the last thing you have is bar width and actually we're gonna want to add another one it's something I didn't do before is bar height as well so that way in our case we can say our health bar its width is 186 and it's height is 16 so that's something that we can keep track of and put in right here so first off we want to just take our first argument which will be zero as our max HP and just save that as a variable max HP so we'll have max I'm square age P equals argument and then in brackets 0 the next one we're gonna need is section size and use that these are just variables that we're going to save so that the other functions can kind of read them and keep track of them so section size is gonna be section size equals argument one because it's the next one then we have our bar underscore width equals argument and then brackets two and now I'm actually gonna add bar height equals argument brackets 3 so that will take out all of our arguments and put them in there so now we have a few more things we need to save so for it so right now we're gonna make a new variable called HP HP is is actually gonna keep track of how much health we're actually at so max HP is of course is our maximum and in our characters case right now is 550 so it's current HP is also going to be max however if you wanted to you can add another argument in here and say current HP and you can have it sir your character can start out like damaged already in the beginning of the game it's just up to you but for this sake we're gonna just set it equal to max HP at the beginning so we've got full health when he starts out now the next two variables we have here are pretty our first shell like whether helper actually shows so for instance this variable is called show underscore HP and we're gonna also set that equal to max HP the show HP is the variable that we keep track of how of like how our health bar is like the green part of our health bar where that actually is so for instance like when we subtract health from our character our HP is already gonna be down to where it actually is right but then our show HP variable is gonna like gradually slow down and approach our HP number which is pretty cool gives a cool little effect in one ton and the same thing goes for our red HP here because that's that red bar that came behind the health bar we're gonna set that to max at max HP so these things aren't actually used for any game mechanics third is here for show to give it more of effects and things like that last but not least we want to add this variable called index this is just gonna be index equals zero it's gonna be set at zero this is keeps track of the animation of the health bar this way this was to fix something because like our characters animation is like 28 frames long right but like our health bars is 16 so it's like odd so whenever the character would like animate and switch oh and like start over its animation it would start over the health bar animation - I'm gonna look a little bit strange so this is in here so that your health bar can have a complete separate amount of frames everything like that as opposed to what your characters doing and still look the same either way so this will just set up our health bar just this just gives our character all the variables it needs to set up all that like it's health bar now we first of all I'm gonna go into the create event of our character and I'm going to add in that last argument I put in so our bar height is 16 of our health bar just need to add that in to make sure that that won't crash or anything like that so now we're gonna have another one another script that we're gonna make called Ser update health bar and of course you can call whatever you want this isn't a step event well we'll get to that later well let's make that script first though so let's pop that dude out and take a look so it has no arguments it's actually pretty simple so let us call it STR underscore update underscore health bar for this is what I called mine of course it doesn't have any arguments so it's easy to setup this just keeps track of the aesthetic like look of all the the HP so first off we have our first if statement that says if our show underscore HP this will be our green bar right is less than our red HP which is a red bar then our red HP is gonna start subtracting and it's gonna so we'll have in our brackets red underscore HP minus equals and then I put this in brackets just because I like to but you don't have to we'll have max underscore HP divided by 500 now what this 500 is it decides how quickly the red bar behind our health bar goes down so you just kinda mess with it I liked 500 as the way like kinda goes down but you can raise or lower this to like change the speed at which this red heart health bar goes so it's totally up to you this just means that if our if our green HP the one that like speeds up and slows down approaching our actual real health bar the red bar will follow it if it's less than alright so they'll start just subtracting and going down as we go this is just updated every step of course so just always keep checking for this so that's that system in place now we have our next if statement and we'll start out by saying if HP is not equal to show underscore HP in our brackets that we're gonna have show HP plus equals in our pride the season we're gonna want these will have HP - show HP and then we're gonna times that by 0.1 so I'll explain really quick what that does so HP is our variable to keep track of how much health our characters actually at and our show HP is the green bar that speeds up and slows down to try and represent what character like what how our character is at so what this pretty much means is that if our HP is not equal to whatever our green bar is showing then this is just gonna update the green bar based off of like where the HP is now so for instance what this will do is it'll take the difference between it our HP minus our show HP it'll like do the difference between it and then times it by 0.1 which meaning that that if the booth if the distance between these two is greater this number will also be greater this and this is how much it's gonna add to it so for instance if our HP is a lot lower it's gonna be really quick the green bar is gonna be really quick in the beginning going back going like to show that and then it's gonna kind of slow down as it gets closer so whoa let's run the game again just to give that a little check and see what that's doing well so yeah so this is for instance as you can see like every time you see it's kind of quick in the beginning the green bar and then it kind of slows down so if I take out a lot like it kind of gets really quick you know and then like kind of slows down as it gets up to it so that's basically what this whole function does in our update health bar is that it will modify the green health bar to get closer to our actual HP showing right there all right so now this is gonna just modify a few more things so now we're gonna go with another if statement if our show HP which is a green bar is greater than or equal to our red HP which is the red bar behind it the red HP will equal the show HP minus one so basically what this is saying here is that if our green health bar is more than the healthbar the red health bar will basically just equal the show held fire so we have this statement up here that says if our like red health bar is greater than the green health bar then it'll subtract to get up to it but if our green HP is greater than or equal to R by H P then the the red each people just go up and equal it because it's just like behind it and we don't see it so and then we're also just gonna subtract one because sometimes the red HP just with the way the pixels work well this sometimes the red HP will kind of pop out behind our green health bar a little bit so we're just gonna minus one to that to make sure that it stays behind the green health bar and last but not least we have one thing that'll keep track of one more thing right here is that we say if if HP is greater than max HP so basically if our regular health just our real health is greater than our maximum health then our real health equals our maximum health this is just a little bit of a bracket to keep things like to keep our health bar so we don't like heal over our maximum there's another way that you can do it though that could also be really simple is that you can go HP and then there's this function here clamp we can put in our HP we can put in our minimum which is zero then we can put in our maximum max HP that's another way that you can do it as well I like to do it this way but there's like this is there's other ways that you can do that of course so just Mac to like to keep your HP within your zones and one thing that you can add to is that you can say if HP is less than or equal to zero we can add our little brackets right here now I also do what keep one thing in mind like I do my brackets a little bit differently this is just the way that I like it so that I'm so that my code makes sense to me and so you can kind of do this however most people I like to put it up here like that I don't like that too much so it's just keep that in mind now let's see if well if we have HP less than or equal to zero in our case we'll just say instance destroy but this of course will be whatever you want to do when your character dies so it'll be like show a game over screen you know make a death effect whatever in our case we can just say instance destroy just to make sure our character is dead when we're actually dead so something we can do to kind of show that are that there's like a real HP variable here is that we can subtract our health and so what will happen is that our green health won't actually be down there until we actually die so for instance as soon as I hit this next subtract our character's dead so it's kind of cool because like the green health bar is just an aesthetic thing that there is actually real numbers keeping track of how much HP were actually yet just it's kind of a cool thing to keep in mind anyway so if we go back to our update health bar this should be everything right here oh there's also one more thing now we have this index variable which is going to keep track of like the animation frames of our health bar so in the step event we just want to add index plus equals 0.5 now of course you can change this depending on what you want to do I liked 0.5 because that's the kind of animation speed I liked but of course you want to modify that depending on whatever you're doing so you can change things up the way you like them of course so if we go to our object player in our step event we just put in some code and then we put in our update health bar script right there and then that will take care of everything we need to do for that health bar so now we have just one more thing to go a little bit so now we have the script that's going to draw our cool health bar so for me I called it draw cool health bar you of course call it whatever you like it whatever make sense to you let's just modify this a little bit so we can get a little bit more of a better look here so this is pretty easy because we just have our draw cool health bar and then all we need is an X and the y and as far as our arguments we just need to so we're gonna start off with our script by saying var xx equals argument zero so that is just gonna pull out the X argument from our like the first part of the script the next one just var YY egos argument 1 which will pull out our second argument from the script so we just want to sort this x and y so that we can use it to do the rest of the math right here so whew all right here we go so the very first thing that we do is draw sprite and then our in our parentheses will have s be our health bar back which to remind you is not that one is this one which is it the background of our health bar we're gonna draw that very first it's sub images 0 something to keep in mind is that if the background of your health bar is animated you can just put in the index variable that we've been studying before and then that'll animate it as well with the health bar then it's pretty easy we just have our X X and our Y Y because it's just gonna be drawn right in the center of wherever we define our health bar to be all right so this is a little bit different or like we'll have this draw health bar script right here this is gonna draw our red health bar so we're gonna start out with draw underscore health bar and then we have our left parenthesis in our first argument for X we're gonna put X X which is up here - and then of these parentheses to make sure all the math is done correctly we have bar width divided by 2 and just to remind you that bar width is that variable set in our setup cool health bar so in our case we define it as 186 being our bar width for our health bar we're gonna advise that by 2 because we're starting off from the origin and we're gonna bring it back by half its width to make sure that it's centered the based off of our X X and we're gonna do the same thing here with y Y but we need to of course modify this a little bit because of adding in the new thing so and our second one will have y Y - and now we're going to start off our parenthesis and we're gonna go bar underscore height / - because we now have this new bar height variable as well so you can just change things when you need to then in our next after this next time we'll have xx + equals in our parenthesis bar underscore width / - and this of course just does the opposite of this it'll stretch out the health bar to the other side of the origin which is xx then our next one we have YY plus 7 so this one's a little different because the other one was 8 and this one is 7 and the reason for this and we're gonna now replace this with + and our parenthesis we're going to go bar height divided by 2 but I'm going to subtract 1 from it because what I found is that like part of the health bar the red health bar pokes out on the bottom so and I was like kind of one of those likes everyone those weren't pixel things so I'm just subtracting 1 to make sure that the health bar stays the red health bar stays underneath everything else but this of course will add in half of our bar height to be underneath the origin and then subtract about 1 to keep it all good so now for our amount of what we're gonna be showing it's a little bit mathy but it's not too tough we'll just have 100 times and then in parenthesis we're gonna have red HP / max HP this is something that you'll see a lot when it comes especially health bars and stuff is to make it so because health bars are based off of like a 1 to 100 amount so in order to have more than 100 health and show it we're gonna have to proportional eyes you know some like the 7th grade math stuff or whatever I've known maybe it's even like sixth grade or something like that I don't remember I didn't pay a whole lot of attention but we are going to just do a little bit of proportion thing to make sure that we get our read HP out of our max HP we're gonna basically converting that into a number out of 100 so the health bar can draw it accordingly and correctly then we just got some other numbers so it's back color is see black that's not gonna matter though because we're not gonna draw it cuz then we'll have our minimum color which is red and our maximum color which is also red just to make sure that the health bar that red bar stays red the whole time the direction is zero and this basically says that the health bar is going to go down from right to left and then we have these two ones that say show back color which we said is black but we're gonna say fall so it's not gonna show it anyways because we have our own background for the health bar and then we're gonna have false for show border so like normally you'd draw like a black border around the health bar we're gonna say nope because we've already got that taken care of with our other border as well so this kind of long line right here will take care of our red health bar so which is kind of crazy cuz it's just an aesthetic thing it's just kind of a fun thing but it's like it's like this big line of code that gets some like that to work but it's worth it in the end I say so now this is the more interesting part because I'm gonna draw our actually our actual health bar but we're not going to use the health bar function because it's an animated sprite we're gonna draw it a little bit differently so first we're gonna say draw underscore sprite underscore part basically what this function does is that we can get a sprite and then we can cut out part of it and then just draw that part we define like cutting out so it's really cool with our health bar because that way we can draw it without squishing it or anything we can just like cut it out this would also be a really cool function for using for like loading bars or something like that because you can have a cool animated like sprite of course and it can just kind of load and not like squish or stretch or look weird at all so kind of a cool function we have here and this is also gonna get a little bit mathy but that is of course how programming is so whoo here we go we are going to say first we're gonna define our sprite and our sprite is SB our underscore health bar which is what we define up there which is our green health bar it's sub image is index because it's what's gonna be animating and that index is a variable that we set beforehand so we're gonna put that in for sub image to make sure it animates on its own now left and top defines the coordinates that we want to start cutting out our sprite so for instance if we made our left if we're going to our sprite right here if we had our left at like 10:00 it would go like 1 2 3 4 5 6 and a 9 10 whatever right and then it would start cutting out our sprite right there but for us we want to start ours at 0 0 up at the top because we want to start it from the back which is why our origin is at 0 0 of course but I think the top left ignores the origin anyways but we're just gonna keep that as your zero anyway so our top and our left in our top are going to be 0 0 color we're gonna start up there now our width which is like the width of how much we're gonna cut out it is also gonna be a little bit of some proportion wing stuff so friends at the beginning where I'm gonna put seal in here which is a little function that rounds up any uneven numbers to the nearest hole the reason we're doing this is because sometimes the number if the numbers are decimals and they get weird pixels will kind of round a weird like it'll round differently anyways it'll like I think gotta round down or up depending on what's whatever's happening you know which will sometimes cause the red healthbar to show up and it still does even with putting seal in there but it makes it way less off then but this just helps it make look a little bit better and keep things in a bit order this just makes sure it's always rounded up I to make sure that it covers up the red healthbar so even if the numbers like 5.1 it'll round up to 6 to make sure that it so we're putting that in here to make sure it always covers up our red healthbar at least the best that it can so in our seal function right here we're gonna have bar underscore width which is how long our total width of the sprite is that we defined before is 186 it's pretty much just the same as doing this except out of 100 it's out of 186 so we're proportional izing but like the maximum is different in our case because we want to get a number out of one and 1-86 depending on how much health we're at just like here we're trying to get a number out of one out of 100 so some kind of cool so proportions I use a lot of course I mean a lot in programming games and stuff because they I don't they come out a lot so it's important concept to kind of get a hold of so we're gonna times that and in parentheses we're gonna do show HP which is our green health bar which is what we're drawing divided by our maximum HP so it'll get that kind of fraction times it by the bar width and this is gonna be how many pixels from the top and left we're gonna cut out from so for instance that this comes out at like 50 percent right if we write like half health it'll come out at half of 186 so if we go into our sprite it'll start out and we can do that real quick we can say whatever is half of 186 Boop / 293 so it's gonna start at 0 0 come over 93 pixels and then cut it off and it'll show us that much of the sprite and that's exactly what it's doing and that's what it will do interesting huh so we got that boom all done right there next we'll have like its height in our case it's 15 because like I said it comes at Polk's out a little bit for some reason we are actually gonna change this we're gonna change this to bar height minus 1 so our bar height is 16 and it's gonna subtract 1 to make it 15 which is the same number that we had but it just makes it so that we can change it depending on if we ever change our sprite whoo now basically what this has done is gotten our sprite gotten our frame and then it's gonna cut out a portion of it that's all we've done so far now we got to decide where it's gonna be drawn so we I think this is where it depends on the the Oh what is it the origin of the sprite so we're gonna do the same thing as we did before to draw our thing we'll have X X minus and in parentheses we'll have bar underscore width divided by 2 which will put our origin over half of the bar width and then over here we're gonna have YY - and we're gonna change this to be in parentheses we're gonna go bar height - - so now this one sure that that's all being drawn in the right spot and that we can change things just depending on like just a few numbers and whatnot so now now we've got these health bars being drawn we got to do we're gonna draw right now the little bars that separate how much health and displays how much health we're gonna might be showing so we're gonna set up two bars when a bar equals our just bar SEC underscore number which is section number which is how many different sections we're gonna draw is equal to max' HP / section size so right now if we go to our character if we have come up with setup cool health bar we'll have our max HP and in our case right now is 550 our section size is 100 so by getting dividing this we'll get max HP 550 divided by section size will have 5.5 sections in our health bar right now where'd that go where'd you go and then of course we have our bar width 186 bar height 16 anyways I do like I was just saying that because I don't think I showed this before but we have now whoop so now we've got a few more things to do we'll have our next bar which is gonna be section distance which is going to be the actual pixel distance between each bar so our section distance is gonna be bar width which is 186 divided by section number which we just got so if we take our bar width whoop what 186 and we divided by our section number which is 5.5 will get 33.8 with a little middle a little stuff like that right so this is how many actual pixels are gonna be in between each little line to show each of our sections so now that we got these numbers figured out we can pop a nice little for loop right here so we're gonna say 4 and in parentheses a lot I equals 0 to start at 0 and then we'll say I is less than or equal to section number which is 5 point 5 and then we have AI plus plus so first thing in our brackets we're gonna pop on a little brackets here and we're first off we're gonna say if I is not equal to 0 because we don't really need to draw the first one so technically other way to fix this is that you can just say I equals 1 that's also a way that you can just do that right here without putting this eye in here this I did this is because it made a little bit more sense for me and in the prints that are in the brackets for that end of that if statement will have draw set color for our line that will make him black and now we're gonna draw our line so it gets a little bit mathy here of course but that's kind of how it goes so we'll have our draw underscore line parentheses now we're gonna have another parenthesis because this is all one little argument right here so in our first set of parentheses which are these blue ones we're gonna have xx minus another set of parenthesis bar underscore width divided by 2 so this is first getting our origin up there or like getting the farthest left position of the top basically are the farthest left for our X's that we need to do then so that's that one set of parenthesis we're gonna plus then this set of parenthesis is just gonna be I times section distance which is like 33.8 right so and so as I cycles up and gets closer to our section number this will get higher and so it'll move over the line I'll line every single time so this is like that this is like the further it's like the left part and now we need the Y of that one which is my lot easier we'll just do YY minus and we need to switch this to be new print this used to be bar height divided by 2 so now these these two together get our left top position of the line that we're drawing depending on which section we're drawing woo alright so now we're just gonna do it again this will be the exactly the same as before because the X isn't gonna change just the Y because the X is in the same spot for the line so what you can do is that you can take this part right here all the way across make sure you get the whole thing copy that paste it right here but I'll read it again so we'll have our first parenthesis our first parenthesis we're gonna go xx minus another set of parenthesis bar underscore width divided by two and we got to make sure to close those up we're gonna have plus then we're gonna have two more parenthesis and we're gonna say eye x seck underscore distance okay we're out of our coma they're gonna have YY and then we're gonna have plus and we're gonna do the same thing as we did before bar height divided by two we're in parenthesis right there and we're gonna subtract one to make sure everything stays in the right place because I would like come out so that what draws all of our lines for each of the sections now last but not least we'll have draw sprite and this we're gonna draw our health bar border it'll just be SBR and a score health bar and it's called border because that's what we named it some images 0 and then where it is is xx and YY which is what we put in whoo okay so now that we've got that script figured out we can have draw and then this is easy to do because first of all new draw itself so that we make sure we draw our player and then we want to do draw underscore a cool health bar and it's x and y is gonna be x is just right in the center of our player and then it's y is gonna be Y minus 30 so we just put that in to be the center of our health bar and as you and as we've seen before the health bar is centered and right above our player just like we told it to be how awesome now huh we've got basically everything in place for the health bar the only thing that we have now is that I have press up and pressed down here to show like subtracting or adding to the health bar so up we'll add so in the script it's really just HP plus equals 50 that's all it does so whenever you want to modify health for a player or any sort of object with all this stuff it implemented you just do HP minus or plus one whatever number it is for damage or writer like that so if we look at down HP is minus equals 15 these are just in here to show that we can subtract and add health as we want so we can change things up for instance we can add this to be like twelve seventy right like 1270 health we can change that and then we can start it up and boom so everything's still the same except now we have one two three four five six seven eight nine ten eleven twelve plus like almost another one for sections so we can on my book at this character and say yep he's got a lot of health but then we can go and we can be like we can be like 120 going here and we can wait a little bit and then as it goes Dada if we have like 100 and then like 20 so we can automate in the C is cared to be like yeah he's gonna die really quick so if we minus 50 from him like he takes a huge hit and think another like huge hit so kind of interesting but is also worth the note that the read health bar goes up or down the same amount no matter how much help you put him at that's just something that was kind of neat about it but yeah that's pretty much it for this tutorial one also thing to keep in mind is that this isn't just like a player thing you can lot of file this to make sense for like individual monsters and stuff because their scripts it's really easy to set up so for each new enemy you can just define its health the section size which will probably be the same the bar witness I'll be the same just like its health will be different in the staff event noodles to update health bar and then draw you can just draw it differently so it's cool that it's in little scripts because then you can add it to whatever you want and it just automatically puts everything in and it should all work oh wow we can take a little bit deep breath and uh and just sit here and play with like a Health Barbara thank you so much for watching please leave like you enjoyed this video and subscribe if you want to see more always remember to have a complete breakfast and I'll see you guys next time adios

Channel: The Dankasaur

Views: 1,844

Keywords:

Id: iMLcjbk0Jdc

Length: 37min 14sec (2234 seconds)

Published: Sun Sep 24 2017