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

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

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

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

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

✨ この記事でわかること

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

ゲーム開発講師

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

＼あなたにピッタリのアクションゲーム制作講座を見つけよう！／

おすすめ第1位

Unity 2Dアクションゲーム
の作り方講座（ロックマン風）

★★★★★ (スマホ化・広告実装)

ロックマン風の横スクロールACTをスマホ化・広告実装まで対応。ゲームのリリースまでを見据えた実践的なカリキュラムで、作って終わりにならない一本です。

講座を購読する＼リリースまで一気に学ぼう／

3D入門に最適

ゼルダ風3Dアクションゲーム
の作り方講座

★★★★★ (スマホ化対応)

ゼルダ風の3Dアクションをスマホ対応で作れる入門講座。全16回で初心者でも3Dゲーム開発の基礎からしっかり習得できます。

講座を購読する＼初心者でも3Dアクションが作れる！／

3プラットフォーム対応

Unity FPSゲームの
作り方講座

★★★★★ (スマホ・VR対応)

FPS・VR・スマホの3プラットフォームに同時対応。1本作るだけで3つのゲームが完成する圧倒的なコスパが魅力の講座です。

講座を購読する＼FPS・VR・スマホを同時に制覇！／

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

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

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

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

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

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

スクロール処理の基本
背景の動かし方
前景の動かし方
カメラの動かし方
1. Unityでのカメラ追従（最小コード）
2. 背景スクロールとの違い
Parallaxスクロールの実装
実践的なスクロール処理を学ぶには
アクションゲームを作りたいなら！Unity入門の森のアクション制作講座で本格ゲーム開発に挑戦しよう
まとめ

スクロール処理の基本

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

背景・前景・カメラがそれぞれ異なる役割を持ち、この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なのに立体感のある画面を作れるのが最大のメリットです。

実践的なスクロール処理を学ぶには

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

ただし、実際のゲーム制作では、さらに多くの要素が必要になります。

アニメーション、エフェクト、UI、サウンドなど、全体を体系的に学ぶには、専門の講座が効率的です。

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

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

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

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

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

アクションゲームを作りたいなら！Unity入門の森のアクション制作講座で本格ゲーム開発に挑戦しよう

Unity入門の森には、横スクロール・3Dアクション・FPSまで幅広いアクションゲームを作れる講座が揃っています。作りたいジャンルや目標に合わせて選んでみてください。

Unity 2Dアクションゲームの作り方講座（ロックマン風）【全16回！スマホ化・広告実装まで対応した本格横スクロールACTを作れる！】

ロックマン・マリオ・カービィのような横スクロールACTをゼロから開発
7ステージ＋ラスボスステージの市販ゲームに近い本格的なゲーム設計
スマホ化・AdMob広告実装まで対応してリリースまで見据えた構成
敵AI15体・多彩なマップギミック・武器システムを完全実装
完全オリジナルゲームをアセット不使用で素材提供付きで制作

Unity 2Dアクションゲームの作り方講座（ロックマン風）は、ロックマン・スーパーマリオ・星のカービィのような2D横スクロールアクションゲームを開発できるようになる本格的な講座です。

ステージ選択・ボスの弱点システム・新武器ゲットというロックマン風のゲーム設計はもちろん、スマホ実機ビルド・AdMob広告実装（リワード・インタースティシャル）まで対応。作って終わりではなく、リリースして収益化するところまで学べます。

書籍や他のチュートリアルでは扱われていないリリースレベルの開発スキルを習得したい人に、自信を持っておすすめできる一本です。

スマホ化・広告実装まで対応した本格横スクロールACT
ロックマン風の2Dアクションゲームをリリースまで作り上げよう
→ Unity 2Dアクションゲームの作り方講座を見てみる
広告収益まで視野に入れた実践スキルを今すぐ手に入れよう！

ゼルダ風3Dアクションゲームの作り方講座【全16回！初心者でも3Dアクションがスマホ対応で作れる！】

ゼルダの伝説・モンハン・原神のような3Dアクションをゼロから開発
初心者でも取り組みやすい丁寧な解説構成
スマホ化対応で実機で動かせるゲームが完成
画像・動画・全ソースコード公開の充実したサポート
アセットを使った実践的なゲーム開発手法が身につく

ゼルダ風3Dアクションゲームの作り方講座は、ゼルダの伝説・モンハン・原神のような本格的な3Dアクションゲームを作りたい人におすすめの入門講座です。

3Dゲーム開発の基礎からスマホ化まで全16回でしっかり習得できます。画像・動画・全ソースコードを公開した丁寧な解説で、初めて3Dゲームに挑戦する人でも確実に完成まで到達できる構成です。

「3Dゲームはなんだか難しそう」と感じている人が最初の一歩を踏み出すのに最適な講座です。

初心者でも3Dアクションがスマホ対応で完成する
ゼルダ風3Dアクションゲームで3D開発の第一歩を踏み出そう
→ ゼルダ風3Dアクションゲームの作り方講座を見てみる
3D開発の壁を一気に突破！スマホで動くオリジナルゲームを完成させよう！

Unity FPSゲームの作り方講座【全17回！FPS・VR・スマホの3プラットフォームを同時に作れる！】

APEX・バトルフィールド風のFPSゲームをゼロから開発
FPS・スマホ・VRの3プラットフォームに同時対応
書籍では学べないVR対応弓矢FPSのオリジナリティ高い開発手法
地上・空中の敵AIや弓矢チャージショットなど本格システムを実装
初心者でも安心の丁寧な解説と完成プロジェクトファイル付き

Unity FPSゲームの作り方講座は、APEX・バトルフィールド・Call of Dutyのような一人称視点のFPSゲームを作るための講座です。

弓矢を使ったオリジナリティの高いFPSをベースに、PC・スマホ・VRの3プラットフォームに同時対応した開発手法を全17回で習得できます。VR空間で弓を構えて矢を射るという高度なアクションの実装まで、書籍では学べないスキルが身につきます。

1本の講座でFPS・スマホ・VRを同時に作れるのはこの講座ならでは。3Dゲーム開発の幅を一気に広げたい中・上級者志望の方にもおすすめです。

FPS・スマホ・VRの3プラットフォームを同時に完成させる
1本作るだけで3つのゲームが完成する圧倒的な開発体験を手に入れよう
→ Unity FPSゲームの作り方講座を見てみる
書籍では学べないVR対応FPSで、一歩先の3Dゲーム開発スキルを今すぐ！

まとめ

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

要点のまとめ

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

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

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

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

【ゲームの作り方講座もプレゼント中！】

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

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

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

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

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

スクロール処理の基本

背景の動かし方

前景の動かし方

カメラの動かし方

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

背景スクロールとの違い

Parallaxスクロールの実装

実践的なスクロール処理を学ぶには

アクションゲームを作りたいなら！Unity入門の森のアクション制作講座で本格ゲーム開発に挑戦しよう

Unity 2Dアクションゲームの作り方講座（ロックマン風）【全16回！スマホ化・広告実装まで対応した本格横スクロールACTを作れる！】

ゼルダ風3Dアクションゲームの作り方講座【全16回！初心者でも3Dアクションがスマホ対応で作れる！】

Unity FPSゲームの作り方講座【全17回！FPS・VR・スマホの3プラットフォームを同時に作れる！】

まとめ

コメント