【Unity】モバイルアプリの縦横両対応

はじめに
完成品
方法
おわりに

はじめに

Unity でモバイルアプリを作成するときの画面の縦横両対応の方法についてです。

基本的にゲームアプリは縦か横で画面固定が多いのか両対応の方法が検索にひっかからなかったのでとりあえず動いた方法を記載します。もっといいやり方あれば教えていただけると幸いです。

何も考えずにやってると下記のように横向きにしたときにボタンや文字サイズが小さくなったので試行錯誤してみました。

完成品

完成品はこんな感じです。

ソース（GitHub）

方法

横向きのときに色々小さくなるのは下記のように Canvas Scaler を設定しているのが原因かと思われます。

UI Scale Mode
Scale With Screen Size
Reference Resolution
X: 720, Y: 1280（9 : 16）
Screen Match Mode
Expand

Screen Match Mode とかをいじればいけるのかもしれませんがちょっとわかりませんでした。。。

横向きになったときに Reference Resolution を設定してやればいけるんじゃないかと思いついたのでその方法でやってみました。

方法は簡単。下記のスクリプトを作成して指定の Canvas に設定するだけです。

public class CanvasOrientationHandler : MonoBehaviour
{
    [SerializeField]
    private Canvas _canvas;
    private CanvasScaler _canvasScaler;

    void Start()
    {
        _canvasScaler = _canvas.GetComponent<CanvasScaler>();
    }

    void Update()
    {
        if (Input.deviceOrientation == DeviceOrientation.LandscapeLeft || Input.deviceOrientation == DeviceOrientation.LandscapeRight)
        {
            _canvasScaler.referenceResolution = new Vector2(1280, 720);
        } 
        else
        {
            _canvasScaler.referenceResolution = new Vector2(720, 1280);
        }
    }
}

public class CanvasOrientationHandler : MonoBehaviour

{

[SerializeField]

private Canvas _canvas;

private CanvasScaler _canvasScaler;

void Start()

{

_canvasScaler = _canvas.GetComponent<CanvasScaler>();

}

void Update()

{

if (Input.deviceOrientation == DeviceOrientation.LandscapeLeft || Input.deviceOrientation == DeviceOrientation.LandscapeRight)

{

_canvasScaler.referenceResolution = new Vector2(1280, 720);

}

else

{

_canvasScaler.referenceResolution = new Vector2(720, 1280);

}

おわりに

無事、縦横両画面でいい感じに表示されました。ただ Update で毎回 referenceResolution を設定してやるのがいいのかはわかりません。。。

まだまだ Unity さわり始めたばかりなので下記の本で勉強中。

ステップアップUnity──プロが教える現場の教科書 WEB DB PRESS plus

新品価格
￥2,948から
(2021/5/3 20:11時点)