スクラッチプログラミング - 雨(あめ)のパララックスアニメーション

パララックスとは

パララックスとは、視差効果(しさこうか)のことをいいます。複数(ふくすう)のかさなったパーツを、ことなるスピードでうごかすことで、おくゆきをかんじさせることができる表現方法(ひょうげんほうほう)です。

今回(こんかい)は、マウスポインターの位置(いち)におうじて景色(けしき)がうごくパララックスを Scratch (スクラッチ)でつくります。さらに、マウスをうごかすと景色(けしき)のあかるさや雨(あめ)の量(りょう)がかわるようにして、よりおもしろいアニメーションにします。

サンプルプロジェクト

下(した)にあるのは、パララックスアニメーションのサンプルプロジェクトです。記事(きじ)をよみすすめる前(まえ)に、マウスの上下(じょうげ)のうごきにあわせて景色(けしき)が変化(へんか)する様子(ようす)をみておいてください。

景色(けしき)のスプライトをつくろう

木(き)や山(やま)、太陽(たいよう)のスプライトと、背景(はいけい)を用意(ようい)しましょう。

スプライトのかさなりを指定(してい)しよう

この作品(さくひん)では、スプライトのかさなる順番(じゅんばん)が重要(じゅうよう)になります。すべてのスプライトの順番(じゅんばん)をきちんときめておきましょう。

「景色(けしき)１」は、一番(いちばん)手前(てまえ)に表示(ひょうじ)します。

そのほかの背景(けしき)は、順番(じゅんばん)にひとつずつ奥(おく)にさげて表示(ひょうじ)してください。

太陽(たいよう)は、一番(いちばん)うしろに表示(ひょうじ)します。

すべてのスプライトを、x 座標(ざひょう) 0、y 座標(ざひょう) 0 の位置(いち)で表示(ひょうじ)すると、このようなみためです。

景色(けしき)をうごかそう

用意(ようい)したスプライトを、マウスの y 座標(ざひょう)の値(あたい)におうじて上下(じょうげ)にうごくようにしていきましょう。

うごかす量(りょう)は、スプライトごとにかえます。手前(てまえ)にある景色(けしき)ほどたくさんうごかし、おくの景色(けしき)はうごく量(りょう)をすくなくなくします。

まずは、一番(いちばん)手前(てまえ)に表示(ひょうじ)する「景色(けしき)１」です。座標(ざひょう)を次(つぎ)のようにしてください。

うごきをたしかめよう

緑(みどり)の旗(はた)をおして、「景色(けしき)１」のうごきを確認(かくにん)してみましょう。マウスポインターがステージの上(うえ)のほうにあるとき、「景色(けしき)１」は上(うえ)へうごくため、スプライトの下(した)に隙間(すきま)ができてしまいます。

これをふせぐために、一番(いちばん)手前(てまえ)のスプライトは、下(した)の部分(ぶぶん)を目一杯(めいっぱい)のばしておきましょう。

つづけて、そのほかの景色(けしき)もおなじようにスクリプトを作っていきます。スプライトによってうごく量(りょう)をかえるために、y 座標(ざひょう)の値(あたい)は次(つぎ)のようにしてください。

• 景色(けしき)２：y 座標(ざひょう)を マウスのyざひょう / 4 にする
• 景色(けしき)３：y 座標(ざひょう)を マウスのyざひょう / 6 にする
• 景色(けしき)４：y 座標(ざひょう)を マウスのyざひょう / 8 にする

さて、ここまでは、マウスポインターを上(うえ)へうごかすと景色(けしき)も上(うえ)へ、下(した)へうごかすと景色(けしき)も下(した)へうごくようにしました。一方(いっぽう)で、太陽(たいよう)は山(やま)のうしろからのぼるように、反対(はんたい)にうごかします。

y 座標(ざひょう)の値(あたい)は次(つぎ)のようにしてください。

うごきをたしかめよう

緑(みどり)の旗(はた)をおして、ここまでのうごきを確認(かくにん)してみましょう。マウスポインターが上(うえ)のほうにあるときは、うしろがわの景色(けしき)はあまりみえません。マウスを下(した)へうごかすにつれて、うしろがわの景色(けしき)がみえるようになります。

パララックスのうごきは以上(いじょう)で完成(かんせい)です。

あかるさを変化(へんか)させよう

アニメーションをさらにおもしろくするために、マウスを上下(じょうげ)にうごかして、景色(けしき)のあかるさがかわるようにしましょう。

マウスを下(した)へうごかすとあかるく、上(うえ)へうごかすとくらくなるようにします。景色(けしき)のスプライトすべてに、次(つぎ)のようにブロックを追加(ついか)してください。

背景(はいけい)も、おなじようにあかるさが変化(へんか)するよう、次(つぎ)のようにブロックをくみあわせておきましょう。

うごきをたしかめよう

緑(みどり)の旗(はた)をおして、ここまでのうごきを確認(かくにん)してみましょう。マウスの上下(じょうげ)のうごきにあわせて、景色(けしき)の位置(いち)だけでなく、あかるさも変化(へんか)するようになりました。

雨(あめ)をふらそう

ここからは、雨(あめ)のスプライトを用意(ようい)してスクリプトをつくっていきます。ふってくる雨(あめ)と、はねかえる飛沫(しぶき)のコスチュームを用意(ようい)してください。

雨(あめ)は、ほかのスプライトより一番(いちばん)手前(てまえ)に表示(ひょうじ)されるようにします。

さきほどつくった景色(けしき)のスプライトを、雨(あめ)よりもうしろがわになるようにします。「景色(けしき)１」は、雨(あめ)よりひとつ奥(おく)にして、そのほかの背景(けしき)も、さらにひとつずつ奥(おく)にさげてください。

マウスの位置(いち)におうじて、雨(あめ)がつよくなったりよわくなったりするように、スクリプトをつくっていきましょう。

1. 雨(あめ)はクローンでつくるので、もとのスプライトはかくしておきます。
2. 太陽(たいよう)がのぼるタイミングではやむように、マウスの位置(いち)をチェックするようにします。
3. たくさんふらせたいので、じぶんじしんのクローンをつくるを３つほどつなげます。

今回(こんかい)は、マウスの y 座標(ざひょう)がだいたい50のところで太陽(たいよう)が山(やま)のうしろからみえるようになるので、マウスポインターがそれより上(うえ)にあるときだけ雨(あめ)のクローンをつくるようにしています。

マウスの位置(いち)は、マウスのyざひょう のブロックをクリックしてしらべることができます。太陽(たいよう)がのぼるだいたいのたかさにブロックをおいてクリックしてみてくださいね。

クローンをつくったら、表示(ひょうじ)しましょう。

1. ステージの上(うえ)のほうから雨(あめ)をふらせます。
2. 雨(あめ)のサイズは、マウスの位置(いち)におうじてかわるようにします。
3. 雨(あめ)のコスチュームを指定(してい)して、表示(ひょうじ)します。

雨(あめ)のサイズをかえるのは、大雨(おおあめ)のときはおおきく、小雨(こさめ)になるつれてちいさくするためです。つづいて、雨(あめ)をふらせましょう。

1. ふってくるスピードは、マウスの位置(いち)におうじてかわるようにします。
2. ステージの下(した)のほうまでうごいたら、飛沫(しぶき)のコスチュームにします。
3. すこしずつ透明(とうめい)に、すこしずつサイズをおおきくしたあと、雨(あめ)のクローンを削除(さくじょ)します。

座標(ざひょう)をかえるスピードを 1 / (マウスのyざひょう / 50) にすると、マウスポインターが上(うえ)のほうにあるときは、たとえば 1 / (150 / 50) となり、0.333… 秒(びょう)で雨(あめ)がふります。マウスを下(した)へうごかして、たとえば 1 / (80 / 50) とすると、0.625… 秒(びょう)かけて座標(ざひょう)をかえるので、雨(あめ)のふるスピードはおそくなります。

スクリプト完成(かんせい)

雨(あめ)のパララックスアニメーションの完成(かんせい)です。

Scratch の Pyxofy ページへいって、実際(じっさい)にうごきをためしてみてくださいね。Scratch あめのパララックスアニメーション by Pyxofy

まとめ

今回(こんかい)は、Scratch でパララックスアニメーションをつくりました。

景色(けしき)のうごき、景色(けしき)のあかるさ、雨(あめ)のふる量(りょう)、これらすべてをマウスの y 座標(ざひょう)の値(あたい)にあわせて変化(へんか)するようにしました。y 座標(ざひょう)だけでなく、x 座標(ざひょう)もマウスの位置(いち)におうじてかわるようにすると、横方向(よこほうこう)にも景色(けしき)をうごかせるようになるので、ぜひためしてみてください。

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

SNS で Pyxofy とつながりましょう！ LinkedIn・ Threads・Bluesky・ Mastodon・ X (Twitter) @pyxofy・ Facebook

関連記事