カメラの表示範囲を調整して複数解像度に対応-ViewportRect-【Unityメモ】

Unityゲーム作成で、解像度に合わせてカメラの表示範囲を調整するメモです。

スマートフォンやタブレットには多くの解像度があり、出来るだけ色々な解像度でいい感じに表示させたいですよね。

はじめに

「Unity 2020.3.26f1」ヴァージョンで作成、2Dゲームを例としています。

今回はスクリプトでカメラの表示範囲を調整するメモみたいなものです。

まずはCanvasを追加。レンダーモードをカメラにして、参照解像度を1600×900(16:9)にしておきます。これが今回のベースとなる解像度です。

適当に背景を作成。

Canvas配下にボタンを追加し、左下に来るように配置します。

この状態でゲーム画面を動かしてアスペクト比を変えると下記の様に変な位置にボタンがくる事も。

今回はこれを調整していきます。

調整開始

インスペクター画面で変更して表示を確認してから、スクリプトで実装してみます。

インスペクターで変更

カメラの「ビューポート矩形(ViewportRect)」の数値を変更すると、カメラの表示範囲を調整できます。

XとYは座標、Hは高さ、Wは横幅を表しています。

横がはみ出しているので、Wの値を小さくして下記の様にします。

良さそうに見えますが、ゲーム画面では表示をしない0.2が右余白となります。

余白を左右均等にして真ん中にゲーム画面を表示するため、半分をX座標に入力します。

すると、左右の余白が均等になり、中央にゲーム画面が表示されます。

縦の場合も同様に、ビューポート矩形のHとYの値を調整して中央に表示できます。

このように、カメラの表示範囲を調整することで、常に自分の作成した解像度(今回は16:9)で表示することが出来ます。

スクリプトで実装

上記の動きを参考に、どの解像度でも「中央にゲーム画面を表示」するのをスクリプトで実装してみます。

下記スクリプトを作成してカメラにアタッチ。

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

public class AdjustCamera : MonoBehaviour
{
    [SerializeField] private Camera _Camera;
    [SerializeField] private Vector2 _aspectVec2;

    void Start()
    {

        float baseAspect = _aspectVec2.x / _aspectVec2.y;
        float screenAspect = (float)Screen.width / (float)Screen.height;
        float Scale = baseAspect / screenAspect;

        if (Scale < 1)
            _Camera.rect = new Rect((1 - Scale) / 2, 0.0f, Scale, 1.0f);
        else
        {
            Scale = 1 / Scale;
            _Camera.rect = new Rect(0.0f, (1 - Scale) / 2, 1.0f, Scale);
        }
    }
}

変数を下記の様にセットすると、どの解像度でも16:9で画面中央に表示されます。

簡単な説明

表示したい解像度の縦横比率(baseAspect)、実際の画面の解像度の縦横比率(screenAspect)を比較。

実際の縦横比率が表示したい比率より大きい時(Scale<1)は横長なのでXとWを調整。逆の場合は縦長なのでYとHを調整します。

具体的に

実際の画面が800×400の場合で考えてみます。

16:9の縦横比率は1.777…、8:4は2。実際の縦横比が大きいので横長です。

縦横比の倍率(1.77777…/2)は0.8888…となります。この数値をWに入力(分かりやすく0.9としています)

1から0.9を引いた0.1が右側の余白なので、これを1/2にした値(0.05)をXに入力すると真ん中に表示されます。

タイトルとURLをコピーしました