ぺんたんがゲーム開発やアプリ開発、最近の気になる話題、特にスマホやIT関連について語る場所

ぺんごや

Unity Unity2D Unity初心者 Unity基礎 Unity豆知識

【Unity】画面アスペクト比を固定しつつも、縦は画面の高さに合わせる【2D向け】

更新日:

Unityで画面アスペクト比を固定する方法は割と紹介されていますが、基本はアスペクト比を固定しつつも縦側の解像度は画面の高さに合わせる方法が見つからなかったのでやってみました。

やりたいこと

動画のように基本はアスペクト比16:9で画面が横に広いときはそのまま固定。逆に縦に長いときは画面の長さにアスペクト比を追従させるようにしたい。

 

最近は18:9などの縦に長いスマートフォンも多く発売されており、単純なアスペクト比の固定ではせっかくの大画面なのに画面の上下に常に黒帯が表示されてしまいもったいないです。
あと個人的に黒帯が表示されるのはちょっとカッコ悪いと思い!

あと何より、従来の手法でアスペクト比を固定し実機にて動かしたところ、画面表示がおかしくなったからというのが大きな理由…

画面の上下におかしな表示がでちゃう…
※Galaxy S9+で実行

 

スポンサードサーチ

対応方法

対応方法はとてもシンプルで、固定したアスペクト比(今回は16:9)よりも縦が長い画面の場合、その比率を計算し、カメラのSize(サイズ)をその比率の分だけ増やしてあげればよいだけです。

例えば16:9と18:9では、その画面の比率は 18:9/16:9 =約1.125 となり、カメラのサイズを1.125倍してあげればいい感じになるというわけです。

それを踏まえてスクリプト。

public class StableAspect : MonoBehaviour{
private Camera cam;

// 固定したい表示サイズ
private float width = 1080f;
private float height = 1920f;

// 画像のPixel Per Unit
private float pixelPerUnit = 200f;

//カメラのSize設定が height / 2 / picelParUnit である必要がある
//picelParUnitが 200 で height が 1920 なら カメラのサイズは 4.8になる。

void Awake() {
    float aspect = (float)Screen.height / (float)Screen.width; //表示画面のアスペクト比
    float bgAcpect = height / width; //理想とするアスペクト比

    // カメラコンポーネントを取得します
    cam = GetComponent<Camera>();

    // カメラのorthographicSizeを設定
    cam.orthographicSize = (height / 2f / pixelPerUnit);

    if (bgAcpect > aspect) {
        //画面が横に広いとき
        // 倍率
        float bgScale = height / Screen.height;
        // viewport rectの幅
        float camWidth = width / (Screen.width * bgScale);
        // viewportRectを設定
        cam.rect = new Rect((1f – camWidth) / 2f, 0f, camWidth, 1f);

    } else {
        //画面が縦に長い
        //想定しているアスペクト比とどれだけ差があるかを出す
        float bgScale = aspect / bgAcpect;

        // カメラのorthographicSizeを縦の長さに合わせて設定しなおす
        cam.orthographicSize *= bgScale;

      // viewportRectを設定
      cam.rect = new Rect(0f, 0f, 1f, 1f);
    }
}

 

画面が横に長いときは従来の方法。Google先生に聞けばいくらか方法が出てきます。
画面が縦に長いときは固定したいアスペクト比と実際の画面のアスペクト比の比率を計算し、カメラのorthographicSizeを計算結果をもとに設定しなおしています。

ViewPortはカメラの範囲内すべてを表示すればいいので、Rect(0f, 0f, 1f, 1f) としています。

注意点としてはカメラのSize(size)を固定したいサイズのheightをpixelPerUnit で割り、さらに半分の値にしたものに設定しておく必要があります。
そうしておかないと画面の表示領域がおかしくなります。

理由としては、カメラサイズが5でpixelPerUnit が100だとすると、カメラサイズ 5 * pixelPerUnit 100 *2 = 1000pxがカメラの表示サイズとなるのに、固定したいサイズが1920pxというのは気持ちが悪いですからね。
※アスペクト比の固定をしないのであれば、上記の状態でもunityがいい感じに表示サイズを合わせてくれるので問題ないです。

このスクリプトをカメラにアタッチすれば横に広いときはアスペクト比を固定しつつ、縦に長いときのみ画面サイズに合わせて変動するようになります。

 

理屈が分かれば難しいことないですね!

-Unity, Unity2D, Unity初心者, Unity基礎, Unity豆知識

Copyright© ぺんごや , 2019 All Rights Reserved Powered by STINGER.