
Scratch HPバーの作り方 <スプライトのプレゼントあり>

アクションゲームには欠かせない、HPバー
(HPインジケーター、HPゲージ、体力ゲージ、ライフゲージなどとも言いますね)
これがつくれると子どもも大よろこびすること間違いなし
今回はHPバーの作り方、使い方を詳しく解説していきます。

HPバーのコスチュームをつくる
まずは、11のコスチュームをもつスプライトをつくっていきます。
時間がない方は、完成版をこちらからダウンロードしてください。
↓ HP Bar. sprite3 ↓
リンク先でダウンロードを押下してください。
.sprite3という拡張子のファイルがダウンロードできれば成功です。
では、
スプライトをつくってきましょう

スプライトを追加するボタンの「描く」を押します。



このように、一つ一つのマスが見えるぐらいズームします。
塗りつぶしを黄緑、枠線を濃いグレーにして、
四角形を作成します。
中心から、右に5マス、左に5マスになるように、1×10マスの箱をつくります。

塗りつぶしを真っ黒、枠線をなしにして、
四角形を作成します。
先ほどと同じように、中心から、右に5マス、左に5マスになるように、
1×10マスの箱をつくります。

※先ほど作った箱の上に被せています
先ほどつくったコスチュームを複製します。

右クリックして、複製を押します。
コスチューム1に対して、
塗りつぶしを黄緑色、枠線なしの四角形で、
1×10マスの箱をつくって被せます。

先ほどつくったHPフルのコスチュームを複製します。
複製したコスチュームで、黄緑色の箱を10マスから9マスに変更します。

同様にして、HP8,7,6のバーもつくっていきます。

こんな感じに出来上がっていれば、OKです。
HP5~1もつくり方は同じなのですが、より本物っぽさを出すために、
色を変えていきましょう





コスチュームの順番ですが、
1番目に、HP1の状態のコスチューム
2番目に、HP2の状態のコスチューム
・・・
10番目に、HPフルの状態のコスチューム
11番目に、HP0の状態のコスチューム
という風に並べ替えます

こんな並びになっていればOKです
スプライトのコマンドをつくっていきます
スプライトが完成したら
次は中身をつくっていきます。
HPバーは、他のスプライトの上とか下に表示したいです。

さらに、スプライトが動き回ったとしても
スプライトの動きに合わせて移動させたいです。
この完成イメージを頭に入れて、中身をつくっていきましょう。
***
考え方
- HPバーを表示するための、変数をリストとしてセットする
- HPバーをクローンする
1,2を、ずっと繰り返し、処理し続けます
- クローンされたら、ネコ側でセットした、X座標、Y座標をリストから取得して、座標を変える
- リストにセットしたHPの%に応じたコスチュームに変更する
こちらは描画してすぐ、クローンを削除します
のようになります。
***
リスト「ポジション」
新しいリスト「ポジション」をつくります。
※リストのつくり方が分からない方はこちら

リスト「ポジション」には3つの値をセットする想定です。
リストの1番目
HPバーのX座標をセットします
リストの2番目
HPバーのY座標をセットします
リストの3番目
HPバーのコスチューム番号をセットします
ネコのコマンドをつくります
ネコでやることは、リスト「ポジション」に値をセットし、HPバーのクローンをつくること
でしたね。
リストに値をセットする
リストに値をセットしていきます。
リストの1番目
まず、リストの1番目です。
リストの1番目はHPバーのX座標をセットすることになっていました。
HPバーのX座標は、ネコと同じにしたいので、
青色のブロック(X座標)をリストにセットします。

リストの2番目
リストの2番目は、HPバーのY座標です。
HPバーのY座標は、ネコの位置よりも、少し離したいです。
ネコの頭ぐらいにしたいなら → ネコのY座標+60ぐらい(お好みで調整してください)
ネコの足元にしたいなら → ネコのY座標-60ぐらい(お好みで調整してください)
ということで、ブロックとしてはこのようになります。

リストの3番目
リストの3番目は、HPバーのコスチューム番号です。
コスチュームをつくったときのことを思い出してください。
コスチューム番号1には、HPが1の時のコスチューム
コスチューム番号2には、HPが2の時のコスチューム
という風に、コスチューム番号とHPの値が対応するようにつくりました。
リストの3番目、つまりHPバーのコスチューム番号は、
今のHPを指定すればいいことになります。
ここでは、「HP」という変数をつくって、
それをセットするようにします。

***
ネコのコマンドはずっと呼び出す
ここまでの内容をまとめると
ネコのコマンドとしては、下図のようになります。

これをいつ呼び出すかですが、
少なくとも、HPが変わる度に呼び出さなければなりません。
また、ネコが移動するたびに座標が変わるので、
移動するたびに呼び出す必要があります。
かなりの頻度で呼び出すことになりますから、
それぞれにイベントを張るというよりも、
旗がクリックされて以降、ずっと呼び出すようにします。

***
HPバーの表示を汎用的にする
コスチューム番号を、現在のHPで指定するようにしました。
お気づきの方もいらっしゃると思いますが、
ということは、ゲームのMAXHPが5のときに、
5を指定すると、まだ1つも減っていないのに、
HPバーは、フルではなく、真ん中の状態になります。
これでは汎用的ではないので、少し工夫します。
つまり、現在のHP/MAXのHPとするのです。
1以上の数字になるように10かけておきます。

***
ブロック定義として汎用部品にする
ここまでの内容を踏まえて、
より汎用的に、どんなゲームでも使えるように、
以下のようにブロック定義として整理します。



HPバーのコマンド
HPバー側でやることは、ネコ側でセットしたリストの値に沿って、
座標を変え、コスチュームを変えることでした。
ネコ側で、HPバーのクローンをしていますので、
クローンされたことをトリガーに、
処理を書いていきます。

シンプルですね。
これで、HPバーを表示することができました。
実はこのままだと不十分です。
というのも、ネコ側では、常に新しいクローンをつくり続けています。
ですので、HPバーでは、クローンされて、描画したら、
すぐにこのクローンを削除する必要があります。

ということで、これで完成です。
「0」秒待つ、は正しく描画するためのおまじないです。
ブロック完成形
リストの初期化などを加えて、
完成したブロックがこちらです。


いかがでしたでしょうか?
ぜひいろいろなゲームに使ってみてください。