サイズ修飾子と制約

基本のサイズ指定に加えて、UIオブジェクトを比例的にスケーリングしたり、自動的にサイズ変更したりするために、サイズ修飾子を活用できます。また、アスペクト比を制御したり、最小および最大サイズまたはテキストサイズを設定したりするために、サイズ制約を挿入することもできます。

スケール

UIScaleオブジェクトは、親のGuiObjectのAbsoluteSizeプロパティに掛け算する数値を保持します。たとえば、オブジェクトを現在の2倍の大きさにしたい場合、UIScaleオブジェクトを挿入し、Scaleプロパティを2に設定します。

この修飾子は、スタジオで詳細なユーザーインターフェイスを設計する際に「ズームイン」するのに便利です。これは、オブジェクトとそのすべての子を比例的にスケーリングし、UIStrokeやUICornerのような適用された表示修飾子を含みます。また、オブジェクトのサイズをトゥイーンするのにも便利で、たとえば、プレイヤーがボタンの上にマウスを乗せたときに、ボタンのサイズを少し大きくすることができます。

自動サイズ変更

AutomaticSizeプロパティは、親のGuiObjectをその子孫のサイズに自動的にリサイズします。このプロパティは、さまざまなケースで使用できます。たとえば：

• 多くの言語でローカライズされたテキストに合わせてGuiObjectを拡張します。
• ユーザーがTextBox内でテキストを入力できるようにし、入力されたテキストの量に基づいて自動的にサイズを調整します。
• フォントタイプやサイズを含むリッチテキストマークアップを使用してテキストオブジェクトのサイズを自動的に調整します。

任意のGuiObjectに対してAutomaticSizeプロパティを有効にできます。デフォルトではNoneに設定されていますが、その値を変更してどの方向にGuiObjectがコンテンツに合わせてリサイズされるかを具体的に制御できます。

自動サイズ変更を有効にするには：

1. エクスプローラーウィンドウで、Frame、TextBox、またはImageLabelなどの任意のGuiObjectをクリックします。

2. プロパティウィンドウで、AutomaticSizeプロパティ（ScrollingFrameの場合はAutomaticCanvasSize）に移動し、次のオプションの1つに設定します：

   • X — コンテンツを水平方向にリサイズします。
   • Y — コンテンツを垂直方向にリサイズします。
   • XY — コンテンツを水平方向および垂直方向の両方にリサイズします。

   

自動サイズ変更が設定されると、他のオブジェクトプロパティは次のように動作します：

オブジェクトをサイズ指定する概念に似ていて、AutomaticSizeは、コンテンツのリサイズ時にAnchorPointプロパティを考慮します。以下のビデオでは、アンカーポイントから自動的にリサイズされる3つのTextLabelsが表示されています。

• 一番上のラベルはAnchorPointの値が(0, 0.5)で、左側の中心に固定されています。
• 真ん中のラベルはAnchorPointの値が(0.5, 0.5)で、中央に固定されています。
• 一番下のラベルはAnchorPointの値が(1, 0.5)で、右側の中央に固定されています。

制約

ユーザーインターフェイスオブジェクトに使用できる制約の種類は3つあります：サイズ、テキストサイズ、およびアスペクト比。制約を使用するには、制約を制約したいGuiObjectの子として設定する必要があります。

サイズ

UISizeConstraintは、GuiObjectの最小および最大サイズを指定します。この制約により、GuiObjectは異なる画面サイズで小さすぎたり大きすぎたりしないようにします。

たとえば、MinSizeプロパティを(200, 200)に設定し、MaxSizeプロパティを(400, 400)に設定すると、GuiObjectは200×200ピクセルより小さくなったり、400×400ピクセルより大きくなることはできません。

テキストサイズ

UITextSizeConstraintは、テキストを持つGuiObject（TextLabel、TextButton、またはTextBoxなど）に対して最小および最大フォントサイズを指定します。この制約により、GuiObject内のテキストが不明瞭になったり大きすぎたりしないようになります。

親のGuiObjectのTextScaledプロパティを有効にすると、テキストサイズはコンテナのサイズに応じてスケールされ、オブジェクトがMinTextSizeおよびMaxTextSize値より小さくなったり大きくなったりしても制約を尊重します。

たとえば、以下のTextLabelオブジェクトは、最小テキストサイズの値が50で最大テキストサイズの値が80のUITextSizeConstraintを持っています。TextLabelが小さくなってもフォントは50ピクセルより小さくならず、オブジェクトが大きくなるとフォントは80ピクセルを超えなくなります。

アスペクト比

UIAspectRatioConstraintは、GuiObjectに対してコアサイズに関係なく幅対高さのアスペクト比を強制します。このサイズが親の割合で設定されていても関係ありません。たとえば、この制約をFrameの子として挿入し、制約のAspectRatioプロパティを2（2:1）に設定すると、フレームの幅は高さの2倍に保たれます。同様に、制約のAspectRatioプロパティを0.5（0.5:1）に設定すると、フレームの幅は高さの半分に保たれます。

この制約のAspectRatioをデフォルトの1（1:1）に設定することは、正方形の画像アセットを持つImageLabelの非比例スケーリング/ストレッチを防ぐ便利な方法です。たとえば、アバターサムネイルなどです。