[Intro] Hello Fellow Scratchers – You may
have seen my previous tutorial Amazing Health Bars where we created each health level using it’s own
costume – but so many you wanted more – Asking how can we create a health bar with a beautiful fluid
animation, from full to empty, without those pre-defined steps. And, it just so happens,
I know a really cool trick to achieved just that! And before you ask, no, it’s not using pen,
because then we couldn’t layer our health bar over other vector sprites, like this, and we want this
looking super crisp & hi-res at all times! Yeah this looks sweet! So how’s it done?!?
[How it works] And this is clever,
the health bar is simply made up of two sprites. The base costume is a fixed half full health bar.
Layered on top of that we have another half bar, and this one we slide left and right.
When combined with the lower bar, this gives us a flexible 50-100% health bar. How cool is that?!?
But, how then do we explain the lower 50%, Well now!!! Once we reach the half way mark,
we cunningly switch from half a full bar costume, to half an empty bar costume, and with this we
continue sliding it down over the remaining base health bar, literally blanking it out as we go.
Brilliant – So, stay tuned as I guide you through the coding process, but in
essence – you should have got the gist. I really like this technique as it only requires 3 costumes
to accurately reproduce any level of health! The base, the Empty and the Full costumes.
[Sponsor] Plus because the health bar
is costume based, we can decorate and enhance them to fit any game genre. Like those you might see in
today’s sponsor video “RAID: SHADOW LEGENDS”: I’ve always had a soft spot for great looking
games, and this mobile game - it’s like a true console-level experience on your phone!
Raid has more than 600 Champions blessed with their own unique skills,
making for endless fun assembling, developing and equipping your dream team.
My top 3 champions are “Cleopterix” – Yeah, because she reminds me of a
Griffin, ha! No bias there then. Then there’s “Hurndig”, an awesome
Legendary Dwarven King who packs a punch with some serious firepower!
And finally there’s “Nekhret the Great”, he may be a bit spooky, but hey – It’s that time of year!
Talking of which; Right now, Raid is running an amazing trick-or-treat promotion Halloween,
where you can win a bunch of real-life and in-game prizes - including $1,000 Amazon Gift Cards,
and some of the best Epic and Legendary Halloween Champions in Raid. And it’s all
free! All you need is your Raid player ID, so download Raid with my link in the description,
then head to trickortreat.plarium.com – to spin the wheel and get your prize. This special event
runs October 15 to November 5. Only new players can win a prize,
but this “DKRISES” Promo Code is available to both new and existing players till October
25th and for a whole bunch of free items to instantly level any of your strongest Champions
all the way to Level 50, 5-star Ascension And if you haven’t started playing RAID yet
click my link in the description or scan my QR code here on the screen,
you’ll get unique bonuses worth $30 We’re talking a free Epic Champion - Tayrel,
200k Silver, 1 Energy Refill and 1 XP boost and 1 Ancient Shard!
All this treasure will be waiting for you here [Let’s make this]
Ok, so we’ve covered the theory, if you want to go away and try to work out the scripts yourself,
then wonderful! Take a moment to smash the like button on my video first,
and come back to watch the rest of the video later :D – Otherwise, let’s just breeze through
how I went about it – right now. Guys let’s get Scratching!
Start a new project. We’re keeping the Scratch Cat
sprite today! *hooray*. But let’s make it draggable on the stage.
When green flag, set drag mode to draggable, that’s in the sensing category – not sure why!
And now, we can drag the cat around in full screen mode, nice.
Next let’s define how much health our cat has – make two new variables for this, “MAX HEALTH”
for all sprites, this is how much heath our cat has when they are full - I’m going
to set this to 200 – Loads of health! The next variable we need is the actual
health variable. So call that HEALTH, again for all sprites.
And set HEALTH to MAX HEALTH – So they begin fully charged.
Lastly, right click the health variable reporter and change it to a slider.
This will make testing nice and easy. We just need to set the slider range to be
from 0 to 200 matching out max health. Great – I’ll name this sprite Player
[Draw a half filled health bar] and we can move on to
create the health bar itself. Create a new sprite, naming it “Health Bar”.
Ok – Drawing this health bar is actually probably the hardest part of this process because to make
sure everything lines up and overlaps, we have to be super accurate! So take your time and don’t
worry if it takes a few tries to get it right. To make lining things up easier, I’m going
to switch to bitmap mode. Then zoom right in close,
and with the rectangle tool, and a solid black fill, Count 6 squares to the left of centre,
and one square up. And being super careful that it is perfectly aligned,
draw the rectangle so that it continues another 6 squares to the right and one down of centre.
Take the time now, to double check your boxes edges are perfectly in line
with the background grid, if not, you’ll have to made adjustments.
Cool. This next bit is more fiddly. Now with a red fill I’m going to use the brush tool at size 2
to just mark the edge of this costume. This is a size guide if you need it… But
when you get used to Scratch’s paint editor, you may not need to do that.
And so with the solid rectangle tool, we draw the inside bar leaving that same 1
pixel border all the way around. We need to stop exactly at the half way point here! Wow,
I wish we had some more Scratch drawing tools to help us line this all up.
With that done, I’ll just delete that little square.
Beautiful, let’s name this costume “Base”. [Coding the Base Health Bar]
So this needs just a few scripts to position it correctly above our Player sprite. I know
you guys don’t need me for this bit. When flag clicked, set costume to Base.
Set size to… 300 for the video, but set this to any size you want.
Then we want it in front of the other sprites, so go to front.
And then to ensure it moves with the Player – forever, go to, Player.
Of course, we don’t want this plonked right on top of the player like this,
so add in a change y by, 70. That’s better!
[Funky sliding health sprite costumes] Next up we need that funky sliding health sprite!
Come back into the Health Bar’s costume editor, and duplicate the Base costume.
Then with the selection marquee tool, carefully select and delete the right hand
half of the costume. I just hit the delete key. Then do the same for the left most edge too.
Right! We’ll come back to this, but for now duplicate the costume again!
This costume needs moving a full costume width to the left. And this is not a mean feat. What
I would recommend is again using the brush to paint a marker where the current costume ends,
and then using the marquee tool, select and drag the main costume over to the left,
make sure to hold the shift key down whilst dragging to keep the costume on a perfect
level. And drop it lined up with that dot. Nice – Remove the dot, and we should be
able to switch back and forward and confirm it’s all lined up correctly.
Ok – the hard work is over. Let’s name this costume “Full”, and clicking back into the 2nd
costume. We just fill this pure black. Because this costume is our “Empty” costume. Great.
[Health Bar Clone] So as you may have guessed we
are going to use a clone to make the sliding health bar rather than a separate sprite.
Drop in the create clone of myself just before we begin the forever loop.
And when I start as a clone, we can just duplicate the same forever loop
up here so both health bars are doing the same thing, one in front of the other.
Now a clone is always created one layer behind the sprite that created it, so it makes sense
for the clone to be the base health bar. In which case, we’ll drop a switch costume to
Full just after creating our clone, so that the first loop is now handling the sliding top bar.
If we smash that green flag, you’ll see that we have managed to position the sliding sprite,
way off to the left. Don’t worry, this was intentional, to get to full health,
we just need to slide it a full health bar’s width to the right.
In which case, we need to know exactly how wide our health bar actually is.
Checking in the costume editor, it’s 48 pixels… But that is the width including the black outline.
The inside rectangle is 2 pixels smaller, bringing that down to 46 pixels in wide.
We’ll make a new variable to store the width in. Name it “width”, for this sprite only.
And we’ll set width to 46 pixels, but don’t forget we’ve set the size of the sprite to 300%.
We need to do the same to this width variable. The sprite size, divided by 100 is… 3. Cool,
so multiply 46, by that to get the full width of the health bar on the stage. That’s 138.
So, change x, to move the floating health bar to the right, by width.
Oops, I changed the costume when I went into the editor, click the green flag to reset everything…
And there! We’ve got out full health bar at last :D – Nice work.
[Making the Health Bar Move] But full health is only the first step,
now we want this to slide back to the left as the actual health variable is decreased towards 0.
To make that easier, we’ll introduce a new variable, naming it “percent”,
for this sprite only. Rather than having a health from 0 to 200, we’ll represent it as a number from
0 to 1. We can do this by setting percent to the result of dividing the player’s current HEALTH,
by their MAX HEALTH. If we run that now,
you’ll see that at full health percent is 1, and at no health percent is indeed 0. Great,
because all we then need to do is alter this change x, multiplying width by this percent.
If we give that a run, you can see how bringing the health down towards the
mid point correlates to the mid point of the actual health bar. So cool!
But… any further, and disaster!!! The bar overflows the bottom of the bar
and looks well weird! But, if all is well,
all we need to do is switch our costumes over at this point to the Empty costume.
IF ELSE, we need to check we are below half health,
that’s when percent is less than 0.5 Drop a switch costume into both sides.
If they are less that half health, then switch to the EMPTY costume to start removing from the
health bar, otherwise, leave the costume on the FULL costume as that was already working great.
We can drop that in just after we set the percent here.
Ok then! We are good to give this a try! Things are looking good as we drop the health
down, and even past the half way mark, yes! That is now working amazingly! Do you see that?
The empty costume is surely doing it’s job. And we can drag the cat and everything stays
perfectly in sync. I just love that! [Cycling Colour with the
Health – Green, Orange, Red] One last touch is to cycle the colour
of the bar from green, to orange and to red as the health decreases. You don’t need to do this,
but just in case, here’s how it’s done. Both the base sprite, and the clone need to
be positioned, these scripts, and then both change colour. So let’s make a new custom block, name it
“Position Bar”. Run without screen refresh. And take out the top 3 blocks from the main
forever loop. Go to Player, and change y by 70, and set percent. The rest stay in the main loop.
But move these three blocks under the new define block.
A Position Bar block can of course be placed back at the top of the main loop.
Ok, so the second forever loop is doing the same job as our define, so replace
those too with a Position Bar block. We can sanity check it still works…
Yep – great. So now, since both
sprites are using the same script, we can set the colour in here to affect both sprites at once.
Set colour effect to. And we multiply, percent,
with… 50 – This should take us all the way from red through to green.
Yeah, that looks excellent. And what’s more, as we slide the
health variable down, the colour changes back towards red. Pretty
sweet right! [Issues]
So, are we done… Pretty much. But this clever approach does have a couple of snags.
Firstly, if I just shift this bar around a little… somewhere around here… Look! Where did this line
suddenly appear from? Nasty. You may not see this on your project, but it’s caused by me zooming my
web browser larger to make this video. Things just don’t always quite line up as expected. The only
fix I can suggest is to add a tiny half pixel bit of red to the right of the base costume.
You’ll see that straight away fixes the gap problem, but… when we reduce the health,
we now see that extra bit of bar on the right. So to fix that,
We come in to the Empty costume, and expend the black by a half pixel to the right also.
And that, that pretty much does it. But there is a second issue,
and that is the sprite fencing. As we move off screen, the floating bar gets left behind,
ugly like an ugly thing! We fix that in one of the usual ways,
in the costume editor, make a new costume, and draw a large rectangle. Name the costume Big.
Then back in the code, we simply swap to the big costume before we position the bar.
That will let us move further off-screen, and right away we are switch back to the desired
costumes anyway, so all should be good. Give that a try if you don’t believe me 😊
See – Bug squashed! Great. [Outro]
Isn’t it great what you can do with a little clever scripting and careful costume drawing! :D
And don’t think you have to finish there – You can spruce things up even further – Try adding
another layer, like this – Or a vertical gradient fill, whatever you want to try!
But for now, that is about all we have time for today! If you enjoyed the video, please smash the
like button, and don’t forget to subscribe to the channel so as not to miss my next exciting video.
Until next time, have a great week ahead, and Scratch on guys!