読者です 読者をやめる 読者になる 読者になる

Unityな日々(Unity Geek)

Unityで可視化アプリを開発するための試行錯誤の覚書

Canvas(uGUI)の基本レイアウト

Unity4.6から導入された新GUI、"uGUI"。従来のGUIより柔軟な設定ができるuGUIの導入についてまとめた。

CanvasUI要素をシーンに配置する

ヒエラルキビュー、Create-UIで、CanvasのUI要素が表示される。CanvasUIは、まず土台となるCanvasをシーンに配置し、その上に各UI要素を乗せていくという概念。

しかし、いきなりUI要素を選択しても、自動的にCanvasを配置してくれる。ここではUI要素のPanelを選択してみる。

f:id:yasuda0404:20150307111027p:plain

するとこのように、ヒエラルキビューに、Canvas-Panelが配置される。EventSystemというオブジェクトも自動生成される。

f:id:yasuda0404:20150307111600p:plain

続いて、Create-UIでButtonを選択。こんな感じになる。

f:id:yasuda0404:20150307112753p:plain

f:id:yasuda0404:20150307111019p:plain

Canvasコンポーネント

以下、Canvas特有のコンポーネントについて。

Canvasのインスペクタで指定するRender Modeには、次の3つのモードがある。

  • Screen Space - Overlay すべてのカメラのレンダリング画面上にオーバーレイ表示する
  • Screen Space - Camera 特定のカメラの画角いっぱいになるよう自動拡大される
  • World Space シーン内の3D空間に配置する

OverlayとCameraは機能的には似ているが、OverlayはPost処理としてレンダリング画面に上書きされるのに対し、Cameraはあくまでも3D空間上のオブジェクトとしてカメラの画角いっぱいに正対して表示される。このため、Cameraの場合は、そのカメラのみに有効であることと、カメラの近くにオブジェクトがある場合、Canvasはその背後に表示される、という違いがある。Unity Manal-Canvas

ここではWorld Spaceを選択し、メインカメラから見える位置に移動する。

f:id:yasuda0404:20150307111035p:plain

Rect Transformコンポーネント

CanvasUI要素の配置はRect Transformコンポーネントがつかさどる。これはtransformコンポーネントと似ているが、UI設定に便利なように違いもある。

Scale

移動・回転は一般のGameObjectと同じように扱える。

大きさの変更は"Scale Tool"と"Rect Tool"の2通りの方法がある。"Scale Tool"は文字通りScaleを変更するが、"Rect Tool"をRect Transformコンポーネントを持つオブジェクト(すなわちCanvasUI要素)に適用した場合、Scaleは変わらない。その代わりにWidth/Heightが変更される。スケール変更との違いは、フォントサイズやボーダーライン太さなどに影響しないこと

Pivot

PivotはUI要素の2次元平面上の回転中心。左下が(0,0)、右上が(1,1)の相対座標であたえる。ヒエラルキビュー上では、Pivot点は中抜きの青丸で表示される。PivotモードではPivotを中心とした回転に、Centerモードではオブジェクト中心を基準に回転させることができる。

"Rect Tool"は、シーン上のUI要素の辺または角をつかんでドラッグすることで行える。また、

f:id:yasuda0404:20150307111002p:plain f:id:yasuda0404:20150307111011p:plain

Anchor

CanvasUIの要素の位置はすべて親要素にたいする相対位置で指定する。この相対位置を定義するのがAnchor。ヒエラルキビュー上は(4つの)中抜きひし形で示される。

AnchorにはMax/Minの2つの座標がある。

Max/Minを同じ値にすると、Anchorha一点になる。たとえば、親要素の右下コーナーにAnchorを設定すると、親要素のサイズが変わっても、子要素の右下からの位置は一定に保たれる。

Max/Minに違う値を設定すると、位置とともに子要素のサイズも変わる。たとえば、親要素の左下と右下にAnchorを設定すれば、親要素の幅が変わったときに、親要素との左右のすき間が一定となるように、子要素の幅が変わる。

Unity APIにあるアニメーションが参考になる。

なお、Anchorにはプリセットが用意されているので、通常はここから選べば事足りる(と思う)。厳密に指定したい場合はインスペクタで数値を入力することもできる。

f:id:yasuda0404:20150307121623p:plain

余談

Overlayモードでは、Canvasはシーン上でZ方向にしか動かせないらしい。もっともどこに配置してもいいわけだが。また、Z座標が±1000を越えるとカメラスクリーンに表示されなくなるようなので、Z座標で表示非表示を変更できる?