AMAZING HEALTH BARS in Scratch - Easy Scratch Tutorial

Key Takeaways

hello fellow scratchers and have i got another epic scratch tutorial for you today you requested it and here it is health bars featured in practically all of our favorite games health bars are perfect for conveying health damage giving the player a sense of how they are doing and where to concentrate their focus to win their battle our game lemonoids is a great case in point these large lemons take a lot of damage but you can't tell how much or little health they have until that is they explode so the aim of this tutorial will be to create a reusable backpackable sprite that can be dropped into any scratch project to let us quickly add health bars to any given sprite or clone oh yeah challenge accepted let's get scratching to help us develop our health bars let's start a new project and throw together the most basic of games scratchy you have a role to play you will stay we'll just rename you as cat i want three cat clones to wander around the stage so when flag clicked we hide yes this is one of those clone factories i've talked about before where the original sprite stays hidden away now repeat three and create a clone of myself these three cat clones will be created so we need to do something with them when i start as a clone we'll begin by using a go to random position block each clone will then appear in a different location then point in direction to get a random direction we use a pick random with the values minus 180 to 180 great finally we have to remember the sprite was originally hidden so pop in a show block cool let's just give that a test oh sweet each click of the green flag has our three cats randomly scattered around the screen pointing in all sorts of directions but just to make this a good test we might as well add some motion too after the show block drop in there forever loop then we move in steps perhaps three steps will do and just to save time we'll use an if on edge bounce block simple and yet that does the trick this will make a great test bed for our health bars okay we want the health bars to be backpackable right so click the paint a new sprite button and we'll name this sprite health bar we need some kind of health bar costume to get us started i'm going for a green fill with no outline i'm going to draw a rectangle but first zoom right in like so you want to be quite accurate here so we'll use these grid squares as our guide starting at the center of the canvas count five squares to the left and one square up so we will begin drawing from here click and drag a rectangle 10 squares across and one square high once drawn your costume should read 40 by 4 pixels now using the selection tool we can drag the rectangle so that it snaps perfectly to the center of the canvas there we go and now with the shape still selected up the outline width to 4 but i'm going to change the color to gray next step is to copy the shape by clicking the copy button and then right afterwards click paste now we have two copies of the same shape great set the second rectangle's outline back to transparent and then drag it back till it snaps again to the center of the canvas over the first rectangle whoa that may have seemed like a bit of overkill to get us to where we are but i'm just trying to ensure that we can all get this looking beautiful and aligned for the final project this looks fine we'll come back to these costumes again later but this is enough to get us started so now for the initial coding okay navigate to the coding tab first we set up this sprite when flag clicked and this is another cloning factory so hide this sprite now let's assume that each cat sprite will clone its own health bar in which case we can drag in a when i starters clone to trigger for each new health bar we display first thing we'll need to do then is position the new health bar on top of the cat that's cloning it go to cat yeah right no this isn't going to work we have three cat sprites and scratch doesn't let us select which of these three we are trying to go to this is a problem we will have to find another way of getting the position of the cat sprite that cloned us inevitably this almost always entails using a scratched list in some way or other as we will need to support passing a number of bits of information between sprites like the x and y position of each cat for example so let's make this new list naming it healths and this is important make sure it's created for all sprites we need this list to be shared between all sprites so that the health bar can see the values put in the list by another sprite now before we move away from this sprite it's good practice to always initialize your variables and lists when your project starts pop a delete all of healths here under the green flag script if you don't do this you may find you get unintended and hard to explain bugs down the line ever seen those projects that say press this green flag twice to play yeah not initializing variables at startup is often the cause great click back into our cat sprite we're going to begin by creating those health bar clones so find some free space and drop in a create clone of block but rather than cloning ourselves now we will clone a new health bar sprite but we want to somehow tell this clone where the cat is on the screen this information we will simply add to our new list starting with the x position of this cat and then we do the same for the y position there do you see what we are doing if we click these ad blocks to run them you'll see the x and y positions get added to this empty list like so and this happens before we then create the new health bar clone that means that the new clone will be able to pick up these values when it gets created and if we happen to have more than one health bar cloned at once click the add block again then we get another set of x and y positions added to the list that's perfect let's not leave these scripts hanging around we'll wrap them in a custom block make a new block and name it show health or show health bar if you don't mind it being more verbose i don't like long lines of code in scratch so i'll keep mine shorter run without screen refresh and okay and we simply attach the define block to our new health bar spawning script down here yeah this is going to work great our next decision is where in the cat sprite scripts should we use this new show health block well since it's cloning a new health bar we might assume it should do so before the main movement forever loop begins here yeah we'll run with that idea now each of the three cloned cats will spawn its own health bar but if we click back into the health bar sprite we now need to use the x and y positions in the health's list to position each clone right so throw away the old go to cat meh and we'll replace it with a set x2 and a set y2 block the x position is the first item in the health's list and the y position the second item set y to item two of healths okay that's fine but if a second health bar sprite is cloned it will need to read positions three and four right well it would except after reading in these two items we are now going to delete them from the list to tidy up delete one of health's that is delete item one of health and with that item gone all the other items shift up so to delete what was item 2 we actually just delete item 1 again job done so with the new health bar positioned we should make sure it is shown start with a go to front layer to ensure it's displayed in front of everything else and then show wonderful because that means we are in a good place to give this project a test punch that green flag and let's see what we have made okay first for the positives we are successfully cloning one health bar per cat and what's more the health bars do initially appear where each cat spawns clicking the green flag over and over shows this to be true but the problem we face is that the health bars stay where they are and the cats move off we need to somehow tie these sprites positions together let's jump back into the cat sprite so we initially show and thus clone our health bars here this is after the cat sprite itself is cloned but before it starts to move around and therein lies the problem to keep the health bar tracking around with the cat we'd need to somehow keep feeding the healths list with the up-to-date positions of each cat it's a problem because that generally would mean quite a lot of coding to manage creation linkage updates and deletion of the list data and their respective clones but this is supposed to be a simple tutorial so i have a most interesting alternative simply move the health bar block from above the forever loop to be the last block inside the forever loop instead now before you scream but that will clone loads of health bars don't panic run the project that will create loads of health bars wow funky the good news here is that the health bars are following the cats it's just that doing so is at the cost of creating a new clone each time and well all these clones left behind as soon as a new clone is created the old one is superfluous and it needs to be deleted well to do that we need to return to the health bar sprite so what we are saying is right after the health bar is cloned we want to delete it again well that's not quite right because if we run that you'll see that the clones are deleted so quickly that we never even get to see them on the screen no that is too soon what we need is to wait until scratch has displayed the clone and then delete it this trick you've probably seen before we just drop in a weight block but wait for a very suspicious zero seconds how will that help well no matter how long you wait for in scratch using a weight will always pause long enough for the screen to refresh thus our health bar will appear before right away being deleted ready for the next frame run the project oh yeah baby now we are rocking you would never know that these health bars were in fact not moving but that we are continually cloning new ones the timing is such that it appears as a perfect single tracking animation i just love it we can hide the health list now no need to keep that in view so with the health bars moving around correctly we can focus on getting them to function like real health bars showing different health levels depending on the current health of each sprite but just before we do that i just want to add in one more tweak it doesn't really apply to this three cat test game but sometimes the sprites with health bars might move off the screen if that happens we don't want to be displaying this health bar any longer so if not touching edge if not touching the edge we are on screen this is the good case then we can do the go to front show and wait but if not then we will drop through and just delete the health bar right away just test that it still looks okay yep just the same great so let's check out the health bar costume at present we have only one costume and it represents a full health but as the sprite gets damaged we will need to show this health bar depleting okay let me step you through how i would draw these costumes we'll begin by preparing this initial costume select the inner green rectangle and then click the copy button then right away hit paste and we end up with two rectangles there we can select the first one again and change its fill color to black that's the depleted health color now grab that nice green rectangle and snap it back to the center of the drawing canvas it should then fit perfectly over the black one right the first costume is going to represent minimal health drag the right hand edge of the green bar to the left until it covers just one grid square that looks good but it would be even better if we colored it red oh yes that's more like it so on we go duplicate the costume and we'll expand the red rectangle by another grid square not only that but we'll also shift the color to the right just a bit the idea is that we'll slowly bring it back across to the green color when health is full and we repeat this process duplicating the costume stretching across by another grid square and shifting the color over and over keep doing this until we approach a full health bar and the color should reach fully green you should find this happens at costume number 10 splendid but don't stop there we actually need one more costume the costume 11 will be for our fully empty health bar so just select the green bar and delete it all together so why did we add the empty costume to the bottom here wouldn't it make more sense to have it at the top so that all the costumes were in order from empty to full yeah we could do that but one little scratch quirk can make this order work better we all know that sprite costumes begin at costume number one well an empty health bar surely would make more sense at costume zero don't you think well watch this if we switch costumes and i'll just pop in an edition block so that i can use numbers in here we switch to costume number one there we go the first costume appears but it just so happens that when you switch costumes to costumes less than one scratch wraps around and start cycling back from the last costume again well that means costume zero is actually the last costume in our list of costumes so ta-da by having the empty costume as the last costume we literally have also got it as costume02 and that will make scripting really nice and easy clever trick right okay return that back to the normal size and we'll add the switch costume block to the right after we position the health bar here we are going to tell this sprite how much health the cat sprite has and we'll do this in the same way we tell it the position using the health's list this will be item 3 of health's yeah another item means we need a third delete block still only deleting item 1 though but before we make use of this we should consider how health bars work here is a little weedy enemy he's got full health that's fine but look here comes a boss and boy they have oh so much more health so do we draw his health like this no of course not we draw the health bar just the same for both enemies it's just that the weedy enemies bar will go down a lot faster so health bars are really health percentage bars at 100 they are full and at zero well they are empty we can represent empty as zero and full as one so what does this mean for our change of costume here it means a health of one should display costume number ten and that's the full health costume so we just need to multiply item three by ten of course if you want to use more or less costume levels for your health sprite then just adjust this number accordingly great quickly now click back into the cat sprite i am dead excited to get this health working okay the define show health script we need to add the third item this will be the cat's health but we don't yet have a health to set well let's think ahead right click on the define block and choose edit we want to show the health at a given level so add a new input named health but rather than have each cat pass this in as a percentage we'll simplify this by adding the label of and another input for max that is max or total health and while we are here let's also add in some more features the label offset y and an input of y this will be used to bring the health bar above or below the cat sprite rather than being splatted right in the middle yeah that was never looking good so first off let's sort out the health we need a divide block to calculate the sprite's health as a percentage we simply divide the input health by max health and that will always give us one for full health and zero for no health and this y-offset input we're going to just add this to the y position of the sprite like so of course we now need to fill in the show health block over here with some input values for starters we'll assign each cat 10 out of 10 for health and try an offset upwards of 40 pixels right this is it pummel that green flag oh yes so right off we can see that the health bars have moved up above each cat that's cool but of course if you want the bar below then you might just switch to use an offset of say -40 instead there yay just play around with that until the bar is positioned where you want it next let's try reducing the health by half to five out of ten oh yeah so cool oh zero out of ten it's game over for these cats this is wonderful we can stuff in any health values here and a health bar's update to reflect the cat's health levels so we are almost there let me just show you how we can use this in a game to begin with we need a health variable make a new variable health and it must be for this sprite only so that each cat has its own health level then when the cat is cloned we set health to let's say three so a cat can take three hits max then we pass the health variable in as the first input to the show health block like so and make sure to change the of to reflect the fact that the max health is now three so they start with three out of three health to represent the cats getting damaged when this sprite's clicked just change health by minus one shall we give that a test oh you're in for it now cats click you and again and again now that worked just as planned three clicks and they are all out of health i guess it would make sense at this point to delete the clone yeah why not if health is less than one delete this clone click click click click click click click click click i win yay well you get the idea right so we have a really cool working health bar system going on here and the aim was to make this a really easy to backpack sprite so that it could be brought into any game well we're almost there the only issue is that this show health script is not in the health bar sprite so if we were to backpack it now we would be missing an important part of the scripts well no problem drag a copy of the define block into the health bar sprite now if you look at the finished health bar sprite everything is contained and ready for backpacking and although this show health bar script is not used in this sprite really it is now easy to drag it out into whichever sprite we need to use it in to demonstrate what i mean let's take the health bar drag it into our backpack and we'll add the health bars to lemonoids brilliant we are ready to go load up your lemonoids project and if you haven't followed that tutorial yet then no worries it's only three episodes so you could catch up otherwise just strap in and enjoy the ride take it all in and try adding these to your own games in a similar fashion so at present the player doesn't have health a bit of an oversight perhaps we'll have to come back and remedy that in another episode however these unfortunate lemons they do have health so we'll start there and add health bars to the lemons our first job is to open up our backpacks and drag the health bar sprite into the game next we need to take the define show health block and drop it into the lemon sprite cool now you can drop this script into as many sprites as need health bars it doesn't have to be just one let's click into the lemon sprite just need to tie that up a bit there that's better now we need to locate the main lemon movement scripts find with me the when i start as clone script here it is a forever loop containing all the movement blocks so if we scroll down to the bottom the best place to bring in our show health block would be right here after all the movement is complete the health bar is straightforward as we already have the health variable for this purpose the max health is a little bit more tricky we don't have one yet and what's more different size lemons have different amounts of health so to get around that we'll make a new variable named max health and of course it's for this sprite only we can drop it in on the right of the of health of max health that's right we just need to be careful to actually set max health don't we just before we do though let's also set the offset y to negative 30 so the health bar appears below the lemon okay so scroll up to the define new enemy script this is where the lemon clones are being created we also set the health to 15 right here so right after that set max health to match it 15. or better still just use the health verbal wow that wasn't so hard shall we give it a test yeah hey look at that the lemon is looking very tough and with its own health bar and shooting it reduces its health nicely let's destroy it and now this is something do you see a problem each small lemon is showing us having very minimal health right away now you may like this but my intention is that their health bars reset back to full the reason they are showing low is that even the smaller lemons currently have a max health of 15. so where do we split these lemons find the define enemy hit script scroll right down until you see the delete this clone this is the point where the lemon splits into smaller lemons health has already been set to the reduced amount just above so we can just set max health to the newly assigned health value testing again and now after they split each lemon's health resets and we have a better representation of lemon health ah but perhaps having the health bar on every lemon is a little ott some games like to hide the health bar when the enemy is on full health or we could do that but i quite like seeing the health bar on all the powerful enemies so instead find the when i start as a clone script and wrap our show health block in an if block and will only show the health bar on enemies with a max health greater than 1. that is lemons that need more than one hit to be destroyed play testing again here we go and now this this is a nice compromise the larger lemons have health bars and the smaller lemons don't brilliant all that's missing now is to add a health bar under the player 2. do you think you know how to add that well if not don't worry because i'll be making the official episode 4 soon enough and that will surely be a feature but i do hope you don't stop here i want to see these health bars in all sorts of other projects it's just too easy now for you to include them you'll find a link to the scratch studio for this tutorial in the video description so you simply must submit your game so that i can check them out that would be amazing let me know in the comments how you get along whether the cunning clone spamming approach is working for you or if you have any problems because there's so many ways to go about these things and i'm quite up to explaining other approaches in the future but for today that's all we've got time for if you've enjoyed the video smash the like button and don't forget subscribe to the channel so as not to miss my next exciting video thank you for watching have a fantastic week ahead and scratch on guys [Music]