【Unity】Android用のアプリで解像度を固定する方法

# ○はじめに
スマホは解像度が機種によって解像度が異なるので、それを解決する方法を紹介します。

なお、ほとんど下記の記事を見ていただければわかりますが、URP用のカメラの設定や、自分なりに使いやすい設定をしています。

https://3dunity.org/game-create-lesson/clicker-game/mobile-adjustment/

また、こちらの記事にも記載されていますが、iOSについてはAppStoreの審査が厳しいらしく、別途何かしらの設定がいるっぽいです。そちらは今回紹介しません。

<!-- 前回の記事
前回の記事→[前回の記事]()
-->





# ○実行結果
![mobile_aspect.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/e2d4c8e8-bc4f-5592-d731-a9bce24e7eb1.gif)

こんな感じです。全てのスマホ機種に合わせてサイズ変更できます。






# ○説明
## ●ヒエラルキー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/513a06fe-5893-1a22-8e70-261e36a6093a.png)
こんな感じです。**通常のカメラ、UI表示用のカメラ、画面外の黒い帯部分のカメラを用意しています。**
(通常のカメラとUI表示用カメラは混同してもいいですが、個人的に分別した方が扱いやすいので分けています。)






## ●URP用Camera
### ・MainCamera
URP用のCameraコンポーネントはこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/19375975-d285-1c5e-4e75-f2af4ff72c72.png)

:::note
**Point💡**
- `RenderType`を`Base`にする。
- `CullingMask`で`UI`の`Layer`を除く。
- `Stack`に`UICamera`を追加する。

:::

また、後程紹介するアスペクト比の調整コンポーネントをつけています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/e23b94ea-4c0f-569a-54e8-441b735728fa.png)


### ・UICamera
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/dc6ee012-be55-c3c5-85db-ab50bc7a3ea8.png)

:::note
**Point💡**
- `RenderType`は`Overlay`にする。
- `CullingMask`は`UI`のみにする。
- アスペクト比調整コンポーネントを追加する。

:::

### ・ClearCamera
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/b197bc9a-7b2f-78c2-5257-46c12c64897e.png)

:::note
**Point💡**
- `RenderType`は`Base`にする。
- `Rendering > Piority`を`MainCamera`よりも低く設定する。
- `CullingMask`を`Nothing`にする。
- `Environment > BackgroundType`を`SolidColor`にして、黒色に設定する。
- アスペクト比調整コンポーネントは追加しない。

:::




## ●通常のCamera
インスペクター上での表示が異なりますが、内容はほとんど同じです。

### ・MainCamera
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/abbabac0-6816-a15b-9a49-af71147efe51.png)

※`viewportRect`の値が変なのは、アスペクト比調整コンポーネントが自動でこちらの値を変更しているのが原因です。無視してください。

### ・UICamera
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/a0c1c971-1fbe-81fa-94a1-9f4f2251901f.png)


### ・ClearCamera
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/66b09ddc-b083-63a5-b4ea-d932f1a818d6.png)






## ●Canvas
Canvasの設定は、通常とURP共通です。

### ・Canvasコンポーネント
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/b2b857aa-a6f1-7873-171f-ce5925317007.png)

:::note
**Point💡**
- `RenderMode`を`ScreenSpace - Camera`にする。
- `RenderCamera`にUI用カメラを選択する。

:::


### ・CanvasScalerコンポーネント
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/7eca9f0a-97f8-3c03-ca28-1fa3b8b602cd.png)

:::note
**Point💡**
- `UIScaleMode`を`ScaleWithScreenSize`にする。
- `ReferenceResolution`に目的の解像度を指定する。(`1080×1920`が一般的)
- `ScreenMatchMode`を`Expand`にする。
:::




# ○コード
## ●AspectSetter
`Camera`コンポーネントの`viewPortRect`を操作して、アスペクト比を調整します。
詳細は **[こちらの参考記事](https://3dunity.org/game-create-lesson/clicker-game/mobile-adjustment/#toc5)** をご覧ください。



```.cs
[ExecuteAlways]
[RequireComponent(typeof(Camera))]
public class AspectSetter : MonoBehaviour
{
    Camera _camera;

    [SerializeField] Vector2 targetResolution;      // 目標の解像度
    [SerializeField] bool isUpdate;                 // 毎フレーム画面をそろえるか

    private void Awake()
    {
        _camera = GetComponent<Camera>();
        SetAspect();   
    }

    private void Update()
    {
        if (isUpdate) {
            SetAspect();
        }
    }

    void SetAspect()
    {
        var scrnAspect = (float)Screen.width / (float)Screen.height;        // 現在のアスペクト比
        var targAspect = targetResolution.x / targetResolution.y;           // 目標のアスペクト比

        var rate = targAspect / scrnAspect;     // 現在と目標との比率
        var rect = new Rect(0, 0, 1, 1);

        // 倍率が小さい場合、横をそろえる
        if (rate < 1) {
            rect.width = rate;
            rect.x = 0.5f - rect.width * 0.5f;
        }

        // 縦をそろえる
        else {
            rect.height = 1 / rate;
            rect.y = 0.5f - rect.height * 0.5f;
        }

        // 反映
        _camera.rect = rect;
    }
}

```




# ○さいごに
ほぼほぼ参考記事と同じような内容になっちゃいましたが、**次回は固定解像度ではなく、各機種の解像度に合わせたゲーム画面の作成を紹介したいと思います。**




<!-- 次回の記事
次回の記事→[次回の記事]()
-->

## ●参考サイト
https://3dunity.org/game-create-lesson/clicker-game/mobile-adjustment/


<!---------------------->

<!-- テンプレ
# ○見出し1
## ●見出し2
### ・見出し3

-->