【Scratch】手前と奥でスピードをずらし背景が動いているように見せる方法(キャラクターが動くと背景も動く)

※本記事はアフィリエイト広告を利用しています。
背景の移動スピードを変える ゲーム

どうもー!マミィです!

フリーランスプログラマーをしながら、「スクラッチプログラミング」・「マインクラフト」の真似したいと思う、役に立つ情報を中心に発信しています!

キャラクターが動くと手前と奥でスピードがずれながら動く方法が知りたい!

マミィ
マミィ

透過スプライトを使って、本格的な動く背景を作っていきましょう!

簡単にできますよ!

今回作るのは、こんなキャラクターが左右に動くと、奥(白雲)と手前の背景(草)が動く方法です!

奥の背景はゆっくり動き、手前の背景は早く動きます。(遠近法)

実際には、キャラクターは真ん中で移動していないのですが、背景が動くことで、キャラクターが動いているように見せています。

以前、背景が動く方法を解説しましたが、今回はもっと本格的に見えるように、バージョンアップしています!

この記事でわかること。

  • キャラクターと同時に動く、手前の背景と奥の背景の動かし方
  • 手前と奥の背景をリピート表示させる方法

この記事を読むと、複数の背景のスピードを変えながらスクロールさせる本格的な方法がわかります。

今回作った作品です。※音が出るので気をつけてください。

手前と奥でスピードをずらし背景を動いているように見せる

背景スクロール以外には、キャラクターの動きだけ少し追加しています。

【スクラッチ】キャラクターの動かし方

左右矢印:左右に動く
上矢印:ジャンプ
下矢印:ローリング
スペースキー:パンチ 

キャラクターと背景は著作権フリー素材(CC0)を使っています。

素材のDL方法と取り込み方が知りたい人はこちらを参考にしてください。

マリオ風に動かす記事と基本は同じ動かす方法ですが、今回使った背景は3つ使って本格的にみえます!

ゲームやプログラミングをPCで楽しもう!

最近購入した富士通のPCがとても快適だったので、おすすめします↓

※2022年11月にAmazonで買いました。ゲームの録画もワンタッチでできます。

スクラッチも教育版マインクラフトもこのパソコンで作ってます。

スポンサーリンク

キャラクターと同時に動く、手前の背景と奥の背景の動かし方

【必要な材料】

  1. キャラクター用透過画像
  2. 動かさない一番後ろの背景
  3. 透過背景用画像(手前と奥)

今回はこの素材を使います!

キャラクターは1つにまとまった画像だったので、 切り分けました・・・。(地味な作業)

背景は同じものを複製(コピー)して使いますが、最後の背景まで行ったら、1枚目に戻り永遠リピートできます。

①キャラクターを左右に「動かした移動量(スクロール)」の変数を作る

まずは、キャラクターが左右に動いたとき(ようにみせる)に、背景が動くように移動した量を変数にします。

変数で「スクロール」を作っておきます。

キャラクターは矢印キーで操作させるので、

右矢印で「-5」ずつ変え、左矢印キーで「5」ずつ変えます。

ここの数字を-10,10にするともっと速く動いているように見えます。

ずっと右矢印を押し続けると、

-5→-10→-15→-20・・・とマイナスの数字が大きくなります。

背景のコードでは、このスクロールの数字を使って、動かしていきます!

②動かない1番後ろの背景のアップロード

ステージ>背景をアップロード

背景の水色の背景をアップロードします。

アップロードしてから、画面全体になるように大きさを調整しました。

コードはなし。

③手前の背景を配置する

最終的に、同じ背景を複製(コピー)して、6個↑のように並べます。

事前に、スクラッチの画面の横幅は「480」なので、これを基準として変数にしておきます。(この数字はあとから使います!)

手前の背景をアップロードする

スプライト>スプライトをアップロード

草背景をアップロードします。

手前の1つ目の背景の位置の設定のやり方

手前背景1
手前背景1コード
マミィ
マミィ

「スクロール」の変数はキャラクターが動いた時に変わる変数です。

←左右矢印を押すととスクロールが増減する。

位置をぴったりにあわせるので、x,yは0,0にする

背景を重ねているので、雲の背景より手前に来るように、一番後ろにに移動してから、1層手前に出しています。

矢印キーを押した時に値が変わる変数「スクロール」をx座標にします。

スクロールがマイナスになると、背景はマイナス分だけ左に移動します。

一番左の背景だけ、左の限界があるので、進めないようにしていきます!

0<スクロールなら、スクロールを0にして、x座標も0にします。

左矢印を押しても、背景は動かない状態になります。

※2つ目の背景からは、このコードは入らないので、シンプルなコードになります!

手前背景2の背景の位置設定

背景2つ目は、背景1つ目を複製して作ってください。コードはこれだけです。

1枚めの背景と同じく、x,yを0,0で合わせて、1層手前に出しています。

背景のx座標の位置は、「スクロール」+「背景の幅基準(480がはいっている)」にします。

1つ目の背景の後ろに配置しているので、1枚分の横幅(480)を足してx座標にしています。

手前背景3〜6枚目の背景の位置設定

手前背景3の位置設定
手前背景4の位置設定

3枚めは、左に2つ分の背景があるので、その分を移動させています。「480×2」を足しています。

ほかも同じように、左に何個分の背景があるのかで、足す数が決まってきます。

手前背景5の位置設定
手前背景6の位置設定

④奥の背景を配置する

最終的には2枚並べて配置します。

奥の背景をアップロードする

スプライト>スプライトをアップロード

白い雲の画像をアップロードします。

奥の1つ目の背景の位置の設定のやり方

白い雲の背景は、手前の背景より遅く動かすために、移動する量を0.2をかけて小さくしています。

前の背景より、5倍遅く動きます。

ここの数字を0.5をかけるようにすると、手前の背景のスピードの半分の速さで動きます。

マミィ
マミィ

「スクロール」の変数はキャラクターが動いた時に変わる変数です。

←左右矢印を押すととスクロールが増減する。

奥の2つ目の背景の位置の設定のやり方

左に1つ目の雲の背景があるので、その幅分(背景の幅基準)を足してx座標にしています。

手前と奥の背景をリピート表示させる方法

今回手前6つ、奥2つの背景を並べた理由としては、繰り返しが自然に見える数だったからです。

手前の背景の6つ目で、最後にきたら1番はじめの位置に移動していますが、手前と奥がはじめの位置に戻ったときに、自然に見えたのが「手前6つ」「奥2つ」の数でした。

マミィ
マミィ

背景リピートするときには、すべての背景が最後→最初に戻った時に、背景がぴったり合わないと違和感を感じます。

  • スクロール量は-5、5
  • 奥背景は0.2をかける

この設定がオススメです。

6つ目の背景にはじめの位置に戻すコードをいれる

1番最後の背景が、x座標<0なら、スクロールを0にする。

最後の背景がぴったり画面いっぱいになったときに、1つめの位置に移動しています。

 ↓

スクロールが変わると、もう一つの「奥の背景」もはじめの位置に戻ります。

まとめ

以上、複数枚の背景用の画像を重ねて、スピードを変えることで本格的なゲームにみせる方法を解説してきました。

ポイントをおさらいします。

  1. 左右の矢印キーで「スクロール量」を増減させる
  2. 手前の背景画像は6つを並べて配置する
  3. 手前の背景はスクロール量で左右に移動させる
  4. 奥の背景画像は2つを並べて配置する
  5. 奥の背景画像はスクロール量×0.2で左右に移動させる。
  6. 手前の背景の最後で、スクロール量を0にしてリピートさせる

それぞれのコードは、難しくもなく、量も少ないので簡単にできます。

実際のスクラッチのコードでみたい場合はこちら↓

手前と奥でスピードをずらし背景を動いているように見せる

マミィ
マミィ

楽しくプログラミングしましょうー!!

タイトルとURLをコピーしました