Unityで横スクロールシューティングを作る【その１:スクロールする背景を作る】

##はじめに
地形要素のない「グラディウス」のような、横スクロールシューティングを作っていく記事の1回目です。
今回はスクロールする背景を作ります。
##完成図
![backgroundAnim.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500361/f9978422-e414-9a72-6c24-f60032af5a29.gif)

##下準備
###新規プロジェクト作成
任意の名称の2Dプロジェクトを作成してください。
詳しくは割愛します。
###解像度の設定
Gameビューの上部のバーで設定します。
![blog01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500361/6b69b721-8e98-b473-af54-ad73ab3d2fb8.jpeg)
ここでは、1920 * 1080で設定します。
選択肢がない場合は、「＋」ボタンから手動入力します。
###Sceneの名前変更
デフォルトの「SampleScene」の名称を「Main」に変更します。
Projectビューのほうでしか変更できないので注意してください。
「SampleScene」を選択して、F2を押すと変更できます。
###画像の用意
横幅、高さが解像度と同じサイズの、シームレスな画像を横に2枚つなげたものを用意します。（下のリンクからご自由にお使いください）
![background_sea.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500361/89a3c134-275a-2455-9da5-b1724e4900c3.jpeg)

[画像のダウンロード](http://nishi835.sub.jp/Image/background_sea.jpg)
Assetsフォルダ以下に、「Textures」フォルダを作り、用意した画像（ここではbackground_sea.jpg）を入れます。
（Projectビュー上部のメニューバーの「Create」のプルダウンメニューからFolderを選択し、名前を付けます）

![blog02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500361/75ae5a64-606c-1b18-52f2-5de5cb792c0b.jpeg)

background_sea.jpgを選択し、InspectorビューからPixel Per Unitを「108」に変更し、右下のapplyボタンを押します。
##スクロールする背景を作る
###配置
background_sea.jpgをHierarchyにドラッグアンドドロップします。
InspectorのTransformのpositionの値がすべて0になっていることを確認します。


Sceneビューを開き、背景画像がゲーム画面の真ん中に表示されていることを確認してください。
![blog03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500361/cfcd7695-ffed-c3d5-627e-f8a9882f23e7.jpeg)


次に、Sprite RendererコンポーネントのOrder in Layerの値を0から-1に変更します。
###スクリプトの作成
Hierarchy上のbackground_seaを選択し、Inspectorビュー下部のAdd ComponentボタンからNew Scriptを選んでスクリプトを追加します。名前は「Background」とします。

Assetsフォルダ直下に、「Scripts」フォルダを作り、作成したBackgroundをドラッグアンドドロップして入れます。

Backgroundスクリプトをダブルクリックし、テキストエディタで開きます。
テキストエディタは「Visual Studio Code」がオススメです。

[詳しくはこちら→UnityでVisual Studio Codeを使用できるようにするまでの手順](https://qiita.com/riekure/items/c45868f37a187f8e1d69)

スクリプトを開いたら、コピーアンドペーストするなどして、以下の通りスクリプトを書き換えてください。

``` C#:Background.cs
using UnityEngine;

public class Background : MonoBehaviour
{
    [SerializeField] private float speed;

    void Update(){
        transform.position -= new Vector3(Time.deltaTime * speed, 0);
        if(transform.position.x <= -8.9f){
            transform.position = new Vector3(8.9f, 0);
        }
    }
}
```

Unityに戻り、Hierarchyのbackground_seaを選択、アタッチされたBackgroundスクリプトのコンポーネント（Inspectorビューの、横線で区切られたひと塊の項目のこと）の「speed」の項目の値を、0から3に書き換えます。

最後に、再生ボタンを押して、完成図のようにシームレスに背景がスクロールすれば完成です。

##スクリプトの解説
#### [SerializeField]
Inspector上に、変数の項目（ここでは「speed」）を表示するための一種のおまじないです。正確な意味はご自分で調べてみてください。
変数の保護レベルがpublicの場合は、この記述は不要です。
####float speed
スクロールのスピードをコントロールするための変数です。Inspector上で任意の値に変更して、スクロールの速度を変えてみてください。
####transform.position
このスクリプトがアタッチされたGameObjectの、位置情報を格納する変数です。x,y,zの値が入っています。
####new Vector3(x, y(, z))
C#では、transform.position.x -= 0.1fのような記述ができないため、x, y, zをVector3クラスでまとめて扱う必要があります（zは記述を省略できます）。
ここでは、xの値を引き算することで、背景画像を左に動かします。縦の動きはないため、yは0にします。
####Time.deltatime
直前1フレームに掛かった時間が格納されています（約1/60秒）。単純に固定値を引き算するより、ムラのない動きになります（理由は調べてみてください）。
####if文
この条件文は要するに、「background_seaのx座標の真ん中が、画面左端(-8.9, 0)に来たら、background_seaの真ん中を画面右端(8.9, 0)に移動させる」という意味です。

よく意味が分からない場合は、再生後Sceneビューに切り替えて、背景画像全体の動きを見てみると意味がわかると思います。
![backgroundAnim02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500361/ca5bf2b0-bb58-2231-393c-82167b543a9a.gif)


-8.9という値は、Unityにおける1ユニット（transform.positionにおける1）が、画面の縦幅の10分の1であるため、解像度が1920 * 1080の場合、縦のユニット数10に対して、1920 / 1080 * 10 ≒ 17.8ユニット。画面の真ん中が(0, 0)なので 左端の横のユニット数（＝x座標）は約-8.9となります。