Unity4.6から導入された新GUI、"uGUI"。従来のGUIより柔軟な設定ができるuGUIの導入についてまとめた。
CanvasUI要素をシーンに配置する
ヒエラルキビュー、Create-UIで、CanvasのUI要素が表示される。CanvasUIは、まず土台となるCanvasをシーンに配置し、その上に各UI要素を乗せていくという概念。
しかし、いきなりUI要素を選択しても、自動的にCanvasを配置してくれる。ここではUI要素のPanelを選択してみる。
するとこのように、ヒエラルキビューに、Canvas-Panelが配置される。EventSystemというオブジェクトも自動生成される。
続いて、Create-UIでButtonを選択。こんな感じになる。
Canvasコンポーネント
Canvasのインスペクタで指定するRender Modeには、次の３つのモードがある。
- Screen Space - Overlay すべてのカメラのレンダリング画面上にオーバーレイ表示する
- Screen Space - Camera 特定のカメラの画角いっぱいになるよう自動拡大される
- World Space シーン内の３D空間に配置する
OverlayとCameraは機能的には似ているが、OverlayはPost処理としてレンダリング画面に上書きされるのに対し、Cameraはあくまでも３D空間上のオブジェクトとしてカメラの画角いっぱいに正対して表示される。このため、Cameraの場合は、そのカメラのみに有効であることと、カメラの近くにオブジェクトがある場合、Canvasはその背後に表示される、という違いがある。Unity Manal-Canvas
ここではWorld Spaceを選択し、メインカメラから見える位置に移動する。
Rect Transformコンポーネント
CanvasUI要素の配置はRect Transformコンポーネントがつかさどる。これはtransformコンポーネントと似ているが、UI設定に便利なように違いもある。
Scale
移動・回転は一般のGameObjectと同じように扱える。
大きさの変更は"Scale Tool"と"Rect Tool"の２通りの方法がある。"Scale Tool"は文字通りScaleを変更するが、"Rect Tool"をRect Transformコンポーネントを持つオブジェクト（すなわちCanvasUI要素）に適用した場合、Scaleは変わらない。その代わりにWidth/Heightが変更される。スケール変更との違いは、フォントサイズやボーダーライン太さなどに影響しないこと。
Pivot
PivotはUI要素の２次元平面上の回転中心。左下が(0,0)、右上が(1,1)の相対座標であたえる。ヒエラルキビュー上では、Pivot点は中抜きの青丸で表示される。PivotモードではPivotを中心とした回転に、Centerモードではオブジェクト中心を基準に回転させることができる。
"Rect Tool"は、シーン上のUI要素の辺または角をつかんでドラッグすることで行える。また、
Anchor
CanvasUIの要素の位置はすべて親要素にたいする相対位置で指定する。この相対位置を定義するのがAnchor。ヒエラルキビュー上は（４つの）中抜きひし形で示される。
AnchorにはMax/Minの２つの座標がある。
Max/Minを同じ値にすると、Anchorha一点になる。たとえば、親要素の右下コーナーにAnchorを設定すると、親要素のサイズが変わっても、子要素の右下からの位置は一定に保たれる。
Max/Minに違う値を設定すると、位置とともに子要素のサイズも変わる。たとえば、親要素の左下と右下にAnchorを設定すれば、親要素の幅が変わったときに、親要素との左右のすき間が一定となるように、子要素の幅が変わる。
Unity APIにあるアニメーションが参考になる。
なお、Anchorにはプリセットが用意されているので、通常はここから選べば事足りる（と思う）。厳密に指定したい場合はインスペクタで数値を入力することもできる。
余談
Overlayモードでは、Canvasはシーン上でZ方向にしか動かせないらしい。もっともどこに配置してもいいわけだが。また、Z座標が±1000を越えるとカメラスクリーンに表示されなくなるようなので、Z座標で表示非表示を変更できる？
