複数の解像度のための UI 設計
World Space UI の作成

コンテンツのサイズに合わせた UI 要素を作る

通常、Rect トランスフォームでの UI 要素を配置する際、その位置と大きさは手動で指定します(これには必要に応じて親 Rect トランスフォームが大きさを変更してしまう動作も含まれます)。

しかし、時には UI 要素の内容に合わせて自動的に矩形をリサイズしたい場合があります。これは ContentSizeFitter と呼ばれるコンポーネントを追加することで行うことができます。

テキストのサイズに合わせる

テキストの内容に合わせて Text コンポーネントの Rect Transform をフィットさせるには、Text コンポーネントを持つ同じゲームオブジェクトに ContentSizeFitter コンポーネントを追加します。その後、水平フィット、垂直フィットの両方を優先設定してください。

どのような仕組みで動くのか

これで何が起こるかというと、テキストの大きさを決定する最小値と推奨サイズの情報を持つ Layout Element のような機能を Text コンポーネントが持つことになります。手動でレイアウトを決めた場合はこの情報は使用されません。ContentSizeFitter は、Layout Element によって提供されるレイアウト情報を取得するため、さらに RectTransform にしたがってサイズを制御するためのレイアウトコントローラーの 1 種です。

ピボットを忘れない

UI 要素が自動的に自分のコンテンツに合わせてサイズ変更された場合、あなたは Rect のピボット変換に特別な注意を払う必要があります。要素のサイズが変更されるとき、ピボットは場所にとどまっているので、ピボット位置を設定して要素が拡大または縮小するかを制御することができます。例えば、ピボット中心にある場合、要素はその後、すべての方向に均等に拡大し、ピボットが左上隅にある場合、要素は右下に展開されます。

子テキストを持つ UI 要素のサイズに合わせる

それの上に Text 要素で背景画像と子ゲームオブジェクトを持つボタンのような UI 要素を持っている場合、おそらく、いくらかの padding で全 UI 要素がテキストのサイズに合うことが望ましいでしょう。

これを行うために、最初に UI 要素に水平レイアウトグループを追加した後、Content Size Fitter にも追加します。水平フィット、垂直フィット両方を優先設定します。さらに、padding プロパティーを使用して、水平レイアウトグループの padding を調整することができます。

なぜ水平レイアウトグループを使うのでしょうか?それは同様に垂直レイアウト Group でもありたいので単独の子だけがあるなら、これらは同じ結果になります。

どのような仕組みで動くのか

水平(または垂直)レイアウトグループは、レイアウトコントローラーとしてかつレイアウト要素として、両方機能しています。最初に、それはグループ内の子らが提供するレイアウト情報を子のテキストとして聞きます。それから、グループはすべての子を含むために少なくともどれくらい大きくなければならないかについて決定し、最小限のサイズと推奨サイズに関するこの情報を提供するレイアウト要素として機能します。

Content Size Fitter は同じゲームオブジェクト上の任意のレイアウト要素(この場合は水平または垂直レイアウトグループ)から提供されるレイアウト情報を聞きます。その設定に応じて、この情報に基づき、Rect トランスフォームの大きさを制御します。

いったん Rect トランスフォームのサイズが設定されると、水平(または垂直)レイアウトグループはその子らの使用可能なスペースに応じて位置とサイズを確認します。その子ら位置とサイズを制御する方法の詳細については、水平レイアウトグループについてのページを参照してください。

レイアウトグループの子らそれぞれのサイズに合わせて作る

あなたは(水平または垂直)レイアウトグループがあり、それぞれの内容に合わせて、グループ内の UI 要素を望む場合、あなたは何をしますか?

Content Size Fitter を各々の子に付けることができません。理由は Content Size Fitter がそれ自身の Rect トランスフォームの制御を望んでいますが、親のレイアウトグループも子の Rect トランスフォームの制御を望んでいます。これでは対立を引き起こし、結果は未定義の動作をしてしまいます。

しかし、それはどちらかは不要です。親のレイアウトグループはすでにそれぞれの子をコンテンツのサイズに合わせて作ることができます。あなたがする必要のあることは、レイアウトグループの子の Force Expand toggles を無効にすることです。子らがあまりにも自分自身にレイアウトグループをしている場合、あなたはそれらの Child Force Expand toggles も無効にする必要があります。

子らが柔軟に幅を拡大しないならば、彼らのアライメントは Child Alignment setting を使用してレイアウトグループで設定することができます。

仮に、追加の利用可能なスペースを埋めるために子を展開したいけれど、いない場合はどうしたらよいでしょうか?展開したい子に Layout Element コンポーネントを追加し、それらの Layout Element の Flexible Width か Flexible Height プロパティーを有効にすることで、簡単に管理することができます。

どのような仕組みで動くのか

ゲームオブジェクトは、最小、推奨、柔軟なサイズのレイアウト情報を提供する複数コンポーネントを持つことができます。優先システムは、他のものより有効になる値を決定します。レイアウト要素コンポーネントはテキスト、イメージおよびレイアウトグループコンポーネントよりも高い優先度を持っているので、それらが提供する任意のレイアウト情報の値を上書きするために使用することができます。

レイアウトグループが子によって提供されるレイアウト情報を察知すると、上書きされた flexible size を考慮にいれた大きさを取ります。その後、子の大きさをコントロールする時にはそれらの preferred size より大きくはなりません。しかし、レイアウトグループの Child Force Expand オプションが有効であれば、子の flexible size は最低でも常に 1 に設定されます。

さらに詳しく

このページではいくつかの一般的な使用例を提示しました。より深い自動レイアウトシステムに関する説明については 自動レイアウト ページを参照してください。

複数の解像度のための UI 設計
World Space UI の作成