【これならできる】unityの2Dゲームで背景画像を多重スクロールさせる

最近 unity始めてみました。

今は書籍のサンプルゲームにアレンジを加えて遊んでいる段階なので、ちゃんとしたものができるまでにはもうしばらく掛かりそうです。

今回の本題とはそれますが、まずは僕が使っている教科書の紹介です。

Unity4.6/5.0でつくる 2Dゲーム制作入門　[改訂第二版]

 kindle版の電子書籍ですが、お値段５００円、紙の本の約1/5ほどの値段で購入できます。

中身のほうは、ミニゲーム（マウスクリックで敵を消すゲーム）、ボス戦オンリー（？）のシューティングゲーム、動く床や当たると死ぬ罠が配置されたステージをクリアしていくアクションゲーム、の3つのゲームを書籍の手順に従って実際にUnityに触れながら作り上げていくような構成になっています。

スマホ対応についての記述は無いので、全操作タップでどうにかするようなゲームを作るとなると、別途Webで調べるなり別の書籍を漁るなど必要になってくると思いますが、とりあえず何かゲームを作りながらあれこれ覚えていくというスタンスでしたらとてもわかり易い本だと思います。

さらに、ツールの操作も図付きで操作を１つ１つ説明しているため、途中で躓くことも無いと思います。

なお、画像リソースや完成済のUnityプロジェクトもWebからダウンロードできるようになっているため、絵が描けないのでゲーム用の画像用意するところでまず躓いてしまうという心配もなく、また、とりあえず出来上がっているコードをあれこれ触ってみたいという方にもおすすめです。

ちなみに、書籍の作者さまが書かれたチュートリアル（書籍の第一章に相当する内容です）が、Qiitaにも公開されています。

qiita.com

さて本題です。

上で紹介した書籍を見ながら作ったシューティングゲーム、残念ながら背景は固定表示だったので、これをスクロール表示するように直してみました。

背景のスクロールに関しては、ググると幾つかの記事が出てくるのですが、おそらく知ってて当然的な部分が端折られていて、そのままだとうまく動かなかったりしたので、僕がやった手順を記載しておきます。

今回は、雲の上、というシチュエーションを想定して、背景（空）、雲（遠方）、雲（至近距離）の3つの背景を重ねて表示してみます。

まずは、背景用に下記のような画像（３種類）を用意します。

空の画像、雲（手前）の画像、雲（奥側）の画像の３枚をPNGファイルとして作成します。

雲の画像は、雲以外の部分を透過指定したPNGとして保存してください。 

 UnityプロジェクトのAssetsの下に、「Textures｣などのフォルダを作り、作成した３枚の画像を追加します。

なお、以下の説明では、画像の名前を、それぞれ「background」「cloud_back」「cloud_front」としています。

追加したら、Inspectorビューで画像の設定を下図の赤枠内のように変更してください。

プルダウンメニューから「Game Object > 3D Object > Quad」を選び、シーンに Quadオブジェクトを追加します。

追加したQuadオブジェクトの名前を、Backとし、「background」の画像を割り当てます。

同様に、｢Middle」「Front」という名前でQuadオブジェクトを作成し、それぞれ「cloud_back」「cloud_front」の画像を割り当てます。

次に、「Background」という名前でC#スクリプトを作成し、以下のようなコードを記載します。

using UnityEngine;
public class Background : MonoBehaviour
{
    public float speed = 0.1f;

    void Update()
    {
        float x = Mathf.Repeat(Time.time * speed, 1);
        Vector2 offset = new Vector2(x, 0);
        GetComponent().sharedMaterial.SetTextureOffset("_MainTex", offset);
    }
}

「Front」「Middle」「Back」Quadオブジェクトすべてに、上で作成した「Background」C#スクリプトをアタッチします。

「Front」「Middle」「Back」のInspectorを開き、以下のように設定します。

position:z を　それぞれ、0.1, 0.2, 0.3 に設定
scale:x, scale:y を画面内にいい感じに収まるように調整
シェーダの設定を、Unlit/Transparent に設定
Backgroundスクリプト内のspeedの値を 0.1～0.5程度の値に設定
※　Front側を大きな数字に、Back側を小さな数字にします

 設定後のInspectorは下記のような感じになると思います。

この状態で実行すると、手前の雲は速く、後ろ側の雲はゆっくりとスクロールするのが確認できると思います、

Unity記事の続編はこちら

noranuk0.hatenablog.com

今回は以上となります。

 お読みいただきありがとうございました。