どうもー!マミィです!
フリーランスプログラマーをしながら、「スクラッチプログラミング」・「マインクラフト」の真似したいと思う、役に立つ情報を中心に発信しています!
![](https://programommy.com/wp-content/uploads/2022/03/1646526332916-1-e1654386863580-150x150.jpg)
キャラクターが動くと手前と奥でスピードがずれながら動く方法が知りたい!
![マミィ](https://programommy.com/wp-content/uploads/2022/03/cropped-2975bc8c4727d8f51ee97d791aabd406-e1654387018377-150x150.jpg)
透過スプライトを使って、本格的な動く背景を作っていきましょう!
簡単にできますよ!
![](https://programommy.com/wp-content/uploads/2022/07/8e1b944f4389bdaab6f11d5bc83190c8.gif)
今回作るのは、こんなキャラクターが左右に動くと、奥(白雲)と手前の背景(草)が動く方法です!
奥の背景はゆっくり動き、手前の背景は早く動きます。(遠近法)
実際には、キャラクターは真ん中で移動していないのですが、背景が動くことで、キャラクターが動いているように見せています。
以前、背景が動く方法を解説しましたが、今回はもっと本格的に見えるように、バージョンアップしています!
この記事でわかること。
- キャラクターと同時に動く、手前の背景と奥の背景の動かし方
- 手前と奥の背景をリピート表示させる方法
この記事を読むと、複数の背景のスピードを変えながらスクロールさせる本格的な方法がわかります。
今回作った作品です。※音が出るので気をつけてください。
背景スクロール以外には、キャラクターの動きだけ少し追加しています。
左右矢印:左右に動く
上矢印:ジャンプ
下矢印:ローリング
スペースキー:パンチ
キャラクターと背景は著作権フリー素材(CC0)を使っています。
素材のDL方法と取り込み方が知りたい人はこちらを参考にしてください。
マリオ風に動かす記事と基本は同じ動かす方法ですが、今回使った背景は3つ使って本格的にみえます!
最近購入した富士通のPCがとても快適だったので、おすすめします↓
※2022年11月にAmazonで買いました。ゲームの録画もワンタッチでできます。
スクラッチも教育版マインクラフトもこのパソコンで作ってます。
キャラクターと同時に動く、手前の背景と奥の背景の動かし方
【必要な材料】
- キャラクター用透過画像
- 動かさない一番後ろの背景
- 透過背景用画像(手前と奥)
![](https://programommy.com/wp-content/uploads/2022/07/girl.png)
![](https://programommy.com/wp-content/uploads/2022/07/sky-1.png)
![](https://programommy.com/wp-content/uploads/2022/07/forest-1.png)
![](https://programommy.com/wp-content/uploads/2022/07/cloud-1.png)
今回はこの素材を使います!
キャラクターは1つにまとまった画像だったので、 切り分けました・・・。(地味な作業)
背景は同じものを複製(コピー)して使いますが、最後の背景まで行ったら、1枚目に戻り永遠リピートできます。
①キャラクターを左右に「動かした移動量(スクロール)」の変数を作る
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T172328.130.png)
まずは、キャラクターが左右に動いたとき(ようにみせる)に、背景が動くように移動した量を変数にします。
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T173233.236.png)
変数で「スクロール」を作っておきます。
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T172417.615.png)
キャラクターは矢印キーで操作させるので、
右矢印で「-5」ずつ変え、左矢印キーで「5」ずつ変えます。
ここの数字を-10,10にするともっと速く動いているように見えます。
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T173904.220.png)
ずっと右矢印を押し続けると、
-5→-10→-15→-20・・・とマイナスの数字が大きくなります。
背景のコードでは、このスクロールの数字を使って、動かしていきます!
②動かない1番後ろの背景のアップロード
ステージ>背景をアップロード
背景の水色の背景をアップロードします。
![](https://programommy.com/wp-content/uploads/2022/07/2585859808eecbb54a057bd821213b2b.png)
アップロードしてから、画面全体になるように大きさを調整しました。
コードはなし。
③手前の背景を配置する
![](https://programommy.com/wp-content/uploads/2022/07/5926bcb4ccc4d0f3d945206d8fb73cb2.png)
最終的に、同じ背景を複製(コピー)して、6個↑のように並べます。
事前に、スクラッチの画面の横幅は「480」なので、これを基準として変数にしておきます。(この数字はあとから使います!)
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T112103.112.png)
手前の背景をアップロードする
スプライト>スプライトをアップロード
草背景をアップロードします。
![](https://programommy.com/wp-content/uploads/2022/07/7a62419373c5549e4f5c25d0e42f8332.png)
手前の1つ目の背景の位置の設定のやり方
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T165904.520-1024x632.png)
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T165919.292.png)
![マミィ](https://programommy.com/wp-content/uploads/2022/03/cropped-2975bc8c4727d8f51ee97d791aabd406-e1654387018377-150x150.jpg)
「スクロール」の変数はキャラクターが動いた時に変わる変数です。
![](https://programommy.com/wp-content/uploads/2022/07/idle2.png)
←左右矢印を押すととスクロールが増減する。
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T174412.411.png)
位置をぴったりにあわせるので、x,yは0,0にする
背景を重ねているので、雲の背景より手前に来るように、一番後ろにに移動してから、1層手前に出しています。
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T174652.075.png)
矢印キーを押した時に値が変わる変数「スクロール」をx座標にします。
スクロールがマイナスになると、背景はマイナス分だけ左に移動します。
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T175308.139.png)
一番左の背景だけ、左の限界があるので、進めないようにしていきます!
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T180308.454.png)
0<スクロールなら、スクロールを0にして、x座標も0にします。
左矢印を押しても、背景は動かない状態になります。
※2つ目の背景からは、このコードは入らないので、シンプルなコードになります!
手前背景2の背景の位置設定
背景2つ目は、背景1つ目を複製して作ってください。コードはこれだけです。
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T184103.447.png)
1枚めの背景と同じく、x,yを0,0で合わせて、1層手前に出しています。
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T184238.586.png)
背景のx座標の位置は、「スクロール」+「背景の幅基準(480がはいっている)」にします。
1つ目の背景の後ろに配置しているので、1枚分の横幅(480)を足してx座標にしています。
手前背景3〜6枚目の背景の位置設定
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T185934.258.png)
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T190015.183.png)
3枚めは、左に2つ分の背景があるので、その分を移動させています。「480×2」を足しています。
ほかも同じように、左に何個分の背景があるのかで、足す数が決まってきます。
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T190651.969.png)
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T191306.975.png)
④奥の背景を配置する
![](https://programommy.com/wp-content/uploads/2022/07/1531d55ae50d1966e9d8cc5e051128ce.png)
最終的には2枚並べて配置します。
奥の背景をアップロードする
スプライト>スプライトをアップロード
白い雲の画像をアップロードします。
![](https://programommy.com/wp-content/uploads/2022/07/6549cc372c0e39ccf2b13dd0397e28d5.png)
奥の1つ目の背景の位置の設定のやり方
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T193150.102.png)
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T200347.642.png)
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T193113.465.png)
白い雲の背景は、手前の背景より遅く動かすために、移動する量を0.2をかけて小さくしています。
前の背景より、5倍遅く動きます。
ここの数字を0.5をかけるようにすると、手前の背景のスピードの半分の速さで動きます。
![マミィ](https://programommy.com/wp-content/uploads/2022/03/cropped-2975bc8c4727d8f51ee97d791aabd406-e1654387018377-150x150.jpg)
「スクロール」の変数はキャラクターが動いた時に変わる変数です。
![](https://programommy.com/wp-content/uploads/2022/07/idle2.png)
←左右矢印を押すととスクロールが増減する。
奥の2つ目の背景の位置の設定のやり方
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T200822.313.png)
左に1つ目の雲の背景があるので、その幅分(背景の幅基準)を足してx座標にしています。
手前と奥の背景をリピート表示させる方法
![](https://programommy.com/wp-content/uploads/2022/07/5926bcb4ccc4d0f3d945206d8fb73cb2.png)
![](https://programommy.com/wp-content/uploads/2022/07/1531d55ae50d1966e9d8cc5e051128ce-1.png)
今回手前6つ、奥2つの背景を並べた理由としては、繰り返しが自然に見える数だったからです。
手前の背景の6つ目で、最後にきたら1番はじめの位置に移動していますが、手前と奥がはじめの位置に戻ったときに、自然に見えたのが「手前6つ」「奥2つ」の数でした。
![マミィ](https://programommy.com/wp-content/uploads/2022/03/cropped-2975bc8c4727d8f51ee97d791aabd406-e1654387018377-150x150.jpg)
背景リピートするときには、すべての背景が最後→最初に戻った時に、背景がぴったり合わないと違和感を感じます。
- スクロール量は-5、5
- 奥背景は0.2をかける
この設定がオススメです。
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T172417.615.png)
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-03T044629.970.png)
6つ目の背景にはじめの位置に戻すコードをいれる
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T202121.806-1024x630.png)
![](https://programommy.com/wp-content/uploads/2022/07/Screenshot-2022-07-02T202108.760.png)
1番最後の背景が、x座標<0なら、スクロールを0にする。
最後の背景がぴったり画面いっぱいになったときに、1つめの位置に移動しています。
![](https://programommy.com/wp-content/uploads/2022/07/e0a64b8913efc3f1a80c6617568825fd.png)
↓
![](https://programommy.com/wp-content/uploads/2022/07/48a105310758e840a243655f479b56da.png)
スクロールが変わると、もう一つの「奥の背景」もはじめの位置に戻ります。
まとめ
以上、複数枚の背景用の画像を重ねて、スピードを変えることで本格的なゲームにみせる方法を解説してきました。
ポイントをおさらいします。
- 左右の矢印キーで「スクロール量」を増減させる
- 手前の背景画像は6つを並べて配置する
- 手前の背景はスクロール量で左右に移動させる
- 奥の背景画像は2つを並べて配置する
- 奥の背景画像はスクロール量×0.2で左右に移動させる。
- 手前の背景の最後で、スクロール量を0にしてリピートさせる
それぞれのコードは、難しくもなく、量も少ないので簡単にできます。
実際のスクラッチのコードでみたい場合はこちら↓
![マミィ](https://programommy.com/wp-content/uploads/2022/03/887784e326d33cdb30f13acf3e61c111-e1654001514695-150x150.jpg)
楽しくプログラミングしましょうー!!