スクロール処理を実装したい。でも、背景と前景の動きが分からない。
多くの学生が最初に感じるのが、この疑問です。
実は、スクロール処理は、背景と前景を別々に動かすことで実現できます。
この記事では、スクロール処理の仕組みについて、背景・前景・カメラの動きを作る方法を解説します。
✨ この記事でわかること
- スクロール処理の基本
- 背景の動かし方
- 前景の動かし方
- Parallaxスクロールの実装
スクロール処理は、背景と前景を別々に動かすことで実現できます。まずは、基本的な動かし方から始めましょう。
Unity入門の森を見る 初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる
あなたのオリジナルゲーム、今年こそ完成させませんか？
RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。
実際に完成するゲームを題材に、
ソースコード・素材・プロジェクト一式をすべて公開。
仕事や学校の合間の1〜2時間でも、
「写経→改造」で自分のゲームまで作りきれる環境です。
スクロール処理の基本
背景・前景・カメラがそれぞれ異なる役割を持ち、この3つの組み合わせによって多様なスクロール演出が実現します。
まず、全体の仕組みを整理します。
- 背景：画面の奥にあるレイヤー。遠くにあるものとしてゆっくり動く。
- 前景：手前にあるレイヤー。近い位置にあるため速く動く。
- カメラ：プレイヤーを追いかけたり、特定方向に移動して画面全体を見せる役割。
現実の景色でも、遠くの山はゆっくり、近くの建物は速く流れて見えます。
ゲームでも同じ原理が働いており、この“距離による速度差”が奥行きのある画面演出を生み出します。
カメラが移動すると、実際に背景や地形が動いていなくても、画面内の要素が相対的に動いて見えます。
これが横スクロールゲームの基盤となる仕組みです。
こうした基本構造を踏まえたうえで、背景や前景を個別に動かす方法や、奥行きを演出するParallaxスクロールの実装を見ていきます。
背景の動かし方
背景を動かすには、Transformの位置を更新します。
以下のコードで、基本的な背景スクロールができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
using UnityEngine; public class BackgroundScroll : MonoBehaviour { [SerializeField] private float scrollSpeed = 1f; void Update() { transform.position += Vector3.left * scrollSpeed * Time.deltaTime; } } |
このコードは、背景を一定速度で左へ動かしてスクロールを作っています。
scrollSpeed を変えれば、速さもすぐ調整できます。
背景スクロールは「実際に動かしてみて決める」のが一番確実です。速すぎても遅すぎても違和感が出るので、画面を見ながらしっくりくる速度を探しましょう。
前景の動かし方
前景を動かす方法は、背景と同じです。
ただし、前景は背景より速く動かすことで、奥行き感が出ます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
using UnityEngine; public class ForegroundScroll : MonoBehaviour { [SerializeField] private float scrollSpeed = 2f; void Update() { transform.position += Vector3.left * scrollSpeed * Time.deltaTime; } } |
このコードでは、前景レイヤーが背景より速く動くことで、距離の差を視覚的に表現できます。
scrollSpeed を背景より大きくすると、手前の物体が「自分に近いもの」として感じられ、画面に奥行きが生まれます。
つまり、ただのスクロールではなく、世界に立体感を与えるための仕組みとして意味があるわけです。
カメラの動かし方
スクロール演出では、背景や前景を動かすだけでなく、カメラがプレイヤーを追いかける仕組みが必要です。
プレイヤーが進む方向へカメラが移動することで、ステージ全体が流れて見えるようになります。
Unityでのカメラ追従（最小コード）
|
1 2 3 4 5 6 7 8 9 10 11 |
public class CameraFollow : MonoBehaviour { public Transform player; void LateUpdate() { Vector3 next = new Vector3(player.position.x, player.position.y, transform.position.z); transform.position = next; } } |
プレイヤーの位置をそのままカメラへ反映する、もっともシンプルな追従方法です。
背景スクロールとの違い
- カメラを動かす：画面全体が進んで見える
- 背景を動かす：奥行きを表現するための演出
両方を組み合わせることで、自然なスクロール演出が完成します。
Parallaxスクロールの実装
背景と前景を別々の速度で動かすと、画面に奥行きが生まれます。
Unityでは、この「速度差」をカメラの動きと組み合わせることで、より自然な奥行きを作る Parallaxスクロール を実現できます。
ここからは、この速度差を活かしたParallaxスクロールの作り方を紹介します。
Unityでの実装例を紹介します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
using UnityEngine; public class ParallaxScroll : MonoBehaviour { [SerializeField] private Transform cameraTransform; [SerializeField] private float parallaxSpeed = 0.5f; private Vector3 lastCameraPosition; void Start() { lastCameraPosition = cameraTransform.position; } void LateUpdate() { Vector3 deltaMovement = cameraTransform.position - lastCameraPosition; transform.position += deltaMovement * parallaxSpeed; lastCameraPosition = cameraTransform.position; } } |
Parallaxスクロールを使うと、背景の奥と手前がカメラの動きに合わせて別々に動きます。
その結果、ただの平面だった背景に奥行きが生まれ、世界が広く見えるようになります。
ゆっくり動く遠景、速く動く手前のレイヤーが重なることで、2Dなのに立体感のある画面を作れるのが最大のメリットです。
Unity入門の森を見る 初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる
実践的なスクロール処理を学ぶには
ここまで、スクロール処理の仕組みについて解説してきました。
ただし、実際のゲーム制作では、さらに多くの要素が必要になります。
アニメーション、エフェクト、UI、サウンドなど、全体を体系的に学ぶには、専門の講座が効率的です。
Unity入門の森では、アクションゲームの作り方を、基礎から完成まで丁寧に解説しています。
コードの意味から、なぜその実装方法を選ぶのかまで、しっかり理解できる内容になっています。
アクションゲーム制作に特化した講座なら、効率的にスキルアップできます。
ゲーム制作でスキルを上げたい方は、ぜひチェックしてみてください。
あなたのオリジナルゲーム、今年こそ完成させませんか？
RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。
実際に完成するゲームを題材に、
ソースコード・素材・プロジェクト一式をすべて公開。
仕事や学校の合間の1〜2時間でも、
「写経→改造」で自分のゲームまで作りきれる環境です。
まとめ
スクロール処理の仕組みについて解説しました。
要点のまとめ
- 背景と前景を別々に動かす
- 前景は背景より速く動かす
- Parallaxスクロールで奥行き感を出す
- 実際に動かしながら、感覚的に調整する
基本を押さえれば、あとは応用していくだけです。
まずは、ここで紹介したコードを実際に動かしてみてください。
動かしながら理解を深めていくのが、上達への近道です。
Unity入門の森を見る 初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる
コメント