複数の解像度に対応する(引き伸ばす)

確認済のバージョン: 5.5

-

難易度: 初級

使用するプロジェクト

この回はゲーム制作編第12回終了時点のプロジェクトを使用します。もし第12回終了時点のプロジェクトが手元にない場合はイントロダクション - このチュートリアルを始める前にのプロジェクトをダウンロードしてデモとして用意されている _Completed-Assetsフォルダのアセットを使用してください。

プロジェクトファイルをダウンロード

2.1 ゲームビューの画面サイズ変更

まずFile → Project Settings...PlatformをAndroidまたはiOSに変更しましょう。今回はAndroidへ変更を行います。

次にゲームビューの画面サイズを16:10 Landscape (16:10)にしましょう。


図2.1のように青色の背景が見えていたら正常です。

カメラの見える範囲が広くなった状態
図2.1: カメラの見える範囲が広くなった状態

2.2 BackgroundとDestroyAreaの変更

今回は、画面サイズの変更によるBackgroundsとDestroyAreaの修正を「引き伸ばす」事によって対応します。

Backgroundのスケール変更

Front, Middle, Backそれぞれのスケール
図2.2: Front, Middle, Backそれぞれのスケール

Background.csにコードを追加して、スケールを画面サイズに合わせるように変更します。

Background.cs

Code snippet

using UnityEngine;

public class Background : MonoBehaviour
{
    // スクロールするスピード
    public float speed = 0.1f;

    void Start ()
    {
        // 画面右上のワールド座標をビューポートから取得
        Vector2 max = Camera.main.ViewportToWorldPoint (new Vector2 (1, 1));

        // スケールを求める。
        Vector2 scale = max * 2;

        // スケールを変更。
        transform.localScale = scale;
    }

    void Update ()
    {
        // 時間によってYの値が0から1に変化していく。1になったら0に戻り、繰り返す。
        float y = Mathf.Repeat (Time.time * speed, 1);

        // Yの値がずれていくオフセットを作成
        Vector2 offset = new Vector2 (0, y);

        // マテリアルにオフセットを設定する
        renderer.sharedMaterial.SetTextureOffset ("_MainTex", offset);
    }
}

ゲームを再生してみましょう。ゲーム再生直後に背景が画面いっぱいに広がるはずです。

DestroyAreaのスケール変更

変更前のDestroyArea
図2.3: 変更前のDestroyArea

DestroyAreaもBackgroundと同じようにスケールを変更していきます。

DestroyArea.cs

Code snippet

using UnityEngine;

public class DestroyArea : MonoBehaviour
{
    void Start ()
    {
        // 画面右上のワールド座標をビューポートから取得
        Vector2 max = Camera.main.ViewportToWorldPoint (new Vector2 (1, 1));

        // サイズを求める
        Vector2 size = max * 2;

        // BoxCollider2Dのサイズを変更
        GetComponent<BoxCollider2D> ().size = size;

    }

    void OnTriggerExit2D (Collider2D c)
    {
        Destroy (c.gameObject);
    }
}

第02回終わり

今回はここで終了です。つまずいてしまった方はプロジェクトファイルをダウンロードして新たな気持ちで次の回へ進みましょう。

今回のプロジェクトファイルをダウンロード