1. はじめに
こんにちは!今回は、ゲームの背景を無限にスクロールさせる方法を紹介します。
例えば、ランニングゲームやシューティングゲームでは、背景が動くことでゲームに臨場感が生まれますよね。でも、どうやって背景をスムーズに動かすの?と思っている方も多いのではないでしょうか。
この記事では、初心者でも簡単に理解できるよう、手順をわかりやすく解説していきます。必要な素材の準備からスクリプト作成、実際に背景を動かすまで、しっかりサポートします。
背景を動かしてゲームをもっと楽しく演出してみましょう!
全くUnityを触ったことがないという方はコチラの記事から見てみて下さい!
2. 必要な準備
背景を無限にスクロールさせるためには、まず素材やUnityの設定を整える必要があります。
1. 背景画像を用意する
- 背景には、繋ぎ目が目立たないシームレスなデザインの画像を用意するのがおすすめです。例えば、青空や森などの連続的なパターンが使いやすいです。
- 縦スクロール用なら縦長の画像を用意しましょう。
2. Unityにインポートする
- 用意した背景画像をUnityプロジェクトの「Assets」フォルダにドラッグ&ドロップします。
- インポートされた画像を確認しましょう。
3. 背景を無限スクロールさせる仕組み
無限スクロールを実現するには、背景を順番に並べて動かし、画面外に出た背景を再利用する仕組みを作ります。ここでは、その手順をわかりやすく解説します!
背景の配置
まず、背景画像を縦方向に3枚並べます。この並べ方が無限スクロールの基礎になります。

1. 背景を複製して並べる
- ヒエラルキーウィンドウで背景オブジェクトを選択します。
- Ctrl + D (または Command + D) を押して背景オブジェクトを複製します。
- 背景オブジェクトを縦に3枚並べます。
- 例:
- 背景A: Y座標 19.17
- 背景B: Y座標 0
- 背景C: Y座標 -19.17
- 例:
2. 背景のサイズと位置を調整
- 各背景が画面にピッタリ収まるようにサイズを調整してください。
- 背景同士の繋ぎ目が自然になるよう、少し重ねて配置するのがコツです。
スクロールの仕組み
背景を下方向に動かし、画面外に出た背景を再利用して無限スクロールを実現します。
1. 背景を動かすロジック
背景は一定のスピードで下方向に移動します。そして、背景が画面外に出たら、一番上に戻す処理を行います。
- 背景の動きのイメージ:
- 背景A → 背景B → 背景C → 背景A (繰り返し)
2. 処理のポイント
- 背景の移動はY座標を変更して実現します。
- 背景Cが指定のY座標に達したら、背景Aの位置に戻します。
- 例: Y座標が -19.17 に到達したら、19.17 にリセット。


このステップを理解しておくと、無限スクロールの仕組みが簡単にイメージできるはずです!
4. スクリプトの作成と適用
ここからは、背景を動かすスクリプトを作成し、それをUnityに適用していきます。一つずつ進めていきましょう!
スクリプトの作成
1. 新しいスクリプトを作る
- プロジェクトウィンドウで右クリックして「Create → C# Script」を選びます。
- スクリプト名を「BackGround」とします。
2. スクリプトを編集
- 作成したスクリプトをダブルクリックして開きます。
- 以下のコードをコピーして貼り付けます。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class BackGround : MonoBehaviour
{
// スクロールスピードを設定
[SerializeField] float speed = 1;
void Update()
{
// 背景を下方向に移動
transform.position -= new Vector3(0, Time.deltaTime * speed, 0);
// 背景が一定位置を超えたら上に戻す
if (transform.position.y <= -19.17f)
{
transform.position = new Vector3(0, 19.17f, 0);
}
}
}
3. コードの説明
[SerializeField] float speed
- 背景のスクロール速度を設定します。インスペクターから簡単に変更可能です。
transform.position
- オブジェクトの位置を変更します。
Time.deltaTime
を掛けることで、時間に依存したスムーズな動きが実現します。
- オブジェクトの位置を変更します。
if
文- 背景のY座標が一定値を超えたら、元の位置に戻す処理を行います。
スクリプトの適用
1. スクリプトを背景にアタッチ
- 作成した背景オブジェクトをヒエラルキーで選択します。
- プロジェクトウィンドウから「BackGround」スクリプトをドラッグ&ドロップで背景オブジェクトにアタッチします。
2. インスペクターで設定
- アタッチしたスクリプトのSpeedパラメーターを確認します。
- 初期値は「1」ですが、動きを速くしたい場合は値を上げてください。
動作確認
- 再生ボタンを押してゲームを実行します。
- 背景がスムーズにスクロールすることを確認しましょう。
- 必要に応じて、Speed値や背景の配置を調整します。

これでスクリプトの作成と適用は完了です!次は背景の微調整や追加の工夫について解説していきます。
5. 背景をスクロールさせるための微調整
背景が動くようになったら、ゲーム全体の見栄えやスムーズさを向上させるために微調整を行いましょう。細かい部分までしっかり設定することで、より完成度の高いゲームになります!
1. 背景画像の隙間を防ぐ
背景を並べる際、わずかな隙間ができてしまうことがあります。この隙間を防ぐための方法を紹介します。
方法: 背景を少し重ねる
- 各背景画像を少しだけ重ねて配置します。具体的には、Y座標を数値的に近づけることで隙間を埋められます。
- 例:
- 背景Aの下端が背景Bの上端とピッタリ接するのではなく、少し重なるように配置します。
- 例:
2. 描画順を調整する
背景がキャラクターや他のオブジェクトの上に表示されてしまうと、ゲームが見にくくなります。この場合、描画順を調整しましょう。
方法: Order in Layer の設定
- 背景オブジェクトを選択します。
- インスペクター内の「Sprite Renderer」コンポーネントを探します。
- Order in Layer の値を -1 に設定します。
- 背景が他のオブジェクトの後ろに表示されるようになります。
3. スクロールスピードの調整
背景のスクロールスピードを微調整することで、ゲームに合った動きが作れます。
方法: Speed パラメーターの変更
- スクリプトをアタッチした背景オブジェクトを選択します。
- インスペクター内で Speed パラメーターの値を変更します。
- 速くしたい場合: 値を大きくする(例: 2や3)
- 遅くしたい場合: 値を小さくする(例: 0.5)
4. スムーズな動きを確認する
実際にゲームを動かして、以下のポイントを確認してください。
- 背景がカクつかずにスムーズに動いているか。
- 隙間がなく、繋ぎ目が自然になっているか。
- キャラクターやオブジェクトと背景の描画順が正しいか。
これらの調整を行うことで、背景がより自然でゲームらしい仕上がりになります。微調整は地味な作業ですが、ゲーム全体の完成度を大きく左右する大切な工程です!
まとめ
この記事では、Unityで背景を無限スクロールさせる方法を学びました。準備からスクリプト作成、背景をスムーズに動かすための微調整まで、一通りの流れを解説しましたが、いかがでしたか?
無限スクロールの背景は、ランニングゲームやシューティングゲームをはじめ、さまざまなジャンルのゲームで活用できます。初心者でも簡単に設定できるので、ぜひ挑戦してみてくださいね!
おすすめアセットの紹介
今回学んだ背景スクロールの仕組みは、ゲーム制作の一部です。もし「もっと本格的なゲームを作りたい!」と思ったら、Unity Asset Storeのテンプレートを活用してみるのもおすすめです。
- Corgi Engine – 2D+2.5D Platformer
- 高品質な2D・2.5Dプラットフォーマー制作に最適なテンプレート。背景スクロールの他にも、キャラクター制御やレベル設計が簡単に!
- TopDown Engine
- 見下ろし型ゲームに特化したテンプレート。RPGやアクションゲームにぴったりで、カメラや背景の演出が充実しています。
- 2D Plane Shooting Game Sample
- シューティングゲームをゼロから作る時間がない方におすすめ。無限スクロール背景と相性抜群で、すぐに完成度の高いゲームが作れます。

Unityを使いこなせるようになると、ゲーム制作の幅がぐっと広がります。今回の背景スクロールを活用しながら、自分だけのゲームを作ってみましょう。そして、さらに高品質なテンプレートを使えば、プロレベルの作品も目指せますよ!
ぜひ気になったアセットをチェックしてみてください。楽しいゲーム制作を応援しています!
よくある質問
- Q背景がスムーズにスクロールしません。どうすればいいですか?
- A
スクロールの速さを調整するか、背景画像のサイズや解像度を確認してください。また、コード内の
speed
の値を調整してみてください。
- Q背景が突然切れてしまいます。どうすればいいですか?
- A
背景画像がシームレス(繋ぎ目がわからないデザイン)になっているか確認してください。また、背景オブジェクトの位置やスクリプト内の座標設定が正しいか確認してください。
- Q背景を左右にもスクロールさせたいのですが、どうすればいいですか?
- A
スクリプト内の
transform.position
の変更部分を修正し、new Vector3(Time.deltaTime * speed, 0)
のようにすることで、背景を左右にスクロールさせることができます。