 You're looking for a Scratch Health Bar tutorial to give you your place and visual feedback? Then check out this tutorial that creates a horizontal indicator using costumes. It's part of a larger series on trigonometry, but you won't need that, so let's get stuck into it in just a sec. Hey what's up crew, it's The Surfing Scratcher here, teacher-surfer programmer, and I help curious people just like you along on their learning journeys through video tutorials. Welcome to The Scratch Health Bar tutorial. I'm going to be using this little rocketry game to help us out with our understanding. If you want to use this project, there's a link to it down in the description below, but you won't need it, you should just be able to transfer what we cover in this video to your own context. Okay, let's get into it. The first thing we're going to do is paint a new sprite. I'm going to call this sprite health bar. There we go. I'm just going to zoom in a little bit. I've just selected the rectangle tool and I've changed the fill color to a green and the outline just to a black. I'm going to show you a couple of different ways that you could make your health bar. The first is just by getting that rectangle tool and drawing a rectangle. And having an outline on this rectangle. The idea is that we're going to have multiple costumes and each time we lose a life, we're just going to reduce the size of our rectangle just to show that it's disappearing. So that's type one. The other type of health bar is when we don't have an outline and instead we're going to have two different colored rectangles. So here I'm just going to draw a rectangle, I'm going to copy it by control C and then pasting it by control B. Then what I'm going to do is just change the color of it to that black color that you see here. And then we want that to go to the back. You might have the option that goes all the way to the back. And then what we want to do is hold down the shift key and just create an outline with that rectangle that's at the back. And the reason we do it this way is when our lives reduced, you can still see the background here. When we look on the screen, I quite like that way. So this is the way that I'm going to go with, but you could just do the other way. Just going to delete that top rectangle. All right. The next thing I'm going to do is get this green square. I'm going to put it right about where the center is. And what I want to do is I'm going to count five squares to the left and five squares to the right. So one, two, three, four, and five. I'm going to do the same thing for the right direction. So one, two, three, four, five. The length of this bar is now 10. And we're going to give our player 10 lives. So each time we lose a life, we can just reduce this by one square width. Now I'm just going to get our background and position it over. So it looks kind of gnarly. Now my health bar is quite chunky. So I'm actually just going to reduce the size of it. I'm going to make the height the height of one of these squares here. You can see our background is now too big as well. So I'm just going to reduce the size of that. I'm going to select both of those and I'm going to snap that to the center. And there you go. There's our health bar. This is when we've got full health. So I'm going to name this costume 10. Then what I'm going to do, I'm just going to duplicate this. Going to reorder them. So the one I just duplicated, I'm putting on top. I'm going to rename it to nine. And then what do you think I'm going to do? That's right. I'm going to reduce the size to nine. Rinse and repeat. Duplicate, reorder it eight and resize. Do it again. Reorder seven, resize. Now go ahead and do that for all of them until you have no health bar left. OK, you can see over here in the costumes, I've got all of those costumes organized and I've got zero for no health bar. And we've got one block there. The cool thing to do is that we could change the color of our health bar when we're down to one. So we could have this sort of red color to signify that we are running out of lives. We could have a bit of an orange color and a bit of a yellow color. There we go. So here we are at four. Here we are at three. Goes to yellow, two, orange, one, red and we're out of lives. Now we've drawn a health bar. Let's jump over to the code tab, head over to the variables category and create a variable called lives. I'm actually going to call this one ship lives for this game. Grab out a when the green flag is click block. Grab out a said block and find the one where we have ship lives or lives. We're going to set that to 10. Grab out a forever block where forever going to switch the costume to whatever lives is plus one. So ship lives plus one. The reason it's plus one is because we have 11 costumes. Remember, there's a zero costume with no lives. We've actually got 11 here. So the one we want, so if we're on 10 lives, we actually want costume 11. So 10 plus one. Then if you right click on ship lives and you go slider and let's just set the slider range to maximum value of 10. Then click the green flag. And then as I move this slider, you'll see that our health bar it actually updates, which is pretty gnarly. The way that you'll probably be changing lives in your game is by using the change block and you'll be changing it by negative one. So if I click this, you'll see that our lives update as well because we've pegged our costume number to the current value of ship lives. So now we can change lives from anywhere in our game and the display of it will be handled within our sprite here. You notice that as I move the rocket around the screen, our health bar is stationary and that's not very useful. So now let's peg the health bar to the position of the ship. Grab the go to random position block. And instead of random position, which is a little bit nuts, we're going to go to the position of the rocket ship. But it's currently on top of our rocket ship. So we don't want that either. We need to change its Y value and see changing it by 10 is making it up. But I actually like it below. I'm going to go about negative 30. Yeah, and that's a really sweet spot. So now if our rocket ship zooms around the screen, our health bar is pegged lovely to it. Might be a little bit close there, got negative 40. Now there is an issue because when our rocket ship gets down the bottom here, you can't really see our health bar. So what I'm going to do is I'm going to move the health bar above the rocket ship and I'll show you how to do that. Just over here in the sensing category, I'm going to grab out that reporter block that has those two dropdown menus where we can sense attributes of other sprites. We're going to sense the rocket ship and the Y position of the rocket ship. With the health bar currently selected, I'm just going to click the rocket ship now to see what its Y position is. So it's current Y position is negative 112. Let's remember that back over here in the health bar. So what we want to do is to check for when the Y position of the rocket ship is less than let's say negative 110. Because remember it's currently negative 112. Going to use a lot of that in this condition. Now if I click this, it'll evaluate to true because the current value of the rocket ship is negative 112. But if we move our rocket ship above that value, this will evaluate to false. Now false is just the same thing as zero and a true value is just the same thing as one. So the value of this block is either going to be zero or one. So when our rocket ship gets down here, we want to position our health bar above it. So we want to knock off that negative 40 and change it to positive 40. The difference between those two values is 80. So what we can do is we can grab a multiplication block. We can put in 80. The block above it is going to be equal to one or zero. So 80 times zero is going to be zero and 80 times one, well that's just going to be 80. So that's what this block will do now. Then we can get our negative 40 and get an addition block and place in our 80 times the one or zero block. And there you go. You can see our health bar went directly above the rocket ship. As we move our rocket ship around the stage now, it repositions itself and I don't mind that. Of course, you'll probably want to tweak these values to suit your project and hey, you don't even need to do this anyway. And that's how you can make a health bar in Scratch. In the next tutorial of this Scratch Trig series, we're going to get our rocket colliding into this turret and we're going to have some collision detection. We're going to be using Pythagoras's theorem and a little bit of sine and cos trig functions. And once we detect these collisions, we can update our health bar. So keep at it, we're halfway through. I know you've got this. Time for the Serving Scratches shout out. I'm giving a shout out to MK69420 underscore two, who requested a video on how to make health and damage in Scratch. So there you are MK, I hope that helped you. If you want a Serving Scratches shout out, comment on my profile with a video request or remix one of my projects and show me what you did to it. Or better still, go to our shout out studio and make positive comments on other people's projects. I love that stuff. I hope you found this Scratch health bar tutorial useful to use in your games. If you did, smash that like button and if you're curious about the game that we used in this video, you can check out the playlist on your screen right now to go assess it out. You'll build your understanding of trigonometry along the way. But until next time, I'm off to go find a way. I'll catch you in the next one.