スプライトを画面外に「完全に」退場させる方法

さぁ、スクラッチでナニ作る！？

このチュートリアルでは、まったく同じコードを書いた2匹のネコが、一方は画面端で止まり、もう一方は画面外に消えていくという不思議な現象を体験するよ。ポイントはコスチュームに仕込んだ透明な四角形。Scratchの画面端の処理がコスチュームのサイズで変わるっていう、知っているとデキる開発者になれる裏技テクニックだよ！コード自体はすごくシンプルだけど、Scratchの内部仕様を理解するのがちょっとチャレンジングかも。

動画で見てみよう

チュートリアルの元になった作品

今回の目標

スターター作品をリミックスしよう

このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード

#1消えない猫の登場

準備

スプライト「とまり猫」を開く

とまり猫

スプライトについて
上段を横切る猫スプライト。フラグクリックで左端から現れ、中央でしばらく待ってから右端へ消えていく。
どんな役割か
猫が画面の左からスーッと登場して、真ん中でちょっと待って、そのまま右に消えていくアニメーションを作るよ！上のラインを通る猫担当ね。3秒かけてゆっくりスライドするのがポイント！

実装

イベント が押されたときでスタートしたら、左端（x:-255, y:50）に一瞬で移動させて、そこから動き( ) 秒でx座標を ( ) に、y座標を ( ) に変えるで3秒かけて画面中央（x:0）まで滑らせるよ。

y座標は50だから、画面のちょっと上寄りを通る感じ。この「3秒スライド」の動き、あとでもう1匹と見比べるとかなり面白いことが起きるよ。

#2消えない猫の退場

制御( ) 秒待つで1秒だけ間をおいてから、動き( ) 秒でx座標を ( ) に、y座標を ( ) に変えるでx:300に向かって3秒スライド。x:300って画面の右端よりずっと外側なんだけど……ここで面白いことが起きるんだ。

Scratchではスプライトが画面の外に完全に出ないようにブレーキがかかる。だから消えない猫はx:300を目指して進むけど、途中で端に引っかかって止まるんだよね。

[talk]Scratchのステージ座標は-240〜240が画面に映る範囲で、この範囲の外にスプライトが飛び出すのを防ぐガードレールみたいなものがある。ただし、止まる位置はきっちりx:240じゃなくて、コスチュームのサイズによって微妙に変わるっていうのがこの作品のカギだよ。[/talk]

#3消える猫の登場

準備

スプライト「きえる猫」を開く

きえる猫

スプライトについて
下段を横切る猫スプライト。StayCatと同じ動きパターンで、より下の位置（y=-100）をスライドする。
どんな役割か
上の猫と同じように左から右へ横切るアニメーションを作るよ！こっちは下のラインを通るから、2匹が別々のルートを移動してるのがわかるね。2匹が同時に動くと面白い演出になるよ！

実装

消えない猫と同じようにイベント が押されたときで始めて、左端（x:-255）から動き( ) 秒でx座標を ( ) に、y座標を ( ) に変えるで3秒かけて中央まで移動させるんだ。違うのはy座標が-100ってところだけで、画面の下のほうを通るルートだね。

#4消える猫の退場

コードは消えない猫とまったく一緒なのに、消える猫は画面の右外まで行って本当に消えちゃう。

なんでかっていうと、消える猫のコスチュームには透明な四角形が仕込んであるから。消えるネコと消えないネコの青い枠線の位置に注目してくれ。Scratchから見た「見た目のサイズ」がデカいから、結果的に画面外にネコが消えたように見えるってこと。

[talk]Scratchの画面端の処理には、コスチュームの「バウンディングボックス」っていう見た目の枠のサイズが重要になる。小さいコスチュームだとすぐ画面端で止められるけど、透明な矩形を足して枠を大きくすると、もっと遠くまで移動できるように見えるんだよね。結果、消えて見える。同じコードなのに動きが変わる――Scratchならではの裏技的テクニック。[/talk]

まとめ

同じコードなのに動きが変わるっていう不思議な体験、できたかな？コスチュームの透明バウンディングボックスが画面端の処理に影響するって知ると、Scratchでの表現の幅がグッと広がるよ。このテクニック、ゲームでスプライトを意図的に画面外に移動させたいときにも使えるから、ぜひ覚えておいてね！