Designing Health Bars : Step Up Your Scratch Game

2024年2月20日

Health Bar is essential for action games.
(Also called “Life bar” , “Health gauge”, etc.)

I’m sure kids will be happy if they can code this.

I’ll explain how to code it, step-by-step.
Don’t miss out.

Designing Costumes

First, we will create a sprite with 11 costumes.

STEP

Click “Paint” , add new brank sprite

Hover “Choose a Sprite ” , then click “Paint”

STEP

Zoom in on the painting view

In this way, zoom in until you can see each square ( pixel )

STEP

Create a rectangle with yellow-green fill and a dark gray border

fill : yellow-green
border : dark gray

Then, draw a rectangle.

Create a 1 X 10 square box from the center,
5 squares to the right and 5 squares to the left.

STEP

Create a rectangle with black fill and no border

fill : black
border : no

Then, draw a rectangle so that it covers the rectangle you draw earlier.

STEP

Duplicate the costume ( “costume1”)

Duplicate the costume you draw earlier.

Designing Health Bars - duplicate costume

Right mouse click and click “Duplicate”

STEP

Create a costume with FULL

Draw a rectangle with yellow-green fill and without a border.
Then, cover the rectangle you drew on Step3 and 4.

Scratch（スクラッチ）　HPバーフルのコスチューム作成 — creating a costume with FULL

STEP

Create costumes 6 to 9

Duplicate the FULL costume,
then shorten the width.
You can create costumes that indicate 60% remaining health ~ 90% remaining health.

Scratch（スクラッチ）　HPバー9のコスチューム作成 — creating a costume, “90%”

If you can create like this, you can go to the next step.

STEP

Create costumes 1 to 5 by changing the colors

You can make these in the same way except changing colors.

STEP

Finally, change the order of costumes

Change the order as follows,
1st the costume “10%”
2nd “20%”
…
10th “FULL”
11th “0%”

If the costumes line up like above, you’ve succeeded.

Coding

I’d like to implement a program that :

display the health bar above or below other sprites.
even if the sprite moves around, the health bar move along the sprite.

***

Overall Structure

Sprites ( Cat )

Update a list that indicate the position of the health bar
Clone the health bar

repeat 1 and 2 forever

Health Bars

When I start as a clone, set X and Y from the list updated by the sprite
Switch costume along with the remaining health

Display and delete itself on each ticks

***

make a list “Position”

more about "List"

Scratch リストの説明リストって何？リストでどういうことができるの？リストとは・・・数字や言葉をためておくためのノートのようなもの順番に並べてためていくところが特徴ですプログラ…

set 3 values in the list

what to set in the list

1st

X of the health bar

2nd

Y of the health bar

3rd

Costume No. of the health bar

Code of the sprite

What you code on the sprite ( cat ) are follows;

Update a list that indicate the position of the health bar
Clone the health bar

Update the list

1st of the list

set X of the health bar

I want the X of the HP bar to be the same as the cat, so
Set the blue block (X position) to the list.

2nd of the list

set Y of the health bar

I want the Y position of the HP bar to be a little farther away than the cat’s position.
If you want it to be above the cat’s head, → set Y position of the cat + about 60 (please adjust according to your preference)
If you want it to be below cat’s feet, → set Y position of the cat – about 60 (please adjust to your preference)

3rd of the list

set HP bar costume number at Third on the list

Remember when you made a costume?
Costume number 1 is the costume when HP is 1
Costume number 2 is the costume when HP is 2

In this way, I made it so that the costume number and HP value correspond.

＊＊＊

Cat’s code

To summarize the contents so far
The cat command is as shown below.

＊＊＊

Make the code more generic

In the previous explanation, the costume number was specified by the current HP.

Some of you may have noticed,
That means when the game’s MAXHP is 5,
If you specify 5, even though it has not decreased by 1 yet,
The HP bar will be in the middle, not full.

Therefore, rewrite it as follows