スクロール処理の仕組み｜背景・前景・カメラの動きを作る方法

スクロール処理を実装したい。でも、背景と前景の動きが分からない。

多くの学生が最初に感じるのが、この疑問です。

実は、スクロール処理は、背景と前景を別々に動かすことで実現できます。

この記事では、スクロール処理の仕組みについて、背景・前景・カメラの動きを作る方法を解説します。

✨ この記事でわかること

スクロール処理の基本
背景の動かし方
前景の動かし方
Parallaxスクロールの実装

ゲーム開発講師

スクロール処理は、背景と前景を別々に動かすことで実現できます。まずは、基本的な動かし方から始めましょう。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる

ゲームを「遊ぶ側」から「作る側」へ

あなたのオリジナルゲーム、今年こそ完成させませんか？

RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。

Unity入門の森｜永久会員チケット

全講座ラインナップを見てみる

実際に完成するゲームを題材に、
ソースコード・素材・プロジェクト一式をすべて公開。
仕事や学校の合間の1〜2時間でも、
「写経→改造」で自分のゲームまで作りきれる環境です。

スクロール処理の基本
背景の動かし方
前景の動かし方
カメラの動かし方
1. Unityでのカメラ追従（最小コード）
2. 背景スクロールとの違い
Parallaxスクロールの実装
実践的なスクロール処理を学ぶには
まとめ

スクロール処理の基本

スクロール処理は、ゲーム画面に“動いているように見える世界”を作るための仕組みです。

背景・前景・カメラがそれぞれ異なる役割を持ち、この3つの組み合わせによって多様なスクロール演出が実現します。

まず、全体の仕組みを整理します。

背景：画面の奥にあるレイヤー。遠くにあるものとしてゆっくり動く。
前景：手前にあるレイヤー。近い位置にあるため速く動く。
カメラ：プレイヤーを追いかけたり、特定方向に移動して画面全体を見せる役割。

現実の景色でも、遠くの山はゆっくり、近くの建物は速く流れて見えます。

ゲームでも同じ原理が働いており、この“距離による速度差”が奥行きのある画面演出を生み出します。

カメラが移動すると、実際に背景や地形が動いていなくても、画面内の要素が相対的に動いて見えます。

これが横スクロールゲームの基盤となる仕組みです。

こうした基本構造を踏まえたうえで、背景や前景を個別に動かす方法や、奥行きを演出するParallaxスクロールの実装を見ていきます。

背景の動かし方

背景を動かすには、Transformの位置を更新します。

以下のコードで、基本的な背景スクロールができます。

using UnityEngine;

public class BackgroundScroll : MonoBehaviour
{
    [SerializeField] private float scrollSpeed = 1f;
    
    void Update()
    {
        transform.position += Vector3.left * scrollSpeed * Time.deltaTime;
    }
}

using UnityEngine;

public class BackgroundScroll : MonoBehaviour

{

[SerializeField] private float scrollSpeed = 1f;

void Update()

{

transform.position += Vector3.left * scrollSpeed * Time.deltaTime;

}

このコードは、背景を一定速度で左へ動かしてスクロールを作っています。

scrollSpeed を変えれば、速さもすぐ調整できます。

ゲーム開発講師

背景スクロールは「実際に動かしてみて決める」のが一番確実です。速すぎても遅すぎても違和感が出るので、画面を見ながらしっくりくる速度を探しましょう。

前景の動かし方

前景を動かす方法は、背景と同じです。

ただし、前景は背景より速く動かすことで、奥行き感が出ます。

using UnityEngine;

public class ForegroundScroll : MonoBehaviour
{
    [SerializeField] private float scrollSpeed = 2f;
    
    void Update()
    {
        transform.position += Vector3.left * scrollSpeed * Time.deltaTime;
    }
}

using UnityEngine;

public class ForegroundScroll : MonoBehaviour

{

[SerializeField] private float scrollSpeed = 2f;

void Update()

{

transform.position += Vector3.left * scrollSpeed * Time.deltaTime;

}

このコードでは、前景レイヤーが背景より速く動くことで、距離の差を視覚的に表現できます。

scrollSpeed を背景より大きくすると、手前の物体が「自分に近いもの」として感じられ、画面に奥行きが生まれます。

つまり、ただのスクロールではなく、世界に立体感を与えるための仕組みとして意味があるわけです。

カメラの動かし方

スクロール演出では、背景や前景を動かすだけでなく、カメラがプレイヤーを追いかける仕組みが必要です。

プレイヤーが進む方向へカメラが移動することで、ステージ全体が流れて見えるようになります。

Unityでのカメラ追従（最小コード）

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;
    }
}

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での実装例を紹介します。

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;
    }
}

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入門の森では、アクションゲームの作り方を、基礎から完成まで丁寧に解説しています。

コードの意味から、なぜその実装方法を選ぶのかまで、しっかり理解できる内容になっています。

Q: 初心者でも本当に作れるの？
A: はい。Unity入門の森の講座では、プログラミング経験がなくても、手順通りに進めれば完成までたどり着けます。分からない部分は、動画と図解で詳しく説明しています。

アクションゲーム制作に特化した講座なら、効率的にスキルアップできます。

ゲーム制作でスキルを上げたい方は、ぜひチェックしてみてください。

ゲームを「遊ぶ側」から「作る側」へ

あなたのオリジナルゲーム、今年こそ完成させませんか？

RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。

Unity入門の森｜永久会員チケット

全講座ラインナップを見てみる

まとめ

スクロール処理の仕組みについて解説しました。

要点のまとめ

背景と前景を別々に動かす
前景は背景より速く動かす
Parallaxスクロールで奥行き感を出す
実際に動かしながら、感覚的に調整する

基本を押さえれば、あとは応用していくだけです。

まずは、ここで紹介したコードを実際に動かしてみてください。

動かしながら理解を深めていくのが、上達への近道です。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる