【Unity】レイアウトをレスポンシブ対応させてアスペクト比解像度を変更してもUIが崩れないようにする方法

Unityのレイアウトを、どの端末でもどのアスペクト比や解像度に変更してもUIが崩れないように、レスポンシブ対応させる方法についてです。

# 完成イメージ
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/eIWYx8svOY">pic.twitter.com/eIWYx8svOY</a></p>&mdash; tak001 (@5HdM6WlLVaazBV7) <a href="https://twitter.com/5HdM6WlLVaazBV7/status/1489547785846534151?ref_src=twsrc%5Etfw">February 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 環境
- PC: MacBook Pro (Intel Core 2016)
- OS: macOS Montery12.0.1
- Unity Hub 3.0.1
- Unity 2020.3.25f1

# 1. Canvasの設定
まず最初にCanvasの設定を行います。

Hierarchy から Canvas を選択して Inspector を確認します。

`Canvas Scaler` component の設定を以下のようにします。

```
UI Scale Mode > Scale With Screen Size
Reference Resolution > 想定している解像度（今回は800 × 600）
Screen Match Mode > Expand
```

![Screen Shot 2022-02-04 at 18.45.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/f9bc1977-8b50-8e70-f087-2e6499103f69.png)


CanvasScaler コンポーネントは Canvas 内の UI 要素の全体的なスケールとピクセル密度を制御するために使用されます。このスケーリングはフォントのサイズと画像のボーダーを含め、Canvas のすべてに影響を与えます。

各項目についての詳細は公式ドキュメントをご確認下さい。

https://docs.unity3d.com/ja/2018.4/Manual/script-CanvasScaler.html

# 2. 要素の作成
今回は以下のような物凄くシンプルなUIにいたします。

![Screen Shot 2022-02-04 at 18.57.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/4e25bd3f-0e4b-7929-63c0-bb4d234e6634.png)

Hierarchyは以下の構成です。

![Screen Shot 2022-02-04 at 19.23.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/54cc4917-773b-f0e9-4a07-98a734f2fd5a.png)

# 3. 要素の設定
それぞの要素を設定していきます。

## 3-1. Panel要素の設定
最初は `Panel` 要素からです。

このPanelは、`左寄せで親要素(Canvas)に対して上下ピッタリ` です。

Panel の Inspector > Rect Transform > Anchor Presets をクリックします。

![Screen Shot 2022-02-04 at 19.04.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/6f7a01ab-9fcb-fc67-bd68-fcf1a4a001a5.png)

左下にある、「stretch / left」を選択します。

![Screen Shot 2022-02-04 at 19.08.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/e32e2467-796b-35a1-4f83-986b59ef7d24.png)

アンカーとは、 `オブジェクトの持つ座標(x, y, z)に対しての基準点` となります。

つまり、**アンカー = 座標の基準点** です。

アンカー(基準点)は、以下のようなマークのことです。

![Screen Shot 2022-02-04 at 19.14.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/9df8974f-e1de-2464-d4b6-523b7042209d.png)

そして、Panelに設定した**ストレッチ**は、親Objectの端から配置するObjectの距離を `Top:0, Bottom: 0` のように設定することができます。

個人的には、**cssのpositionプロパティ** の感覚に近かったです。

これらの仕組みについては以下の記事が大変わかりやすかったです。

https://hirokuma.blog/?p=664

今回 `親要素(Canvas)に対して上下ピッタリ` にしたいので、**Top: 0, Bottom: 0** にします。

![Screen Shot 2022-02-04 at 19.21.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/31fdfe45-2a0f-58c4-7837-140821b65161.png)

## 3-2. スクロールビューの設定
続いては、スクロールビューオブジェクトに対して設定を行います。

こちらは、親要素に対して`ど真ん中に配置`させます。

Scroll View の Inspector > Rect Transform > Anchor Presets をクリックします。

真ん中にある、「middle / center」を選択します。

![Screen Shot 2022-02-04 at 19.27.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/4b26cd54-5c40-aabb-a362-b24c2abd3c61.png)

Positionは、全て0です。

![Screen Shot 2022-02-04 at 19.28.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/37562966-e119-3191-b241-df888cc6f9d4.png)

これでレスポンシブ対応が完了しました。

## 動作確認
では、動作確認を行なってみます。

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/eIWYx8svOY">pic.twitter.com/eIWYx8svOY</a></p>&mdash; tak001 (@5HdM6WlLVaazBV7) <a href="https://twitter.com/5HdM6WlLVaazBV7/status/1489547785846534151?ref_src=twsrc%5Etfw">February 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

端末が縦向きでも横向きでも、**どの状態でも関係なく配置したいと思った位置にUIが配置されています。**

今回とても簡易的でしたが、これで `レスポンシブ対応` が完了しました。

# まとめ
- Canvasの設定を行う
- 要素の設定を行う
- アンカーとは、座標(x, y, z)に対しての基準点

以上となります。
お読み頂き誠に有難うございました。