UGUIレイアウトシステムの学習

記事ディレクトリ

UGUIレイアウトシステムの学習

1. RectTransform アダプティブレイアウト

各 UGUI コントロールには RectTransform コンポーネント (Transform から継承) があり、コントロールのアンカーポイント、ピボットポイントの位置、幅と高さ、回転、スケーリング、その他の属性を定義します。主にレイアウトと配置を制御するために使用されます。

1.1 ピボット:

オブジェクト自体を座標系とし、左下隅を座標原点 (0,0)、右上隅を (1,1) とします。
ピボットポイントは、オブジェクトの回転と拡大縮小の基準点です。
オブジェクトの幅と高さが変化すると、ピボットポイントによってオブジェクトが両側にどのように広がるかが決まります。

たとえば、ピボットポイント (0.4、0.8) は、現在の UI の中心点が幅の 40%、高さの 80% にあることを示します。オブジェクトの幅を Δx だけ拡張しようとすると、Δx の 40% がピボットポイントの左側に割り当てられ、残りがピボットポイントの右側に割り当てられます。
テキストボックスなどの UI を動的に拡張する必要がある場合、テキストが占めるピクセルに応じてテキストボックスの幅を動的に拡張し、同時にテキストを水平方向に左揃えにしたいとします。次に、ピボットポイントを UI の左端に設定する必要があります (つまり pivot.x = 0 )。これにより、テキストボックスの幅が大きくなったときに、横ではなく右にのみ拡張されます。

オブジェクトのスケーリングについても同様です。
ピボットポイントとアンカーポイントは共同でパネル上の一連の値に影響を与えますが、アンカーポイントの設定によって表示方法が異なります (PosZ は通常は変更されません)。

この値のセットは、親オブジェクトを基準としたオブジェクトのレイアウトを表します。
親ノードがどのように変更されても、この値のセットは変更されません。同様に、親ノードのサイズが変更されると、この値のセットを維持するために、子オブジェクトの位置、幅、高さがそれに応じて変更されます。

1.2 アンカー:

アンカーポイントは、親オブジェクトのサイズが変化したときに UI の位置とサイズがどのように変化するかを決定します。

各 RectTransform には Min と Max の 2 つのアンカーポイントがあります。
アンカーポイントは、親オブジェクトを座標系、左下隅を座標原点 (0,0)、右上隅を (1,1) とする正規化された 2 次元ベクトルです。
2つのアンカーポイントで対角線を決定できる、つまりアンカーボックスという概念があります。2 つのアンカーポイントの位置に応じて、次の 3 つのケースがあります。

(1) 2 つのアンカーポイントが一致します。つまり、X と Y が両方とも同じであり、アンカーボックスは 1 つの点に縮退します。
ここに画像の説明を挿入
この値のセットは次のように表示されます: PosX、PosY: アンカーポイントを基準としたオブジェクトのピボットポイントの位置、Width、Height: オブジェクトの幅と高さ。この場合、それは絶対値と呼ばれます
。レイアウト。絶対レイアウトでは、親オブジェクトのサイズは変わりますが、子オブジェクトのサイズは変わりません。ピボットポイントとアンカーポイントの相対位置を維持するために、子オブジェクトの位置が変更されます。

(2) 2 つのアンカー点が同一水平線上または同一垂直線上にある、つまり X と Y が同一の集合を持ち、アンカーフレームはアンカーラインに縮退します。
例: Min(0,1) Max(1,1)、つまり、アンカーボックスは親ノードの上部境界に縮退します。
ここに画像の説明を挿入
この値のセットは次のように表示されます: Left、Right: オブジェクトの左右の境界と左右のアンカーポイントの間の水平距離; PosY: オブジェクトのピボットポイントとアンカーラインの間の垂直距離; 高さ: オブジェクトの高さ

この場合、親オブジェクトの幅が伸びると、オブジェクトの左右の境界と左右のアンカーポイントの間の水平距離を変更しないようにするために、子オブジェクトも伸びます。オブジェクトを維持するために、親オブジェクトのオブジェクトが引き伸ばされます。ピボットポイントとアンカーポイントの間の垂直距離は変更されず、子オブジェクトがより高く表示されますが、高さは引き伸ばされません。

他のアンカーラインでも状況は同様です。

(3) 2 つのアンカーポイント X と Y は互いに異なり、長方形のアンカーボックスを形成します。
ここに画像の説明を挿入
この値のセットは次のように表示されます: Left、Right、Top、Bottom: オブジェクトの 4 つの境界とアンカーボックスの 4 つの辺の間の距離を示します。

この場合、親オブジェクトのサイズが変更されるたびに、子オブジェクトも引き伸ばされます。

1.3 アンカー最小値、アンカー最大値、オフセット最小値、オフセット最大値、サイズデルタ、アンカー位置

anchorMin,anchorMax : 正規化されたアンカーベクトル。

offsetMin、offsetMax : 2 つのアンカーポイントからオブジェクトの左下隅と右上隅を指す 2 つのベクトルを表します。offsetmin は、anchorMin アンカーポイントを基準とした現在のオブジェクトの左下隅のオフセットを表し、offsetmax は、anchorMax アンカーポイントを基準とした現在のオブジェクトの右上隅のオフセットを表します。
ここに画像の説明を挿入

sizeDelta : サイズの変更量。この属性は offsetMax - offsetMin から取得されるベクトルを表します。絶対レイアウトは、画像の左下隅から右上隅までのベクトルです。

rectTransform.rect は読み取り専用であるため、絶対レイアウトで sizeDelta の値を変更することで、オブジェクトの幅と高さを直接変更できます。offsetMin と offsetMax の値を変更すると、相対レイアウトをよりよく理解できます。

anchoredPosition : 以下の図の矢印で表されるベクトル。
ここに画像の説明を挿入
説明: 緑のボックス: 子ノード; 赤のボックス: 親ノード; 軸: ピボット、上の図の矢印で示された小さな青い円; アンカーポイント領域: AnchoredMin と AnchoredMax で構成されるボックス (上の図の 4 つ)小さな白い三角形で構成されます; 仮想軸: 子ノードのピボットパラメーターによってアンカーポイント領域にマッピングされた点。回路図コード:

    float virtualX = Mathf.Lerp(rect.anchorMin.x, rect.anchorMax.x, rect.pivot.x);
    float virtualY = Mathf.Lerp(rect.anchorMin.y, rect.anchorMax.y, rect.pivot.y);
    Vector2 virtualPivot = new Vector2(virtualX, virtualY);
    Vector2 localPosition2D = new Vector2(rect.localPosition.x, rect.localPosition.y);
    Vector2 anchoredPosition = localPosition2D - Vector2.Scale(parent.rect.size, visualPivot - Vector2.one * 0.5f);

1.4 一般的な API の使用法:

RectTransform の上部を変更
GetComponent().offsetMax = new Vector2(GetComponent().offsetMax.x, top);
RectTransform の右側を変更
GetComponent().offsetMax = new Vector2(right, GetComponent().offsetMax.y );
RectTransform の下部を変更
GetComponent().offsetMin = new Vector2(GetComponent().offsetMin.x,bottom);
RectTransform の左を変更
GetComponent().offsetMin = new Vector2(left,GetComponent().offsetMin.y );
RectTransform の幅、高さを変更します
GetComponent().sizeDelta = new Vector2(width, height);
RectTransform のアンカー位置を変更します
GetComponent().anchoredPosition3D = new Vector3(posx,posy,posz);
GetComponent().anchoredPosition =新しい Vector2(posx,posy);

void GetLocalCorners(Vector3[] fourCornersArray);
このメソッドは、UI の四隅の座標を自身の Pivot を原点とした座標系で取得することを意味します。パラメータとしての Vector3 配列は、それ自体で宣言する必要があります。四隅を取得する順番は、左下、左上、右上、右下の順です。

void GetWorldCorners(Vector3[] fourCornersArray);
このメソッドは、UI の四隅の座標をワールド座標系で取得することを意味します。

void SetSizeWithCurrentAnchors(RectTransform.Axis axis, float size);
現在のアンカー情報に従ってサイズを設定します (実際にはピボットに従って、設定結果はアンカーとは関係ありません)。パラメータは 2 つあり、最初のパラメータは値です。 Axis タイプの場合、水平または垂直の方向を指定する必要があります。2 番目のパラメータはそれ自体の幅と高さです。

例: 幅と高さを (100,30) に設定します。
RectTransform rt = GetComponent();
rt.SetSizeWithCurrentAnchors(RectTransform.Axis.horizontal,100);
rt.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical,30);

void SetInsetAndSizeFromParentEdge(RectTransform.Edgeedge, float inset, float size);
親 UI のエッジに対する現在の UI の距離と、現在の UI のサイズを設定します。最初のパラメータは、Edge 型の値です。親オブジェクトのエッジとなるように指定するベンチマーク (つまり、Top、Bottom、Left、Right の 4 つの値のいずれか、つまり配置)、2 番目のパラメーターは指定した辺からの距離です; 3 番目のパラメータはそれ自体の幅または高さです。

例: 幅と高さを (100,30) に設定し、親 UI の右への距離を 0、下への距離を 0 に設定します。
RectTransform rt = GetComponent();
rt.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Right, 0, 100);
rt.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Bottom, 0, 30);

2. レイアウトコンポーネント: 垂直レイアウトグループ、水平レイアウトグループ、グリッドレイアウトグループ

垂直レイアウトグループ垂直レイアウトグループ：
ここに画像の説明を挿入
Padding：親オブジェクトの端からの距離（配置で調整）
Spacing：子オブジェクト間の距離
Child Alignment：
配置 Reverse Arrangeme：逆の配置
Control Child Size：制御するかどうか子レイアウト要素の幅と高さ
子スケールの使用: レイアウトに子要素のスケールされたサイズを使用するかどうか。子の
強制拡張: 他の利用可能なスペースを埋めるために子レイアウト要素を強制的に拡張するかどうか。

水平レイアウトグループ水平レイアウトグループの使用法も同様です。

グリッドレイアウトグループグリッドレイアウトグループ:
ここに画像の説明を挿入
制約: 行または列の数を制約します。

通常、親要素のサイズを自己適応的にするために、Content Size Fitter コンポーネントとともに使用されます。