自動レイアウト機能を利用した UI サイズ可変対応の実装例
最終更新：
orika_ex_miyako 2024年10月22日(火) 20:21:35履歴
Unity の自動レイアウト機能を利用し、UI サイズの可変対応を行う場合の実装例です。
重要な点としては、LayoutGroup コンポーネントの扱いと、制御したいオブジェクトのアンカー位置によって、可変時の伸縮位置が変化します。
＜アンカー調整後＞
動画ファイルへのリンク
設計
UI において RectTransform 内にあるアンカーの設定、そして Pivot の設定は大変重要です。
配置上の問題を解決するだけではなく、可変時の伸縮位置にも影響を与えます。
この概念を理解することで、可変する UI サイズの構成を考えていくことができます。
そのため、これらの初期設定を行うだけではなく、別のコンポーネントも含めてトータル的に詳細な設定を行うことが大切です。
UI のサンプル設計
これらはサンプルです。
実際にはご自分のプロジェクトに応じた内容で制作してください。
＜アンカーの調整＞
可変させたいオブジェクトのアンカーと Pivot の調整を行います。
初期設定の場合、意図していない位置から伸縮が開始されますので、
実際にオブジェクトのサイズを変更しながら、アンカーの調整を行ってください。
また、Pivot の位置が伸縮の起点となります。
下記はサンプルです。
＜参考サイト＞
重要な点としては、LayoutGroup コンポーネントの扱いと、制御したいオブジェクトのアンカー位置によって、可変時の伸縮位置が変化します。
＜アンカー調整後＞
動画ファイルへのリンク
設計 
UI において RectTransform 内にあるアンカーの設定、そして Pivot の設定は大変重要です。
配置上の問題を解決するだけではなく、可変時の伸縮位置にも影響を与えます。
この概念を理解することで、可変する UI サイズの構成を考えていくことができます。
そのため、これらの初期設定を行うだけではなく、別のコンポーネントも含めてトータル的に詳細な設定を行うことが大切です。
UI のサンプル設計
これらはサンプルです。
実際にはご自分のプロジェクトに応じた内容で制作してください。
＜アンカーの調整＞
可変させたいオブジェクトのアンカーと Pivot の調整を行います。
初期設定の場合、意図していない位置から伸縮が開始されますので、
実際にオブジェクトのサイズを変更しながら、アンカーの調整を行ってください。
また、Pivot の位置が伸縮の起点となります。
下記はサンプルです。
＜参考サイト＞
Unity 公式マニュアル
基本的なレイアウト
https://docs.unity3d.com/ja/current/Manual/UIBasic...
Unity 公式マニュアル
アンカー
https://docs.unity3d.com/ja/2017.1/Manual/windowsh...
ハルシオンシステム 様
【ハルシオンブログ】SafeAreaHelperの使い方。SafeArea内でゲームを作ろう！
http://halcyonsystemblog.jp/blog-entry-973.html
コメントをかく