uGUIのレイアウトシステムの調整機能…の基礎であるRectTransformの調整についてについて解説します。今回はGUIで触れる範囲。
目次
Pivot（中心点）の設定
まずuGUIのUIのレイアウト基準点となるpivot(ピボット)を指定します。これがuGUIのレイアウトの基本となります。
Pivotを動かす
pivotはボタンを選択した時の中心の◯です。基本的にこの◯を中心にUIの位置が決定します。pivotの位置はUIの大きさを正規化した値で、右上が(x:1, y:1)左下が(x:0, y:0)です。ちなみにUIからはエディタ右上の操作モードがpivotの時しか動かせません。
Pivotの挙動
UIの操作はpivotが中心となるため、例えばUIの回転や拡大・縮小を行った際もpivotの位置を中心に行われます。
例えばUIの大きさをRectTrasnfromのWidthやHeightで操作した場合、pivotの位置によっては以下のように挙動が変化します。これはUIの高さ・幅が未定の時や、UIの位置を中心点に置きたい場合等で有効です。
Anchorの設定
レイアウトの基準点を求める上でもう一つ重要なのが、Anchor(アンカー)です。
アンカーとUIのサイズ
AnchorはUIの親のUIのサイズとの比率からUIのサイズや位置を調整する機能です。これは所謂9パッチと呼ばれる技術です。親UIの大きさを％で分割し、各マージンの大きさを求めます。
下の場合、UIの高さは親UIの49%程度、幅は71%程度を維持します。この各マージンを0%にする事で、親UIのサイズと同じサイズを維持する事が出来ます。
さらにAnchorで求めたマージンを元にUIのサイズを決定します。これは、Anchorからの相対距離で求めます。例えば下のような場合、マージンの上から46.5、右から152の距離を保ちます。
画面サイズ（親サイズ）とアンカー
この状態で親UIのサイズが変化した場合、UIの距離を一律で保っているためUIのサイズがストレッチするように変化します。
ストレッチしたくない場合、Anchorのxかyの位置をあわせる事で、RectTransformの表記がTop/DownまたはLeft/RightからPos Y/HeightもしくはPos X/Widthに変わり、UIの位置調整がAnchorとの相対距離と幅/高さで指定する形に変化します。
これらの設定が面倒な場合、uGUIにはAnchorのプリセットが用意されています。具体的にはAnchorの基準点を左上や右上に設定や、幅ストレッチ・縦ストレッチ等を設定する事ができます。
BluePrint ModeとRaw Edit Mode
このUIを操作する上で少し知っておくと便利なのが、BluePrintModeとRawEditModeです。RectTransform右側にトグルボタンがあり、ここでON/OFFします。
BluePrintMode
まずBluePrintModeですが、RectTransformのScaleやRotationとは関係なくWidthやHeight等のUIの位置情報を元にUIを操作出来るモードです。
例えばUIの回転を行った場合スプライト操作モードは縦横最大値で表示されますが、BluePrintModeにチェックを入れている場合、回転・拡縮されていないUIのサイズを表示します。これはUIが斜めになっている状態でUIのWidthやHeightを編集する際に便利です。
RawEditMode
RawEditModeはpivotやAnchorの位置を操作した際に追随するかどうかの設定です。RawEditModeにチェックが入っている場合、InspectorビューからpivotやAnchorを動かした際にpivotやAnchorの位置を変えずにUIの位置やサイズだけを変更する事ができます。
なお実は、SceneViewでAnchorを操作する場合は、別にRawEditModeがONになっていない状態でもShiftを押しながら操作すればUIの位置を調整する事ができます。実際のUI調整はこっちがメインになる気がします。
スクリプト側からレイアウトを操作する
uGUIをスクリプト側から操作する際、ちょっと面倒な点がEditorの表記とRectTransformのフィールドが一致しない点です。例えばPos X等のパラメータは存在しませんし、Width/Heightも存在しません。
そんな時はInspectorをDebugモードに変更してRectTransformの隠しているパラメータを晒します。これで大体パラメータが何を指しているのかが分かります。マニュアルも読むとなお良し。
ちなみに大体こんな感じです。
- Width/Height : Size Delta
- Pos X/Pos Y : Anchored PositionとPivotを計算したもの
- Left/Right/Top/Bottom : Size DeltaとpositionとAncherd positionを計算したもの
- Anchors : Anchor MinやAnchor Max
- Scale : LocalScale
- Rotation : LocalRotation
なおUIをランタイムに羅列したい場合、Component>Layout以下のコンポーネントを使うと色々と出来ます。その機能は癖があって使いにくいと思ったらスクリプトで調整という感じです。
UnityのuGUIでスクロールビューを作る - テラシュールブログ
参考
Rect Transform - Unity Official Tutorials - YouTube
UnityのuGUI入門してみた｜とあるプログラマーのブログ
