どうもー！マミィです！
フリーランスプログラマーをしながら、「スクラッチプログラミング」・「マインクラフト」の真似したいと思う、役に立つ情報を中心に発信しています！
キャラクターが動くと手前と奥でスピードがずれながら動く方法が知りたい！
透過スプライトを使って、本格的な動く背景を作っていきましょう！
簡単にできますよ！
今回作るのは、こんなキャラクターが左右に動くと、奥（白雲）と手前の背景（草）が動く方法です！
奥の背景はゆっくり動き、手前の背景は早く動きます。（遠近法）
実際には、キャラクターは真ん中で移動していないのですが、背景が動くことで、キャラクターが動いているように見せています。
以前、背景が動く方法を解説しましたが、今回はもっと本格的に見えるように、バージョンアップしています！
この記事でわかること。
- キャラクターと同時に動く、手前の背景と奥の背景の動かし方
- 手前と奥の背景をリピート表示させる方法
この記事を読むと、複数の背景のスピードを変えながらスクロールさせる本格的な方法がわかります。
今回作った作品です。※音が出るので気をつけてください。
背景スクロール以外には、キャラクターの動きだけ少し追加しています。
左右矢印：左右に動く
上矢印：ジャンプ
下矢印：ローリング
スペースキー：パンチ
キャラクターと背景は著作権フリー素材（CC0）を使っています。
素材のDL方法と取り込み方が知りたい人はこちらを参考にしてください。
マリオ風に動かす記事と基本は同じ動かす方法ですが、今回使った背景は３つ使って本格的にみえます！
最近購入した富士通のPCがとても快適だったので、おすすめします↓
※2022年11月にAmazonで買いました。ゲームの録画もワンタッチでできます。
スクラッチも教育版マインクラフトもこのパソコンで作ってます。
キャラクターと同時に動く、手前の背景と奥の背景の動かし方
【必要な材料】
- キャラクター用透過画像
- 動かさない一番後ろの背景
- 透過背景用画像（手前と奥）
今回はこの素材を使います！
キャラクターは１つにまとまった画像だったので、 切り分けました・・・。（地味な作業）
背景は同じものを複製（コピー）して使いますが、最後の背景まで行ったら、１枚目に戻り永遠リピートできます。
①キャラクターを左右に「動かした移動量（スクロール）」の変数を作る
まずは、キャラクターが左右に動いたとき（ようにみせる）に、背景が動くように移動した量を変数にします。
変数で「スクロール」を作っておきます。
キャラクターは矢印キーで操作させるので、
右矢印で「-5」ずつ変え、左矢印キーで「5」ずつ変えます。
ここの数字を-10,10にするともっと速く動いているように見えます。
ずっと右矢印を押し続けると、
-5→-10→-15→-20・・・とマイナスの数字が大きくなります。
背景のコードでは、このスクロールの数字を使って、動かしていきます！
②動かない１番後ろの背景のアップロード
ステージ＞背景をアップロード
背景の水色の背景をアップロードします。
アップロードしてから、画面全体になるように大きさを調整しました。
コードはなし。
③手前の背景を配置する
最終的に、同じ背景を複製（コピー）して、６個↑のように並べます。
事前に、スクラッチの画面の横幅は「480」なので、これを基準として変数にしておきます。（この数字はあとから使います！）
手前の背景をアップロードする
スプライト＞スプライトをアップロード
草背景をアップロードします。
手前の１つ目の背景の位置の設定のやり方
「スクロール」の変数はキャラクターが動いた時に変わる変数です。
←左右矢印を押すととスクロールが増減する。
位置をぴったりにあわせるので、ｘ，ｙは０，０にする
背景を重ねているので、雲の背景より手前に来るように、一番後ろにに移動してから、１層手前に出しています。
矢印キーを押した時に値が変わる変数「スクロール」をx座標にします。
スクロールがマイナスになると、背景はマイナス分だけ左に移動します。
一番左の背景だけ、左の限界があるので、進めないようにしていきます！
０＜スクロールなら、スクロールを０にして、ｘ座標も０にします。
左矢印を押しても、背景は動かない状態になります。
※２つ目の背景からは、このコードは入らないので、シンプルなコードになります！
手前背景２の背景の位置設定
背景２つ目は、背景１つ目を複製して作ってください。コードはこれだけです。
１枚めの背景と同じく、ｘ，ｙを０，０で合わせて、１層手前に出しています。
背景のｘ座標の位置は、「スクロール」＋「背景の幅基準（480がはいっている）」にします。
１つ目の背景の後ろに配置しているので、１枚分の横幅（480）を足してx座標にしています。
手前背景３〜６枚目の背景の位置設定
３枚めは、左に２つ分の背景があるので、その分を移動させています。「480×2」を足しています。
ほかも同じように、左に何個分の背景があるのかで、足す数が決まってきます。
④奥の背景を配置する
最終的には２枚並べて配置します。
奥の背景をアップロードする
スプライト＞スプライトをアップロード
白い雲の画像をアップロードします。
奥の１つ目の背景の位置の設定のやり方
白い雲の背景は、手前の背景より遅く動かすために、移動する量を0.2をかけて小さくしています。
前の背景より、5倍遅く動きます。
ここの数字を0.5をかけるようにすると、手前の背景のスピードの半分の速さで動きます。
「スクロール」の変数はキャラクターが動いた時に変わる変数です。
←左右矢印を押すととスクロールが増減する。
奥の２つ目の背景の位置の設定のやり方
左に１つ目の雲の背景があるので、その幅分（背景の幅基準）を足してｘ座標にしています。
手前と奥の背景をリピート表示させる方法
今回手前６つ、奥２つの背景を並べた理由としては、繰り返しが自然に見える数だったからです。
手前の背景の６つ目で、最後にきたら１番はじめの位置に移動していますが、手前と奥がはじめの位置に戻ったときに、自然に見えたのが「手前６つ」「奥２つ」の数でした。
背景リピートするときには、すべての背景が最後→最初に戻った時に、背景がぴったり合わないと違和感を感じます。
- スクロール量は-5、5
- 奥背景は0.2をかける
この設定がオススメです。
６つ目の背景にはじめの位置に戻すコードをいれる
１番最後の背景が、x座標＜0なら、スクロールを0にする。
最後の背景がぴったり画面いっぱいになったときに、１つめの位置に移動しています。
↓
スクロールが変わると、もう一つの「奥の背景」もはじめの位置に戻ります。
まとめ
以上、複数枚の背景用の画像を重ねて、スピードを変えることで本格的なゲームにみせる方法を解説してきました。
ポイントをおさらいします。
- 左右の矢印キーで「スクロール量」を増減させる
- 手前の背景画像は６つを並べて配置する
- 手前の背景はスクロール量で左右に移動させる
- 奥の背景画像は２つを並べて配置する
- 奥の背景画像はスクロール量×0.2で左右に移動させる。
- 手前の背景の最後で、スクロール量を０にしてリピートさせる
それぞれのコードは、難しくもなく、量も少ないので簡単にできます。
実際のスクラッチのコードでみたい場合はこちら↓
楽しくプログラミングしましょうー！！
