スクラッチプログラミング - プラットフォーマーのつくりかた【ヒットボックス】
ヒットボックスとは、あたりはんていにつかうための四角(しかく)のことです。スプライトのはじっこだけがプラットフォームにふれてしまうのをふせぐために、ヒットボックスをつかってみましょう。
更新日:2023年12月27日
サンプルさくひんであそんでみよう
今回(こんかい)しょうかいするのは、プラットフォームゲームでそうさするスプライトに、ヒットボックスをつかう方法(ほうほう)です。
ヒットボックスは目には見えませんが、下のプロジェクトでは、ネコのあたりはんていでつかわれています。つぎの2つをかくにんしながら、あそんでみてください。
- あしがふれたときだけ、プラットフォームの上にのれること
- ヒゲやしっぽがふれても、プラットフォームの上にのれないこと
スプライトのそうさほうほう
- パソコン:やじるしキー
- タッチスクリーン:画面(がめん)をゆびでさわる
(プロジェクトがひょうじされないばあいは、ScratchのPyxofyページをごらんください)
»プラットフォームゲームの基本的(きほんてき)なつくりかたは、『プラットフォームゲームのつくりかた』でくわしくしょうかいしています。
「ヒットボックス」とは?
ヒットボックスとは、あたりはんていのために、スプライトの大きさにあわせてつくる四角(しかく)のことです。

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

- ネコのしっぽがふれているだけで、プラットフォームからおちない

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

ヒットボックスのつくりかた
ヒットボックスのつくりかたは、かんたんです!そうさするスプライトに、ヒットボックスをコスチュームとしてえがくだけです。
たとえば、ネコのスプライトにヒットボックスのコスチュームをつくってみましょう。
»コスチュームをえがくときは、 『ペイントエディターのつかいかた』 をさんこうにしてください。
ヒットボックスをえがく
- ネコのコスチュームの上に、四角(しかく)をえがく

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

- 「コスチュームをえがく」をえらぶ

- はりつける

- なまえを「ヒットボックス」にかえる

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

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

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

ヒットボックスが見えないのは、なぜ?
ヒットボックスのコスチュームをつかっていても、くろい四角(しかく)は見えません。ネコのコスチュームが見えるだけです。
そのりゆうは、「ずっと」ブロックの中にふくすうのコスチュームブロックを入れると、いちばん下にあるコスチュームだけが表示(ひょうじ)されるからです。「()びょうまつ」や「()かいくりかえす」があいだに入っていないばあい、ほかのコスチュームは見えません。
ヒットボックスのかんせい
ヒットボックスであたりはんていができるようになりました!ネコのヒゲやしっぽではプラットフォームにのれないことを、かくにんしてみてくださいね。


「きょうからはじめるスクラッチプログラミング入門」Pyxofy (著)
Pyxofy が Scratch の基本をまとめた電子書籍を出版しました。
Kindle・Apple Books からご購入ください。
まとめ
今回(こんかい)は、プラットフォーマーでそうさするスプライトに、ヒットボックスをつかう方法(ほうほう)をしょうかいしました。
あたりはんていにヒットボックスをつかうと、スプライトのはじっこだけがプラットフォームにふれてしまうのをふせぐことができましたね。
最後まで読んでいただき、ありがとうございます。この記事をシェアしてくれると嬉しいです!