今回つくる体力ゲージ
難易度
今回はスクラッチで体力ゲージ（HPゲージ）を作ります。前回の記事で作成したスマブラ風の格闘ゲームを題材に攻撃を受けるとゲージが少なくなっていく様子を、拡張機能の”ペン”を使ってプログラミングしていきます。ペンをつかった体力ゲージはとても簡単で、格闘ゲーム以外でも様々なゲームに活用できますので、是非マスターしてください。
準備
前回・前々回の記事
スマブラ風格闘ゲームの作り方（その１）
スマブラ風格闘ゲームの作り方（その２）
から作っていただくか、こちらをリミックスしてください。
ゲームの操作
おじさん：→・←/移動、↑/ジャンプ、P /パンチ、O/波動拳
おばさん：A・D/移動、W/ジャンプ、R/パンチ、T/ファイヤー、Y/頭突き
実際にゲームをプレイしてみると、相手の攻撃を受けるとHPの数字が変わっていきますが、この部分を今回は体力ゲージにしていくことになります。
拡張機能”ペン”の追加
まずは、体力ゲージ用のスプライトを作成していきます。右下のネコのアイコンから”描く”を選び、新規スプライトを作成し、名前は”HPゲージ”とします。
次に、左下にある拡張機能のボタンを押し”ペン”を選択します
するとブロック定義の下に、”ペン”というコードが現れます。”ペン”には画面に描画をするための様々なコードのブロックが用意されています。
これで準備完了です。ここから、体力ゲージのコードを書いていきます。
体力ゲージを作る
”ペン”の基本的な使い方は
①ペンを下ろす（始点の指定）
②終点に移動
③ペンを上げる
この繰り返しです。
それに加えてペンの太さや色を設定します。
今回はこのペンを使って体力ゲージを作ります。残っている体力の分だけ始点から終点まで線を引くということをずっと繰り返します。
これをコードにしていくと以下のようになります。X:−２００というのはゲージの始点で、そこから残っているHP（おじさんHP）分だけ線を引くというのをずっと繰り返すことで体力ゲージを表現しています。下の動画はわかりやすいようにおじさんHPも表示していますが、攻撃をうけておじさんHPが減るとペンで作った青いゲージも短くなっていくのがわかります。
同様におばさんの体力ゲージも作っていきます。ここで注意しなければならないのは、おじさんと同様のものを作ろうと、以下のような並列のプログラムを組んではいけないということです。ぺんは１本しかないので、同時にはかけないということです。
ですので、まずはおじさんの体力ゲージを書いて、次におばさんの体力ゲージを書く、という作業を繰り返していくことで２つの体力ゲージを作ることができます。つまり、以下のようにおじさんの体力ゲージを書くコードの下に、おばさんの体力ゲージを書くコードを追加します。これで二つの体力ゲージができました。
これで同時に二つの体力ゲージを表示することができましたが、１つ問題があります。下図のように、体力がゼロになった時に、ゲージがなくならないのです。それは、ペンを下ろして、動かさずに上げるということはつまり点を書くことになるからです。
それを避けるために、体力が１より小さくなったら、「全部消す」という指示を出すようにします。
この状態でプレイしてみると、もう一つ問題が残ることがわかります。お気付きの方もいらっしゃるかもしれませんが、全部消すの指示をすると、体力が残っている方のゲージも消えてしまうのです。
それを避けるために、全部消した後に、相手のゲージを復活させるコードを追加します。非常に長くなりましたがこれで体力ゲージ作成は完了です。
体力ゲージカバーを作る
ここまでで完成でも十分ではありますが、実際のゲームっぽくするために体力がどのくらい減ったのかもわかるような、体力ゲージカバーを作っていきます。最終的な仕上がりは下図のようなものになります。これを目標に作っていきましょう。
まず、ゲージの下に白色を引いて、ゲージが減っていくと白が現れるようにします。ペンは背景の上にしか描かれないものですので、背景画像をいじっていきます。
※ペンの下層にスプライトを入れることはできません。スプライトの上にペンで書くこともできません。
ステージを選んで、背景のタブを選択すると、背景画像をいじることができます。
背景画像に体力ゲージに合わせて白ベタの長方形を描いていきます。
次に、ゲージ枠というスプライトを新たに作り、そこに以下のように枠のコスチュームを作っていきます。黒枠の長方形（塗りつぶし無し）に左右に空の色と同じ色の四角を加えることで、ペン両端の丸い部分を消します。
これで完成です！
完成したコードはこちらからもご確認できます
