スクラッチプログラミング - 体力(たいりょく)ゲージのつくりかた

のこり体力(たいりょく)を表示(ひょうじ)しよう

今回(こんかい)紹介(しょうかい)するのは、Scratch (スクラッチ)で棒状(ぼうじょう)の体力(たいりょく)ゲージをつくる方法(ほうほう)です。

コスチュームは一切(いっさい)つかわずに、ゲージのすべてを「ペン」でつくります。変数(へんすう)やブロック定義(ていぎ)、演算(えんざん)のブロックをたくさんつかうので、Scratch 初心者(しょしんしゃ)のかたはむずかしくかんじるかもしれませんが、くわしく解説(かいせつ)していきますので、ぜひ一緒に(いっしょ)につくってみましょう。

サンプルプロジェクト

下(した)にあるのは、体力(たいりょく)ゲージのサンプルプロジェクトです。このサンプルでは、ゲージのうごきが簡単(かんたん)にわかるように、ボタンをおしたら体力(たいりょく)が１目盛(めもり)へるようにしています。

たいりょくゲージのサンプルGIF

体力(たいりょく)ゲージを利用(りよう)したゲームサンプルは、記事(きじ)の後半(こうはん)で紹介(しょうかい)します。

変数(へんすう)を用意(ようい)しよう

今回(こんかい)つくる体力(たいりょく)ゲージは、いろいろなゲームに再利用(さいりよう)できるものにしていきます。そのための変数(へんすう)を用意(ようい)しましょう。変数(へんすう)をつかうことで、ゲージの位置(いち)やながさ、最大体力(さいだいたいりょく)などを簡単(かんたん)に変更(へんこう)できるようになりますよ。

すきな位置(いち)にゲージを表示(ひょうじ)できるように、ゲージのx座標(ざひょう) と ゲージのy座標(ざひょう) を変数(へんすう)できめます。
すきなサイズでつくれるように、ゲージのながさ を変数(へんすう)できめます。
体力(たいりょく)の最大値(さいだいち)を自由(じゆう)にかえられるように、MAX体力(たいりょく) を変数(へんすう)できめます。
のこりの体力(たいりょく) は、最初(さいしょ)は MAX体力(たいりょく) と同量(どうりょう)です。
ダメージ は、最初(さいしょ)はゼロです。

「みどりのはたがおされたとき」のしたに、へんすうをつなげる

変数(へんすう)の基本(きほん)は、以下(いか)の記事(きじ)で紹介(しょうかい)しているので、参考(さんこう)にしてください。

スクラッチプログラミング - 「へんすう」でかずをかぞえよう

「変数(へんすう)」で、ゲームでの得点(とくてん)やのこりじかんをかぞえる方法(ほうほう)をしょうかいします。変数(へんすう)はプログラミングでよくつかわれます。どういうものなのか、一緒(いっしょ)に見ていきましょう。

PyxofyPyxofy

枠線(わくせん)をえがこう

ここからは、ペンをつかってゲージをえがいていきます。

最初(さいしょ)にえがくのは、ゲージの下地(したじ)となる黒い線(くろいせん)です。ゲージ本体(ほんたい)よりふとい線(せん)にして、ゲージの枠線(わくせん)になるようにします。線(せん)をえがいている様子(ようす)はみせたくないので、ブロック定義(ていぎ)をつかって一気(いっき)に線(せん)をかくようにしましょう。

わくせんをえがく という名前(なまえ)のブロックをつくります。
「画面(がめん)を再描画(さいびょうが)せずに実行(じっこう)する」にチェックをいれます。

あたらしいブロックをつくる

わくせんをえがく というブロックがどのようなうごきをするのかを定義(ていぎ)しましょう。

線(せん)をえがきはじめる位置(いち)を指定(してい)します。
ペンのふとさと色(いろ)を指定(してい)します。
x 座標(ざひょう)を ゲージのながさ のぶんだけ移動(いどう)して線(せん)をえがきます。

わくせんをえがくブロック

以上(いじょう)で、わくせんをえがく を定義(ていぎ)できました。

ペンの基本(きほん)、ブロック定義(ていぎ)の基本(きほん)は、以下(いか)の記事(きじ)で紹介(しょうかい)しているので、参考(さんこう)にしてください。

スクラッチプログラミング - かくちょうきのう「ペン」のつかいかた

拡張機能(かくちょうきのう)の中から「ペン」をえらんで、あたらしいブロックを追加(ついか)してみましょう。「ペン」をつかうと、スプライトで線(せん)や絵(え)をかけるようになりますよ。

PyxofyPyxofy

スクラッチプログラミング -「ブロックていぎ」とは？じぶんでつくるブロック

プログラミングにつかうブロックを、あたらしくつくってみましょう。Scratchにはたくさんのブロックが用意(ようい)されていますね。でもそれだけでなく、じぶんでブロックをつくることもできますよ。

PyxofyPyxofy

ゲージをえがこう

つづいてえがくのは、ゲージ本体(ほんたい)です。枠線(わくせん)とおなじように、線(せん)をえがいている様子(ようす)はみせたくないので、ブロック定義(ていぎ)をつかって一気(いっき)に線(せん)をかくようにしましょう。

ゲージをえがく というブロックを、「画面(がめん)を再描画(さいびょうが)せずに実行(じっこう)する」にチェックをいれてつくります。
線(せん)をえがきはじめる位置(いち)を指定(してい)します。
ペンのふとさは、枠線(わくせん)よりほそくします。

ゲージをえがくブロックをていぎする

ゲージは、のこりの体力(たいりょく)の割合(わりあい)におうじて色(いろ)がかわるようにしますよ。

のこりの体力(たいりょく) が MAX体力(たいりょく) の80%よりおおいなら緑色(みどりいろ)、20%よりおおいなら黄色(きいろ) 、20%以下(いか)なら赤色(あかいろ) にします。
x 座標(ざひょう)を ゲージのながさ のぶんだけ移動(いどう)して線(せん)をえがきます。

いろをしていしてせんをえがく

以上(いじょう)で、ゲージをえがく を定義(ていぎ)できました。

うごきをたしかめよう

では、定義(ていぎ)したブロックをつなげて、ここまでのうごきを確認(かくにん)してみましょう。

ペンを利用(りよう)するときは、最初(さいしょ)に ぜんぶけす をつかって、画面(がめん)をクリアしてからえがきはじめます。
枠線(わくせん)の上(うえ)にゲージが表示(ひょうじ)されるよう、わくせんをえがく、ゲージをえがく の順(じゅん)にブロックをつなげます。

わくせんのつぎにゲージをえがく

緑(みどり)の旗(はた)をおすと、結果(けっか)は下(した)のようになります。線(せん)のふとさがちがうので、枠線(わくせん)の内側(うちがわ)にゲージ本体(ほんたい)がおさまります。最初(さいしょ)は、体力(たいりょく)が満(まん)タンの緑色(みどりいろ)です。

ゲージのさいしょのじょうたい

体力(たいりょく)をへらそう

ここからは、ダメージをうけるたびに体力(たいりょく)を１ずつへらすスクリプトをつくっていきます。体力(たいりょく)のへらしかたのポイントは、次(つぎ)のとおりです。

体力(たいりょく)は、一気(いっき)にへらすのではなく、へる様子(ようす)をアニメーションさせます。
ゲージ本体(ほんたい)はずっとおなじながさのままで、みじかくしません。
ゲージ本体(ほんたい)の上(うえ)に、右側(みぎがわ)から黒い線(くろいせん)をのばします。（アニメーション）
黒い線(くろいせん)で１目盛分(めもりぶん)のゲージをかくして、体力(たいりょく)がへったようにみせます。

くろいせんがたいりょくの１めもりぶんのびるアニメーション

黒い線(くろいせん)をえがきはじめる位置(いち)は、変数(へんすう)と演算(えんざん)をたくさんつかって指定(してい)するので、すこし複雑(ふくざつ)です。下(した)の画像(がぞう)でブロックのくみあわせを確認(かくにん)してください。

くろいせんをえがきはじめるいちをしめすブロックのくみあわせ

では、体力(たいりょく)をへらすスクリプトを、ブロック定義(ていぎ)でまとめていきましょう。このうごきは、さきほどつくった枠線(わくせん)やゲージ本体(ほんたい)のように一気(いっき)にえがくのではなく、アニメーションさせるので、「画面(がめん)を再描画(さいびょうが)せずに実行(じっこう)する」にチェックはいれません。