Unityのレイアウトを、どの端末でもどのアスペクト比や解像度に変更してもUIが崩れないように、レスポンシブ対応させる方法についてです。
完成イメージ
— tak001 (@5HdM6WlLVaazBV7) February 4, 2022
環境
- 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
CanvasScaler コンポーネントは Canvas 内の UI 要素の全体的なスケールとピクセル密度を制御するために使用されます。このスケーリングはフォントのサイズと画像のボーダーを含め、Canvas のすべてに影響を与えます。
各項目についての詳細は公式ドキュメントをご確認下さい。
2. 要素の作成
今回は以下のような物凄くシンプルなUIにいたします。
Hierarchyは以下の構成です。
3. 要素の設定
それぞの要素を設定していきます。
3-1. Panel要素の設定
最初は Panel 要素からです。
このPanelは、左寄せで親要素(Canvas)に対して上下ピッタリ です。
Panel の Inspector > Rect Transform > Anchor Presets をクリックします。
左下にある、「stretch / left」を選択します。
アンカーとは、 オブジェクトの持つ座標(x, y, z)に対しての基準点 となります。
つまり、アンカー = 座標の基準点 です。
アンカー(基準点)は、以下のようなマークのことです。
そして、Panelに設定したストレッチは、親Objectの端から配置するObjectの距離を Top:0, Bottom: 0 のように設定することができます。
個人的には、cssのpositionプロパティ の感覚に近かったです。
これらの仕組みについては以下の記事が大変わかりやすかったです。
今回 親要素(Canvas)に対して上下ピッタリ にしたいので、Top: 0, Bottom: 0 にします。
3-2. スクロールビューの設定
続いては、スクロールビューオブジェクトに対して設定を行います。
こちらは、親要素に対してど真ん中に配置させます。
Scroll View の Inspector > Rect Transform > Anchor Presets をクリックします。
真ん中にある、「middle / center」を選択します。
Positionは、全て0です。
これでレスポンシブ対応が完了しました。
動作確認
では、動作確認を行なってみます。
— tak001 (@5HdM6WlLVaazBV7) February 4, 2022
端末が縦向きでも横向きでも、どの状態でも関係なく配置したいと思った位置にUIが配置されています。
今回とても簡易的でしたが、これで レスポンシブ対応 が完了しました。
まとめ
- Canvasの設定を行う
- 要素の設定を行う
- アンカーとは、座標(x, y, z)に対しての基準点
以上となります。
お読み頂き誠に有難うございました。