GameMaker Studio 2: Health Bar Tutorial

hello everybody I'm gonna be showing you something very quick and simple today we're going to be talking about health bars but just as a very very basic level so I'm going to assume a couple of things I'm going to assume that you have a player object or an enemy or something in your game that has a value in this case like health or hit points but any any kind of value really that you want to visually represent in bar form and I've got this player if I press this button I can shoot them with some bullets and makers as health go down right so this is what I'm gonna be showing you how to recreate okay so this is the situation we're starting from we've just got our player object here he has some hit points and when the bullet hits and it is being reduced but we're not seeing any visualization for that okay so let's close this down the things you're going to need for your player or whatever it is that's you know cranking hit points or manner or money or whatever it is you're tracking in your bar you need to have a variable that's tracking what that value currently is and then importantly and this is what you may or may not have depending how you set up but have a maximum okay so now how you set this up I've just got a point smacks to equal whatever I set my hit points to in the create event of the player object you can set it up however you want you just need to make sure you have these two values okay so you've got the value you're tracking and the maximum that value can possibly be now let me show you the graphics I've got that we're going to be using to set this up I've got this image s health bar which is just a one pixel long strip down here or its origin is miles off there of some reason it doesn't actually matter for the sake of this but we'll put it in the top left just to be clear but I'm yeah the image is literally just a one pixel wide red strip with some highlight on top and some shadow on the bottom and what I'm going to do is basically stretch this image to a width appropriate for however much health we've got okay and then the other two images I've got is a border image s s health bar and score border and a background image to sort of a transparent black with these two just want to make sure the origin is exactly in the top-left of wherever we weren't going to want to draw our bar from okay so that I think it's 12 pixels high health bar and it's going to be drawing from here all the way to the edge of this okay so the first thing we need to do to set this up is to decide some new variables to tell us a little bit more information about our health bar how big it's gonna be and where we're gonna put it okay these are just arbitrary values I've come up with for the sake of demonstrating this what they'll be in your game depends on your game and for the coordinates you could do a whole series about trying to you know do coordinate systems for UI it can be a tricky thing in game maker I'm just gonna throw together some magic numbers that give us roughly that middle of the screen okay so don't worry too much about the numbers and I'm putting in here you'll want to work them out for your specific game okay it's it's not too hard to do the first thing I'm going to put is health bar underscore width is going to equal a hundred okay so since we've got a hit points fifty maximum hit points 51 hit point is basically going to end up translating to two pixels right and our health bar height is going to be twelve that's literally just the pixel height of that health bar sprite I showed you a minute ago a health bar X is going to be it so we're going to have health bar X and health bar Y which is going to represent the top left position of the health bar the same place we put that the origin point for this okay so that's the position that we're actually going to draw the health bar from just come back to here and for me in this little demo that is the resolution of the little game which is 320 pixels wide divided by two to sort of give us the middle of the room - health bar width divided by two okay so I'm just gonna end up putting putting our health bar exactly in the middle of the screen right because that's that's the center of the room and then subtracting like half the health bar width is gonna going to Center it okay and Irene health bar why it's gonna equal just the Y start of this player object it's just you're just really arbitrarily I just just want to get it on the screen as I say your coordinates will be different for your game minus 100 so just 100 pixels above wherever we placed the player all right so just declaring those here just helps us out because it means we won't have to keep redoing these calculations when we come to actually drawing the health bar which is what we're going to do now so I'm gonna use the draw GUI event for this important to remember with the draw GUI event that it draws a relative to your application surface or kind of you know the display these might be an easier way to think of it rather than to relative to the room okay so when you declare coordinates you're kind of thinking more screen coordinates then you are thinking a rather window coordinates rather than thinking room coordinates as you would normally be okay you could use the draw event as well if you just want to draw it relative to the room if you want to like follow an enemy around and also on your drawing health bars above the player or above an enemy and that kind of thing and having to move around this isn't that just for the purposes of this I'm gonna use the draw GUI event okay the description for this I'm gonna put as a health bar just a quick reminder there that if you do this these three slash is an app desk and or a description and then write something here it'll appear here and your little events let's go draw a GUI health box that's the whole purpose of this event alright then it's only three functions that we actually need to do we're going to draw first of all that background that dark sort of transparent black oval shape in the background remember when you're drawing things you're gonna you're drawing in the order of back to front okay so you draw something first then you draw something on top of it and draw things on top of that and so on okay you always drawing on top of the last thing you drew so you drew your the things at the back first so draw a sprite s healthbar underscore BG is the name of our background sprite frame zero and the x and y for it is health bar x health bar y okay simple as that this is where like you can start to do all kinds of things like you could be tracking a value to animate some of these elements over time and increase that all kinds of different ways of doing health bars okay for drawing the bar itself and this is the thing that can vary the most from different approaches to this but I'm just gonna do the absolute simplest or one of the absolute simplest which is draw underscore sprite underscore stretch okay we're just going to take that one pixel wide image we've got and just stretch it to fit the health bar based on how much health we have or don't have so s health bar frame zero that's sub image zero wrong how far let me show you as well so you can see exactly watch I'll give in to putting in here so we've given at the sprite we've given it the sub image we need the x position and that's the our top left that we worked out so health by X then health bar Y so that's our nice top left position and then what we do is we have to give it a width and a height to stretch out now when you do draw a sprite stretch it ignores the origin point and that's why the origin point of our s health bar being like miles off at the beginning this video didn't matter because it ignores it and it's gonna treat its X&Y and it's going to always draw from the top left of wherever this x and y is so when you add with do it it's going to draw it out to the right from that position when you add height it's going to stretch it down okay it always works like that so we give it our top left there and then we need to give it our width and height and then this is kind of where the magic happens of converting our current health into the appropriate width how do we do that well what I'm going to do is open a bracket and type hitpoints divided by H P max okay that is going to give us a percentage right it's going to give us our hip points divided by our maximum so if we've got 25 hit points out 50 it's going to come back as not 0.5 if we've got full health it's going to come back 1 have with no health it's going to come back as 0 and having that value between Norton one allows us to then just multiply by health bar width okay Simo our maximum health bar width is a hundred pixels so by multiplying that when we've got full health it's 1 times 100 so 100 pixels half health it's not 0.5 times 150 when it's with no health it's not times hundred which is 0 right that gives us our appropriate fix it with that's really this is the main takeaway of this video okay if I'm honest just the the very quick cell or what once you know how to do that you can use that to create pretty much any kind of health bar okay so you know how wide or how much or how much of a percentage to draw something just drawing something out based on a percentage of something else okay that's the main idea here and then you can use any of the different kind of draw the draw sprite part is a really good one for drawing like really fancy animated health bars you can do all kinds of different things even draw rectangle to be even simpler than this but okay so the other thing we just need to put on here is the height of the health bar and that's very simple that's consistent okay that's no bearing interchange that's just health bar and score height that's just 12 pixels down just keeping it at the height we drew the thing close the brackets let me go on okay and that's drawing our actual red a health bar and then we'll just put the the cover on the top so I'm just going to copy and paste this line and change health barbg to health bar border right which is a great border that we're wrapping around it and that is everything as I said it was just three lines and that's all of them so I'll go ahead and run that now and we'll see what we had at the very start the video which is this health bar bunk bunk there we go works a treat one thing you'll notice with this health bar is that if you if I just added like hit points we'll see cool Oh at the end of that it will overflow so you can see that's sticking out the edge there if maybe you want that that could be fine if you don't want that to happen well the easiest way to not make that happen is to just make sure your hip points never actually goes above your maximum and your actual logic but if for some reason you wanted that to still happen but didn't want to draw it off the edge and the easiest thing to do is just to wrap this whole thing in a min statement okay which will return the smallest of the values you put into it so we're going to put that value into it and then just a health bar whip into it okay so whichever is smaller that calculation or the total width of the health bar and then when you run that even though we've got that at the start here with an extra 12 hit points you notice the bar still full so it will take a few hits before entry drops down and there you go so that's how you can count that off if you need to I hope you enjoyed that one guys very quick video this week as I say there's a million and one different things you can do with health buds and we might explore some fancier tips and tricks for doing them in later videos but for now I just wanted to really clear this one out of the way and show you the very basics of setting it up because once you understand this really the world's your oyster and you can do you can do all kinds of things okay this formula here really is just the main takeaway okay just for showing how to use a value between naught and 1 times the thing to give you a bar or a percentage or something right okay thanks for watching catch you guys next time thank you as always to all of my wonderful patreon supporters and in particular and in no particular order to the following vows the dog burger TT daca Donder don't cry 2 0 3 1 8 do want do be Gabe hair her young-jin James L Andersen James Higgens Jason Joseph Wetmore kimi wa sahlan p lemniscate max M Michael Ward Owen Morgan Pierce relentless Rex Renee dam Robert churches Rove and darlin run roopinder shmatte see show go 0 for 1 0 Samia and yellow la glue Steven Hagen T lesson Timothy Hamilton Travis Womack Victor Stuart Zachary Locke sepia flame and Zinn own me thank you all so much thank you all so much for your support catch guys next time

Channel: Shaun Spalding

Views: 77,949

Keywords: Game Maker (Video Game Engine), Tutorial, GameMaker Tutorial, GameMaker, Game Development, Indie Games, Tutorial Series, Game Maker Studio, Making Games, How to make games, GameMaker Studio 2, GMS, GMS2

Id: 2iRKTFxT75Y

Length: 13min 49sec (829 seconds)

Published: Fri Sep 20 2019