ロング体験会 ご応募受付中です

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

Scratchスクラッチ HPバーをつくる

アクションゲームには欠かせない、HPバー
(HPインジケーター、HPゲージ、体力ゲージ、ライフゲージなどとも言いますね)
これがつくれると子どもも大よろこびすること間違いなし

今回はHPバーの作り方、使い方を詳しく解説していきます。

Scratchスクラッチ HPバーイメージGIF
目次

HPバーのコスチュームをつくる

まずは、11のコスチュームをもつスプライトをつくっていきます。

時間がない方はこちら

時間がない方は、完成版をこちらからダウンロードしてください。
↓ HP Bar. sprite3 ↓

リンク先でダウンロードを押下してください。
.sprite3という拡張子のファイルがダウンロードできれば成功です。

では、

スプライトをつくってきましょう

STEP
空のスプライトを追加する
からのスプライトを追加する

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

STEP
コスチューム作成画面でズームします
最初の状態
Scratch(スクラッチ) ズームボタン
画面右下にあるズームボタン
ズームした状態

このように、一つ一つのマスが見えるぐらいズームします。

STEP
黄緑の塗りつぶし、濃いグレーの枠線で四角形をつくります

塗りつぶしを黄緑、枠線を濃いグレーにして、
四角形を作成します。

中心から、右に5マス、左に5マスになるように、1×10マスの箱をつくります。

Scratch(スクラッチ) HPバー最初の箱
STEP
枠線なし、真っ黒の箱をつくります

塗りつぶしを真っ黒、枠線をなしにして、
四角形を作成します。

先ほどと同じように、中心から、右に5マス、左に5マスになるように、
1×10マスの箱をつくります。

Scratch(スクラッチ) HPバー箱2つ目

※先ほど作った箱の上に被せています

STEP
コスチュームを複製します

先ほどつくったコスチュームを複製します。

Scratch(スクラッチ) 箱の複製

右クリックして、複製を押します。

STEP
HPフル(MAX)の状態のコスチュームをつくります

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

Scratch(スクラッチ) HPバーフルのコスチューム作成
GIF HPバーフルをつくる
STEP
HP6~9のHPバーをつくります

先ほどつくったHPフルのコスチュームを複製します。

複製したコスチュームで、黄緑色の箱を10マスから9マスに変更します。

Scratch(スクラッチ) HPバー9のコスチューム作成
HPバー9をつくる

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

Scratch(スクラッチ) HPバー9~6完成イメージ

こんな感じに出来上がっていれば、OKです。

STEP
HP5~1は、色を変えながら作っていきます。

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

Scratch(スクラッチ)HPバー5
HP5
Scratch(スクラッチ)HPバー4
HP4
Scratch(スクラッチ)HPバー3
HP3
Scratch(スクラッチ)HPバー2
HP2
Scratch(スクラッチ)HPバー1
HP1
STEP
最後にコスチュームの順番を変更します

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

Scratch(スクラッチ) HPバー完成イメージ
HPバーコスチューム

こんな並びになっていればOKです

スプライトのコマンドをつくっていきます

スプライトが完成したら
次は中身をつくっていきます。

HPバーは、他のスプライトの上とか下に表示したいです。

Scratch(スクラッチ) HPバーの配置イメージ

さらに、スプライトが動き回ったとしても
スプライトの動きに合わせて移動させたいです。

この完成イメージを頭に入れて、中身をつくっていきましょう。

***

考え方

呼び出すスプライト(今回はネコ)側
  1. HPバーを表示するための、変数をリストとしてセットする
  2. HPバーをクローンする

1,2を、ずっと繰り返し、処理し続けます

HPバー側
  1. クローンされたら、ネコ側でセットした、X座標、Y座標をリストから取得して、座標を変える
  2. リストにセットしたHPの%に応じたコスチュームに変更する

こちらは描画してすぐ、クローンを削除します

のようになります。

***

リスト「ポジション」

新しいリスト「ポジション」をつくります。

※リストのつくり方が分からない方はこちら

リスト「ポジション」には3つの値をセットする想定です。

リスト「ポジション」の使い方

リストの1番目

HPバーのX座標をセットします

リストの2番目

HPバーのY座標をセットします

リストの3番目

HPバーのコスチューム番号をセットします

ネコのコマンドをつくります

ネコでやることは、リスト「ポジション」に値をセットし、HPバーのクローンをつくること
でしたね。

リストに値をセットする

リストに値をセットしていきます。

リストの1番目

まず、リストの1番目です。

リストの1番目はHPバーのX座標をセットすることになっていました。

HPバーのX座標は、ネコと同じにしたいので、
青色のブロック(X座標)をリストにセットします。

Scratch(スクラッチ)リストに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かけておきます。

***

ブロック定義として汎用部品にする

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

Show HP Barブロック定義
呼び出し側

HPバーのコマンド

HPバー側でやることは、ネコ側でセットしたリストの値に沿って、
座標を変え、コスチュームを変えることでした。

ネコ側で、HPバーのクローンをしていますので、
クローンされたことをトリガーに、
処理を書いていきます。

シンプルですね。

これで、HPバーを表示することができました。

実はこのままだと不十分です。

というのも、ネコ側では、常に新しいクローンをつくり続けています。
ですので、HPバーでは、クローンされて、描画したら、
すぐにこのクローンを削除する必要があります。

ということで、これで完成です。

「0」秒待つ、は正しく描画するためのおまじないです。

ブロック完成形

リストの初期化などを加えて、
完成したブロックがこちらです。

Scratch(スクラッチ)ブロック完成形(ネコ)
ブロック完成形(ネコ)
Scratch(スクラッチ) ブロック完成形(HPバー)
ブロック完成形(HPバー)

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

Scratchは、MITメディア・ラボのライフロング・キンダーガーテン・グループの協力により、Scratch財団が進めているプロジェクトです。https://scratch.mit.edu から自由に入手できます。

シェアおねがいします
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

もつさん
プログラミングスクールLの代表
妻、息子、娘の4人家族
プログラミング教育は、子どもの将来を変え、社会を変えるという信念のもと、日々子どもと向き合っています。

目次