Unity RectTransform のプロパティとそれが変化する理由

Unity UI では RectTransform を用いて位置、大きさを指定します。

Unity RectTransform の Inspector ウィンドウで表示される項目が異なる理由

上図のように Inspector ウィンドウで RectTransform の情報を表示すると、同じコンポーネントにも関わらず、表示が異なる場合があります。

今回は、なぜその表示項目が変わるのかについて、アンカーの説明とあわせて紹介します。

RectTransform の Inspector ウィンドウでの表示の違い
1. アンカーとは？
2. パディングの設定
表示の違いはアンカーの幅の有無で決まる
まとめ
参照サイト Thank You!

RectTransform の Inspector ウィンドウでの表示の違い

RectTransform を Inspector で表示する際は、下図のように 2 パターンに分かれます。

Unity RectTransform の Inspector ウィンドウでの表示パターン1 — Unity RectTransform の Inspector ウィンドウでの表示パターンは 2 つあります。

Unity RectTransform の Inspector ウィンドウでの表示パターン2 — Unity RectTransform の Inspector ウィンドウでの表示パターンは 2 つあります。

以下は、RectTransform の異なる項目です。

PosX, PosY, PosZ	アンカーに相対的な矩形のピボットポイントの位置。ピボットポイントを中心に矩形が回転します。
Width, Height	矩形の幅と高さ

RectTransform の Inspector ウィンドウで切り替わって表示される項目名と「Rect Transform – Unity マニュアル」の説明文

Left, Top, Right, Bottom

アンカーに相対的な矩形のエッジの位置。これはアンカーによって定義された矩形の内側のパディングと考えることができます。アンカーが離れている場合、Pos と Width/Height の位置に表示されます (後述を参照)。これらのオプションにアクセスするには、RectTransform コンポーネントの左上にある正方形の Anchor Presets ボックスをクリックします。

PosZ

※上の表の PosZ と同じです。

RectTransform の Inspector ウィンドウで切り替わって表示される項目名と「Rect Transform – Unity マニュアル」の説明文

アンカーとは？

説明に出てきたアンカーは、上位 UI の矩形範囲を 100 % として、0.0 ～ 1.0 の比率で表した UI の四隅の座標です。

エッジは、アンカーを基準として設定されたその UI を配置する矩形の 4 つの辺のことを指します。
アンカーで結ばれる矩形と、 UI を配置する矩形は必ず一致するものではなく、その間にはパディングと呼ばれる隙間をあけることができます。

Unity RectTransform のアンカーの Scene のマークと Inspector の項目の関係 — Slider の中の Fill Area の下位にある Fill のアンカーの設定例

Anchors	アンカー位置は左下の角で、そこから右上の角への四角となります。
Min	親の四角のサイズを分母として、四角の左下の角に使用するアンカーポイント。0,0 は親の左下の角に対応しており、1,1 は親の右上の角に対応しています。
Max	親の四角のサイズを分母として、四角の右上の角に使用するアンカーポイント。0,0 は親の左下の角に対応しており、1,1 は親の右上の角に対応しています。

「Rect Transform – Unity マニュアル」の Anchors の説明

パディングの設定

アンカーの枠内に配置した UI の辺の位置を Left, Top, Right, Bottom で設定する場合、それはアンカーの枠とその中の UI を配置する枠との間のパディング（内側の余白）とも考えられます。

Unity RectTransform の LeftTopRightBottomとアンカーの枠との間はパディングとも考えられます.

アンカー枠は、上位の UI の RectTransform を基準としているので、上位の UI のサイズが変わると、パディング（アンカー枠の内側の余白）の比率を保ちながら伸縮します。

Unity RectTransform アンカー枠内の UI は上位 UI のサイズに応じて伸縮します。

表示の違いはアンカーの幅の有無で決まる

前述のとおり、パディング（内側の余白）を持たせて UI の配置枠を設定するためには、その外側のアンカー枠に 0 より大きい幅が必要です。

例えば、アンカーの Min.Y と Max.Y をどちらも 0 にしてアンカー枠の縦幅を 0 にしてみましょう。
横幅は、先ほどと同じく 0.25 ～ 0.75 で 0.5 の幅を持たせています。
アンカーの縦軸の座標は上位 UI の上辺と同じ位置です。

下図でいうと、緑の枠の上側にある破線の部分が、縦幅が 0 の下位の UI のアンカー枠です。

Unity RectTransform アンカー枠の縦幅を 0 にして上位 UI の上辺に配置します.

この場合、上位 UI の左辺・右辺を移動させると、アンカー枠には横幅は 0.5 あるので、パディングと下位 UI の幅の比率に応じて伸縮します。

Unity RectTransform のアンカー枠の縦幅を 0 に縦の位置を 0.0 にした場合、上位UIの右辺を動かすと、パディングと配置の幅の比率で伸縮しました.

比率に応じて伸縮する場合は、小さくなりすぎると下位 UI は非表示になり×マークが表示されます。

Unity RectTransform のアンカー枠の縦幅を 0 に縦の位置を 0.0 にした場合、上位UIの左辺を動かすと右辺と同様に伸縮しますが、短くし過ぎると下位UIは非表示になりました..

上辺を移動させると、伸縮はしないで、パディングと下位 UI のサイズは変わらずに、位置だけ縦方向に移動します。

Unity RectTransform のアンカー枠の縦幅を 0 に縦の位置を 0.0 にした場合、上位UIの上辺を動かすと、サイズ固定で縦に移動しました.

下辺を移動させると、今回は下位 UI のアンカーが上辺にあるため、下位 UI は変化しません。

Unity RectTransform のアンカー枠の縦幅を 0 に縦の位置を 0.0 にした場合、上位UIの下辺を動かしても下位UIに変化はありません..

以下は、上位 UI の上辺、右辺、左辺、下辺を移動した際の動画です。

Unity RectTransform アンカー枠の縦幅を 0 にすると横だけ伸縮して、アンカーのある上辺と連動して移動しますが、下辺とは連動しません。

アンカーの枠の幅が 0 の場合は、パディングを置く余白自体がないため、 Left, Top, Right, Bottom では UI の位置とサイズが指定できません。
そのために、アンカーの縦または横の幅が 0 の場合は PosX, PosY, PosZ, width, height というアンカーの枠に依存しない矩形の設定に変わったと考えられます。

Unity RectTransform の Inspector ウィンドウでの項目の変化は左上のアイコンで伸縮が縦横にできるかどうかで切り替えられています.

まとめ

今回は、Unity の UI の位置やサイズを設定する RectTransform コンポーネントを Inspector ウィンドウで表示した際に、「PosX,Y,Z, Width, Height」と「Left Top, Right, Bottom, PosZ」に切り替わる理由について紹介しました。
また、その理由の説明のために、アンカーの幅がある場合とない場合で、上位 UI の大きさを変更した場合の UI の伸縮の有無や位置の変化についても紹介しました。