スクロールする背景の作り方

前回までの作業でゲームの流れを完成させることができたので、とりあえず最低限ゲームとして成り立つようになりました。ただしまだゲームとしては寂しい部分があるので、ここからもう少し手を加えてブラッシュアップしていきます。

作業したい部分はいくつかあるのですが、とりあえず背景に何もないというのも味気ないので、まずはスクロールする背景を追加してみましょう。

スポンサーリンク

背景画像のスクロール方法の選定

では、はじめに「どうやって背景画像をスクロールさせるか?」ということから考えます。実は画像をスクロールさせるやり方は何通りかあって、例えば

  1. 画像をテクスチャとしてインポートして、そのマテリアルをUVスクロールさせる
  2. シェーダーを使ってスクロールさせる
  3. スプライトを並べて、トランスフォームの座標を変化させてスクロールしているように見せる

といった方法があります。

それで1番目はどちらかというと3Dゲーム向けですし、2番目はシェーダーを使うので敷居が高いです。そこで今回は3番目の方法を採用してみましょう。

座標変更によるスクロールについて

ただ、まあ上の説明だけだと「何のことやら…」という感じだと思うので、今回採用するスクロール方法についてもう少し詳しく説明します。まずは下のGIFをご覧ください。

座標変更によるスクロールの例

(クリックで再生)

これはどうなっているのかというと、

  1. 2枚のスプライト画像を横に並べる。
  2. スプライトを左に移動させる。
  3. 一方がカメラから完全に出た瞬間にそのスプライトを右端にワープさせる。

という処理を行っています。こうすることで無限にスクロールする背景を表現できるというわけです。

背景画像のゲームオブジェクトの作成

では、理屈が分かったところで実際に背景を作っていきましょう。

背景用のスプライト画像は、最初にインポートしてもらった画像の中の「bg1」と「bg2」です。シーンにそれぞれのゲームオブジェクトを作り、次のように設定してください。

  • 共通:「ソートレイヤー」を「Background」に変更、スケールを(2.7, 3, 1)に変更
  • bg1のみ:「レイヤーの順序」を「1」に変更

できたらそれぞれプレハブ化して、右側にもう1枚同じ背景のオブジェクトを配置しましょう。

スクロールする背景のC#スクリプト

そうしたら、スクロールする背景のC#スクリプトを書いていきます。新しいC#スクリプトを作り、名前を「Background」に変更して次のスクリプトを書いてください。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Background : MonoBehaviour
{

    [SerializeField]
    float scrollSpeed = -1;

    Vector3 cameraRectMin;

    void Start()
    {
        //カメラの範囲を取得
        cameraRectMin = Camera.main.ViewportToWorldPoint(new Vector3(0, 0, Camera.main.transform.position.z));
    }

    void Update()
    {
        Move();
    }

    void Move()
    {
        transform.Translate(Vector3.right * scrollSpeed * Time.deltaTime);   //X軸方向にスクロール

        //カメラの左端から完全に出たら、右端に瞬間移動
        if(transform.position.x < (cameraRectMin.x - Camera.main.transform.position.x) * 2)
        {
            transform.position = new Vector2((Camera.main.transform.position.x - cameraRectMin.x) * 2, transform.position.y);
        }
    }

}

書けたらこれを各背景オブジェクトのプレハブにアタッチして、「Scroll Speed」を適当に変更してください。

ゲームを実行して、背景画像がスクロールするようになったら成功です。


次のページ→得点アイテム(コイン)の作り方