スクラッチプログラミング - プラットフォーマーのつくりかた【ヒットボックス】

ヒットボックスとは、あたりはんていにつかうための四角(しかく)のことです。スプライトのはじっこだけがプラットフォームにふれてしまうのをふせぐために、ヒットボックスをつかってみましょう。

スクラッチプログラミング - プラットフォーマーのつくりかた【ヒットボックス】

更新日:2023年12月27日

サンプルさくひんであそんでみよう

今回(こんかい)しょうかいするのは、プラットフォームゲームでそうさするスプライトに、ヒットボックスをつかう方法(ほうほう)です。

ヒットボックスは目には見えませんが、下のプロジェクトでは、ネコのあたりはんていでつかわれています。つぎの2つをかくにんしながら、あそんでみてください。

  1. あしがふれたときだけ、プラットフォームの上にのれること
  2. ヒゲやしっぽがふれても、プラットフォームの上にのれないこと

スプライトのそうさほうほう

  • パソコン:やじるしキー
  • タッチスクリーン:画面(がめん)をゆびでさわる

(プロジェクトがひょうじされないばあいは、ScratchのPyxofyページをごらんください)

»プラットフォームゲームの基本的(きほんてき)なつくりかたは、『プラットフォームゲームのつくりかた』でくわしくしょうかいしています。

Scratch (スクラッチ) - プラットフォームゲームのつくりかた
ジャンプで障害物(しょうがいぶつ)をよけながらつぎのステージへすすんでいく、プラットフォーマーのつくりかたをしょうかいします。スプライトにじゅうりょくをあたえて、よりリアルなうごきを表現(ひょうげん)してみましょう。

「ヒットボックス」とは?

ヒットボックスとは、あたりはんていのために、スプライトの大きさにあわせてつくる四角(しかく)のことです。

2022-03-01-黒い四角のヒットボックス

スプライトのはじっこだけがふれてしまう

たとえば、ネコのスプライトをジャンプさせて、プラットフォームの上にのせたいとき。「もし、白いろにふれた、なら」でネコのあたりはんていをすると、つぎのようになってしまいます。

  • ネコのヒゲがふれただけで、プラットフォームにのれてしまう
2022-03-02-ネコのヒゲがプラットフォームに触れて、ネコが空中に浮いている状態
  • ネコのしっぽがふれているだけで、プラットフォームからおちない
2022-03-03-ネコの尻尾がプラットフォームに触れて、ネコが空中に浮いている状態

ヒゲやしっぽがふれているだけで、ネコが空中にういてしまうのはヘンですね。

ヒットボックスでかいけつ!

ヒットボックスをあたりはんていにつかうと、ネコが空中にういてしまうのをふせぐことができますよ。やってみましょう!

2022-03-04-ヒットボックスを使って、ネコの足がプラットフォームに触れている状態

ヒットボックスのつくりかた

ヒットボックスのつくりかたは、かんたんです!そうさするスプライトに、ヒットボックスをコスチュームとしてえがくだけです。

たとえば、ネコのスプライトにヒットボックスのコスチュームをつくってみましょう。

»コスチュームをえがくときは、 『ペイントエディターのつかいかた』 をさんこうにしてください。

Scratch (スクラッチ) - ペイントエディターのつかいかた
えをかくことはすきですか?「こんなスプライトがあったらいいのに!」と、おもうことはありませんか?ペイントエディターのつかいかたをしって、スプライトやはいけいをえがけるようになりましょう。

ヒットボックスをえがく

  • ネコのコスチュームの上に、四角(しかく)をえがく
2022-03-05-ネコのヒゲと尻尾を除いてネコが隠れるように黒い四角を描く

ここでつくるのは、ヒゲやしっぽがふれただけでネコが空中にういてしまうのをふせぐためのヒットボックスです。ネコよりすこし小さい四角(しかく)にしましょう。

ヒットボックスのコスチュームをつくる

えがいた四角(しかく)をコスチュームにしますよ。

  • 四角(しかく)をせんたくして、コピーする
2022-03-06-描いた四角をコピーする
  • 「コスチュームをえがく」をえらぶ
2022-03-07-コスチュームを描くためのボタン
  • はりつける
2022-03-08-新しいコスチュームとして四角を貼り付ける
  • なまえを「ヒットボックス」にかえる
2022-03-09-コスチュームの名前を変える

ヒットボックスのコスチュームができました!ネコのコスチュームの上にえがいた四角(しかく)は、削除(さくじょ)しておきましょう。

  • 四角(しかく)をせんたくして、削除(さくじょ)する
2022-03-10-コスチューム1の上に描いた四角を削除する

では、「コスチューム1」と「ヒットボックス」、2つのコスチュームをつかってプログラミングしていきますよ。

2022-03-11-コスチューム1とヒットボックス

ヒットボックスのつかいかた

ヒットボックスのつかいかたも、かんたんです!そうさするスプライトのプログラムに、コスチュームのブロックを追加(ついか)するだけです。追加(ついか)するばしょは、プラットフォーマーのプログラム、「ずっと」ブロックの中です。

  • いちばん上に、「コスチュームを(ヒットボックス)にする」
  • いちばん下に、「コスチュームを(コスチューム1)にする」
2022-03-12-コスチュームブロックが二つ追加されたプログラム

ヒットボックスが見えないのは、なぜ?

ヒットボックスのコスチュームをつかっていても、くろい四角(しかく)は見えません。ネコのコスチュームが見えるだけです。

そのりゆうは、「ずっと」ブロックの中にふくすうのコスチュームブロックを入れると、いちばん下にあるコスチュームだけが表示(ひょうじ)されるからです。「()びょうまつ」や「()かいくりかえす」があいだに入っていないばあい、ほかのコスチュームは見えません。

ヒットボックスのかんせい

ヒットボックスであたりはんていができるようになりました!ネコのヒゲやしっぽではプラットフォームにのれないことを、かくにんしてみてくださいね。

2022-03-13-ヒットボックスを使ったプラットフォーマーのプログラム

まとめ

今回(こんかい)は、プラットフォーマーでそうさするスプライトに、ヒットボックスをつかう方法(ほうほう)をしょうかいしました。

あたりはんていにヒットボックスをつかうと、スプライトのはじっこだけがプラットフォームにふれてしまうのをふせぐことができましたね。

最後まで読んでいただき、ありがとうございます。この記事をシェアしてくれると嬉しいです!

かんれんきじ

スクラッチプログラミング - プラットフォーマーのつくりかた【じゅうりょくジャンプ】
プラットフォームゲームのジャンプをくふうしてみましょう。スプライトが着地(ちゃくち)するときに、地面(じめん)にしずんでしまうことがあります。それをふせぐプログラムをつくっていきますよ。
スクラッチプログラミング - 上下左右にスクロール!はいけいをうごかそう
プレイヤーのうごきにあわせて画面(がめん)をうごかすプログラムをつくります。つかうはいけいはひとつだけの、かんたんなスクロールです。ゲームづくりに応用(おうよう)してみてくださいね。
Start Here - Scratch (スクラッチ)
Scratch (スクラッチ)記事(きじ)のレベル別一覧です。初級、中級、上級、拡張機能にわけてまとめました。