「木の後ろを歩かせたいのに、猫がいつも木の手前に出てしまう」。背景を描き直すべきか、移動のブロックを変えるべきか迷っていませんか。
木の後ろに隠れる表現は、手前に置く木を独立したスプライトにし、主人公より前に重ねると作れます。背景に描いた木の一部分だけを、主人公の手前へ出すことはできません。まずは「主人公」と「木」だけの構成で、重なり方を試してみましょう。
背景に描く木と、手前に置く木を分けよう
Scratchの背景は、スプライトより奥に表示されます。森の背景に木が描かれていても、その木は背景の一部です。主人公のスプライトを奥へ下げるだけでは、背景の木の後ろには入りません。Scratch財団の素材づくりの公式ガイドでも、背景はすべてのスプライトの後ろに配置されると説明されています。
そこで、景色の役割を分けます。遠くの山や空は背景に残し、主人公を隠したい木だけを別のスプライトにする、という考え方です。
| 作品に入れるもの | 置き場所 | 今回の役割 |
|---|---|---|
| 空・地面・遠くの森 | 背景 | 主人公より奥の景色 |
| 主人公 | スプライト | 木の後ろを移動する |
| 手前の木 | 別のスプライト | 重なった主人公の一部を覆う |
この表は、今回の練習用の設計例です。背景にある木をすべて作り直す必要はありません。「この木の後ろに入ってほしい」と決めたものだけを、手前の部品として用意してください。
背景の木と、追加した木がずれて二重に見えるなら、練習中は木のない背景に替えるのも一案です。絵合わせより先に、重なりの仕組みを確かめられます。
木の絵は、周囲が透明なスプライトにする
ここからは本記事の練習手順です。新しい作品で試すか、制作中の作品とは別に練習用のコピーを用意しましょう。最初は主人公と木以外のスプライトを入れない構成にします。
- 主人公にするスプライトを用意する。
- スプライトを追加するメニューから「描く」を選ぶ。
- コスチュームに幹と葉を描き、名前を「手前の木」にする。
- ステージ上で木の位置と大きさを調整する。
スプライトを描いて作成する方法は、Scratch財団の公式ガイドにも掲載されています。練習では、幹を長方形、葉を丸い形で描く程度で十分です。
木の周りまで白く塗りつぶさないことがポイントです。紙の絵を撮影した画像などでは、木の周囲の白い部分も絵に含まれている場合があります。そのまま手前に置くと、木だけでなく白い四角まで主人公を覆ってしまいます。
まず主人公と木を横に並べ、次に少しだけ重ねてください。木の輪郭に沿って主人公が見えなくなるなら、狙った素材になっています。四角い範囲で隠れる場合は、移動のコードではなく、木のコスチュームの周囲を確認しましょう。
主人公は最背面、木は最前面に設定する
重なり順には、「見た目」カテゴリーの「最前面へ移動する」「最背面へ移動する」を使います。日本語の名称はScratch公式の日本語ブロック定義で確認できます。
主人公を選び、次のブロックをつなぎます。
緑の旗が押されたとき 最背面へ移動する 表示する
続いて「手前の木」を選び、こちらをつなぎます。
緑の旗が押されたとき 最前面へ移動する 表示する
最背面にした主人公も、背景よりは手前に残ります。木と主人公だけの構成なら、これで「背景、主人公、木」の順になります。前後移動の処理はScratch公式の実装でも確認できます。
次に、主人公へ左右移動のブロックを追加します。以下の「10」は練習用の設定例で、決まった正解ではありません。
右向き矢印キーが押されたとき x座標を10ずつ変える 左向き矢印キーが押されたとき x座標を-10ずつ変える
主人公を木の左側に置き、緑の旗を押してから右へ動かしましょう。通り道は、主人公と木の幹が重なる高さに調整します。主人公が葉の下を通るだけでは、重なり順が正しくても隠れたようには見えません。
ここでは主人公の動きを止める処理は入れません。「木にぶつかって止まる」と「木の後ろを通る」は別の表現だからです。前者を作りたい場合は、移動前の座標に戻す壁判定の記事が隣接する内容になります。
重なる前・途中・通過後を見比べる
次の確認表を使って、動きを途中で止めながら見比べてください。これは、今回の練習で目指す見え方です。
| 主人公の位置 | 確かめたい見え方 | 違うときに見る場所 |
|---|---|---|
| 木に重なる前 | 主人公の全体が見える | 木の周囲に不要な塗りがないか |
| 幹と重なっている途中 | 重なった部分だけ見えなくなる | 木が主人公より手前か |
| 木を通り過ぎた後 | 主人公の全体が再び見える | 木の絵が想定より広くないか |
主人公がまったく隠れないなら、先に「絵どうしが本当に重なっているか」を見ます。位置が離れたままでは、前後関係を変えても見た目に違いが出ません。
お子さまに合う学び方診断
正解・不正解を決める診断ではありません。今の様子から、取り組みやすい学び方の入口をご案内します。
反対に、重なった瞬間に全身が見えなくなっても、必ずしも失敗ではありません。幹の幅が主人公より広ければ、すっぽり隠れる設計も考えられます。顔だけ残したいなら主人公を大きくする、足元だけ隠したいなら木の代わりに低い茂みを描くなど、完成させたい絵に合わせて調整しましょう。
この段階では、速さまで同時に変えず、まず木の幅か主人公の大きさのどちらかを選んで試すと、見え方の違いを比べやすくなります。
ほかの部品を足す前に、重なり設計表を残す
木の後ろを通れたら、作品に追加したい部品の置き場所をメモします。「動くかどうか」ではなく、「主人公より手前に必要か」で分けるための表です。
| 追加したい部品の例 | 主人公との前後関係 | 今回の置き方の案 |
|---|---|---|
| 遠くの山 | 奥 | 背景に描く |
| 主人公を隠す茂み | 手前 | 独立したスプライトにする |
| 画面の飾り枠 | 木よりも手前 | 別スプライトにし、前後順を追加で設計する |
今回のブロック例は、主人公と木だけの最小構成です。飾り枠なども「最前面へ移動する」にすると、木との間にも前後関係が必要になります。部品を増やす際は、どれを一番手前にしたいのか、表に追記してから組み直してください。
子どもがまだコードを読みづらい場合は、紙に描いた主人公と木を切り抜き、木を上に重ねて完成イメージを決めるところからでも構いません。今回は「どこが見えなくなれば木の後ろにいるように見えるか」を決める役を任せてみてはいかがでしょうか。
よくある質問（FAQ）
背景の木は、そのまま使えませんか？
遠くの景色としては使えます。ただし、その木だけを主人公より手前に出すことはできません。主人公を隠す役の木は、背景と別のスプライトとして用意します。背景とスプライトの違いは、本文で紹介したScratch財団の公式ガイドも参照してください。
「隠す」ブロックを使う方法とは何が違いますか？
「隠す」はスプライト全体を非表示にする処理です。木を手前に重ねる方法なら、木と重なった部分だけを覆う表現ができます。全身を消す処理と表示順を変える処理は、Scratch公式の実装でも別に用意されています。
木の後ろを通るとき、当たり判定も必要ですか？
今回のように、木の後ろを通ったように見せるだけなら追加しません。木を障害物にしたいか、通り抜けられる景色にしたいかを先に決めましょう。本記事は後者の作例です。
木の前と後ろを行き来する作品にも、このまま使えますか？
この作例では、木は常に主人公より手前です。同じ木の前側も歩く作品には、位置や場面に応じて前後関係を切り替える別の設計が必要です。まずは「木の後ろだけを横切る場面」に限定して完成させてください。
「どの木に隠れたいか」を体験で伝える
CotoMiraiは、年齢・興味・理解度に合わせた個別指導を案内しています。教室の方針や無料体験の案内は、CotoMirai公式サイトで確認できます。
この表現を相談するなら、「動かない」だけでなく、「この木の後ろでは顔が隠れて、通り過ぎたら出てきてほしい」と、実現したい一場面を伝えてみましょう。重なり設計表や、希望する見え方を描いた紙があれば、説明の手がかりになります。持ち込み作品を体験中に扱えるかは、申し込み時にご確認ください。
参考にした情報
関連する記事
お子さまに合う学び方診断
正解・不正解を決める診断ではありません。今の様子から、取り組みやすい学び方の入口をご案内します。