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

ゆにてく備忘録

Unityやその他学んだ事を忘れないために書くぶろぐ

uGUIチュートリアル まとめ2 UI RECT TRANSFORM

目次

UnityのuGUIのチュートリアル(UI RECT TRANSFORM)のまとめです.


Rect Transform - Unity Official Tutorials - YouTube

Rect Transform

f:id:n_taku:20150311231909p:plain

  • Rect TransformはUIのためのTransformコンポーネントでPivotからの幅と高さに基づいた長方形を表している
  • Rect Transformはzコンポーネントを持っているので,シーン上で3Dオブジェクトと同じように扱える
  • 従来のTransformとRect Transformとの違いはAnchorsの有無である
  • Rect Transformを持つ子オブジェクトの親もRect Transformを持つ場合,親は子にアンカーされる
  • Anchorがある事で,親のRect Transformの位置とサイズに基づいて,子を動かしたり,伸縮させたりできる.(例えばwindowサイズに合わせたUIのリサイズが可能)
  • UI要素の親であるCanvasはRect Transformを持つので,UIは必ず親にアンカーされる

Rect Tool

f:id:n_taku:20150311161204p:plain

シーン上でUIを操作するためにRect Toolを使う.UIの移動,リサイズ,回転が可能である.

f:id:n_taku:20150311233744p:plain

上の画像の一番右がRect Toolモードである.(ショートカットはt)

操作方法

操作方法は以下(移動,リサイズ,回転それぞれでカーソルが変化する)

  • 長方形で囲まれた領域内をドラッグする事で移動
  • 長方形の辺をドラッグする事で,リサイズ(Shiftキーを押しながらドラッグでアスペクト比を変えずにリサイズ)
  • 長方形ので囲まれた領域外の頂点付近をドラッグする事で回転

リサイズと回転はPivotを基準として行われ,Pivotは以下の画像の様に青い丸で示される(基本的にオブジェクトの中心)

f:id:n_taku:20150311213146p:plain

GizmoをCenterではなくPivotモードにする事で,Pivotをシーン上でドラッグで移動させる事ができる

PivotはUIの外側に配置する事も可能

GizmoがGlobalモードの時は,UIを囲むWindowに平行な長方形に対して,リサイズ,回転が可能

GizmoがLocalモードの時は,UIを囲む長方形に対して,リサイズ,回転が可能

f:id:n_taku:20150311230004g:plain

Anchor

Rect Transformは子UIの位置を親UIとの相対位置で指定する Anchorは子UIが親UIのどの位置を基準にしているのかを示している.Anchorは四つの小さな三角形で示され,このそれぞれ4つの三角形が,子UIのRect Transformのそれぞれ4つの角との位置関係を示している.下の画像はPanelが親でButtonが子の例であるf:id:n_taku:20150321121708p:plain

アンカーを下の画像のようにずらすと,Pos が変化する.PosはアンカーからのPivotの相対位置である.WidthとHeightはボタンの幅と高さを表す.これらはピクセル単位である.下の画像だとアンカーから下に30ピクセルの位置に Pivotがある幅160,高さ30のRect Transformという意味 f:id:n_taku:20150321122309p:plain

アンカーは親UIのRect Transform内のどこにでも設定できる.アンカーである4つの三角形は以下の画像の様にRect Transformのそれぞれの頂点に対応している.

f:id:n_taku:20150321125358p:plain

アンカーはドラッグで動かす事ができる.Shiftを押しながら動かす事でUIのサイズも変えながら動かす事ができる.アンカーの状態でRectTransformのcomponentがPos,Width,Height,Left,Right,Top,Bottomのいずれかに変わる.

f:id:n_taku:20150321132325g:plain

アンカー位置は親のRect Transformnのサイズとのxy軸方向の比率で表される.この比率は0〜1の値に正規化される.左下が0で右上が1である.よって親のRect Transformの大きさが変わるとアンカー位置が変わるので,子UIが移動する.またアンカーの指定方法により,全体が伸縮,伸縮しない,横だけ伸縮,縦だけ伸縮するように設定できる.つまり,画面サイズによってUIを柔軟に伸縮させる事ができる.

アンカーポイントの配置例

  • 4つのアンカーをすべて(0.5,0.5)つまり親UIの中心とした場合の例

f:id:n_taku:20150321143025p:plain

ボタンのWidthが160,Heightが30なので,この場合は常に

アンカー位置(x比率0.5の位置)から左に80ピクセル,アンカー位置(y比率0.5の位置)から下に15ピクセルの位置がボタンの左下

アンカー位置(x比率0.5の位置)から左に80ピクセル,アンカー位置(y比率0.5の位置)から上に15ピクセルの位置がボタンの左上

アンカー位置(x比率0.5の位置)から右に80ピクセル,アンカー位置(y比率0.5の位置)から下に15ピクセルの位置がボタンの右下

アンカー位置(x比率0.5の位置)から右に80ピクセル,アンカー位置(y比率0.5の位置)から上に15ピクセルの位置がボタンの右上

となる.つまりこの時伸縮しない

f:id:n_taku:20150321145746g:plain

  • 4つのアンカーをすべて親UIの角とした場合の例

f:id:n_taku:20150321144645p:plain 

この場合は常に

アンカー位置(x比率0の位置)から60ピクセル,アンカー位置(y比率0の位置)から60ピクセルの位置がボタンの左下

アンカー位置(x比率0の位置)から60ピクセル,アンカー位置(y比率1の位置)から60ピクセルの位置がボタンの左上

アンカー位置(x比率1の位置)から60ピクセル,アンカー位置(y比率0の位置)から60ピクセルの位置がボタンの右下

アンカー位置(x比率1の位置)から60ピクセル,アンカー位置(y比率1の位置)から60ピクセルの位置がボタンの右上

となる.つまりこの時縦横伸縮する

f:id:n_taku:20150321145810g:plain

  • 高さは親UIの中心,左右は親UIの端とした場合の例

f:id:n_taku:20150321151501p:plain

ボタンHeightが30なので,この場合は常に

アンカー位置(x比率0の位置)から60ピクセル,アンカー位置(y比率0.5の位置)から下に15ピクセルの位置がボタンの左下

アンカー位置(x比率0の位置)から60ピクセル,アンカー位置(y比率0.5の位置)から上に15ピクセルの位置がボタンの左上

アンカー位置(x比率1の位置)から60ピクセル,アンカー位置(y比率0.5の位置)から下に15ピクセルの位置がボタンの右下

アンカー位置(x比率1の位置)から60ピクセル,アンカー位置(y比率0.5の位置)から上に15ピクセルの位置がボタンの右上

となる.つまりこの時縦は伸縮しないが,横は伸縮する

f:id:n_taku:20150321151710g:plain

アンカーポイントの配置のテンプレ

下のgifの様にRect Transformのすぐ下にある四角形をクリックする事でよく使うアンカーポイントの配置を設定できる.

左から3つ,上から3つの,合計9つのプリセットは伸縮しないもので,基準となる位置が上下左右中央の9つである

一番下の列が上下に伸縮するアンカーの設定で,一番右の列が左右に伸縮する設定である

Shiftを押しながら選択する事で,Pivotポイントも同時に変更でき,Alt(macならoption)を押しながら選択する事で位置も同時に変更できる

f:id:n_taku:20150321152920g:plain

Pivot

PivotはPivotポイントを表し,xy軸にそって0から1に正規化される.左下が(0,0),右上が(1,1)である

Rotation

Rotationは基本的にz軸しか使わないが,ワールドスペース上にUIは設置しているのでxy軸方向にも回転させる事ができる

Scale

ScaleはSizeとは異なる

サイズはWidthやHeightによって定められ,リサイズの際に変化する.しかしScaleはリサイズしても変化しない

例えばボタンをリサイズした時,子オブジェクトのテキストの大きさは変化しない.しかしスケールを変えると,テキストの大きさも変化する

基本的に大きさをかえる際はリサイズが推奨されるが,アニメーションやその他特殊な理由がある際はスケール値を変更する

0以下のリサイズは禁止されているが,0以下のスケーリングはUIが反転する.これはアニメーションなどに用いられる

Mode

f:id:n_taku:20150321163851p:plain

左がBlue Printモード,右がRaw Editモードである.

Blue PrintモードにするとScene上でRotationとScaleが変更できなくなる

Raw EditモードにするとInspector上でAnchorの値を変更した際に,比率を保ちながらリサイズする様になる

Other

gridlayoutgroupなどのコンポーネントによりRect Transformが決定される場合は,Rect Transformの項目の操作はできなくなる