ピボット、アンカー、RectTransform、Canvas・・・色々な要素があるUI。いろんなサイトをまわってみたが、体系的にどの要素がどう作用するのか、順を追って解説してくれておりかつ私自身の感覚にマッチするまとめ方をしているものが見当たらなかった。マジ難しいので、TechAcacemyのメンターさんと話してなんとかイメージできた(かな？)内容をまとめておく。
※未熟なので、表現の誤りなどには目をつむっていただきたい。私流の言葉で表現しているので。
UI
Canvasという平面オブジェクトの子オブジェクト。Canvasとカメラ、スクリーンとの関係はまず3種類ある。
Canvasのスクリーンへの描画
Canvasとカメラとスクリーンの関係はCanvasオブジェクトをヒエラルキービューで選択してインスペクタに表示されるCanvas - Render Modeで設定できる。
デフォルトでOverlayが選択されており、他の選択肢としてはCamera、Worldという順に並んでいる。
メモ
World→Camera→Overlayの順に仕様としての理解をしていった方が個人的にはわかりやすいと思った。
Overlayはマジで世界座標系上での表示をやめてほしい・・・意味ないし混乱するから。
World
Canvas以外のオブジェクトと同様、カメラを通して実際のCanvasオブジェクト(および子オブジェクトたるUI)の大きさと世界座標系における位置を考慮してレンダリング、スクリーンに表示するというモード。Canvasオブジェクトを動かしてカメラから見えなくなると当然Canvasオブジェクトの子オブジェクトであるUIはスクリーンに表示されない。
Camera
Worldと同じく実際のCanvasオブジェクトの大きさ、世界座標系における位置を考慮してレンダリングされる。違いとしては、カメラとCanvasが紐付けされ、Canvasの位置は必ずカメラの真正面に来る状態になる。カメラを動かすとCanvasも動き、逆も然り。
Overlay
World, Cameraとは大分毛色が異なり、実際のCanvasオブジェクトの大きさや世界座標系における位置といったものは一切考慮されず、カメラを通してレンダリングされることがなく、Canvasオブジェクトをそのままスクリーンに表示させるような形になる。すなわちクロマキー的なもの、プリクラのお絵かき機能のお絵かきに相当するもの、ポケモンGoのARモードで描画されるポケモンに相当するもの(背景は実際の風景であり、こちらは現実空間の物体がレンダリングされたもの)というようなイメージがわかりやすいか。
注意
カメラを通してレンダリングされるわけではないのに、シーンビュー上でOverlayのオブジェクトが世界座標系上に存在するのでマジで混乱する。UnityのUIがおかしいんだと割り切って気にしてはいけないのだが、初学者がそんなことを知るわけがなく・・・これはUnityのUIとして機能改善してほしい。最新バージョンだとされてるのかもしれないけど。
UI描画領域の大きさと位置
UIオブジェクトをヒエラルキービューで選択してインスペクタに表示される「Rect Transform」で設定する。
私自身の混乱を避けるため、今の段階ではAnchorsのMin、Maxがx,yそれそれで同じ値で設定する前提とする。
※違う値になると相対位置？みたいな感じになるらしい。
UI描画領域の大きさ
Width, Heightで設定する。
UI描画領域の位置
UIはCanvasの子オブジェクトであり、UI描画領域の位置はCanvasを基準に決定される。
決定に関係する設定はAnchors, Pivot, PosX, PosY, PosZである(把握している分だけでいえば)。
今の所、描画領域の位置の決定はPosX,Y,Zは0,0,0固定でAnchorsとPivotのみの設定でほぼ事足りるように思える。
Anchors
アンカー。UI描画領域の基準点(Pivot)をCanvasのどこに合わせるか？を示す座標値を設定する。
ただし、Anchorsの座標値はCanvasの大きさを0〜1のスケールで表した座標系となる。
Pivot
ピボット。UI描画領域の基準点であり、この基準点の座標値を設定する。
Pivotの座標値はUI描画領域の大きさを0〜1のスケールで表した座標系となる。
PosX,Y,Z
これが0,0,0である = AnchorsとPivotがぴったり合わさっている状態。この状態からPosX,Y,Zの方向へ設定値分並行移動させて最終的なUI描画領域の位置が決定される・・・というイメージ。座標値は世界座標系のスケール。
設定例
インスペクタでRect Transformを以下のように設定した場合のUI描画領域のCanvas上における位置を図示してみた。
※図の中での(x,y)はCanvasの0~1スケール座標値、[x,y]はUI描画領域の0〜1スケール座標値を表している。
RectTransform設定値
- (PosX, PosY, PosZ) = (0,0,0)
- (Width, Height) = (100, 100)
- Anchors(MinX, MinY, MaxX, MaxY) = (1, 1, 1, 1)
- Pivot(x,y) = (1,1)
