ひとりでのアプリ開発 - fineの備忘録 -

ひとりでアプリ開発をするなかで起こったことや学んだことを書き溜めていきます

Unity - RectTransform:Anchors や Pivot について

初めに

 UI の位置を決めるためのコンポーネントである RectTransform についての記事です。Anchors や Pivot を中心に解説します。


RectTransform

RectTransform とは

 Rect Transformは、通常のTransformコンポーネントの代わりにすべての UI 要素に使用されるコンポーネントになります。 すべての UI 要素は長方形として表されています。RectTransfrom では、一般的な Transform と同様に位置(position)、回転(rotation)、スケール(scale) のほかに、長方形のサイズを設定するための幅(width)と高さ(height) も有しています。

RectTransform を構成する要素

 RectTransform は基本的には次の要素で構成されています。

  • Anchors:アンカー(後述)
  • Pivot:ピボット(後述)
  • Rotation:ピボットを中心とする回転
  • Scale:スケール

Anchors

Anchors とは

 Anchor は日本語訳すると「錨(いかり)」を意味します。UI 要素の位置を解像度(画面サイズ)が変わった場合でも適切な位置に表示させるために使用します。
 例えば、下の2つの画像では解像度が変化しても、画面内(Canvas内、青い4つの点を頂点とする長方形内)の同じ位置(中央より少し右)に白い正方形が表示できています。



Anchors の確認方法

 Anchor はシーンビューで確認することができます。UI オブジェクトを選択した際に表示される4つの白い△がアンカーになります。

(この画像だと四隅にアンカーがある)

(この画像だと左端中央にアンカーが集まっている)

Anchors の位置

 Anchor の位置は親オブジェクトのサイズ(UI のため、最上層は Canvas )を基準とした X 軸方向, Y 軸方向の割合で表されます。 Min は下の Anchor の位置を, Max は上の Anchor の位置を表します。

(Min X = 0. Min Y = 0.5, Max X = 0, Max Y = 0.5)

(Min X = 0.5. Min Y = 0.5, Max X = 0.5, Max Y = 0.5)

(Min X = 0. Min Y = 0, Max X = 1, Max Y = 1)

(Min X = 0. Min Y = 0.5, Max X = 1, Max Y = 0.5)

Anchors が同じ位置にある場合、anchoredPosition

 Anchors が同じ位置にある場合、UI の位置は anchoredPosition(Pos X, Pos Y, Pos Z)で表され、UI のサイズは Width, Height で表されます。


(上の画像では Anchors の Min, Max がすべて 0.5 で同じ値なので Anchor が中央に集まっている)

 anchoredPosition は

アンカー基準点に対する RectTransform の相対的なピボットの位置

を意味します。Anchor が集まっている位置が 0 になります。

 通常の Transform の場合、基本的には Inspector から操作できる Position は 親オブジェクトを基準とする localPosition でしたが、RectTransform の場合はアンカーを基準とする anchoredPosition を操作することになります。

 また、UI のサイズは Width, Height で設定できるため、固定されています。解像度(画面サイズ)が変化させてもサイズは UI のサイズは変わりません。(つまり解像度が変化した場合、はみ出たり、画面サイズに対して小さく見えたりする可能性がある)

Anchors が違う位置にある場合

 Anchors が違う位置にある場合、UI の位置とサイズは Left, Top, Right, Bottom で表されます。

Left, Top, Right, Bottom は

UI を表す長方形の辺々とアンカーが作る長方形の辺々の距離

を意味します。

(Left = 200, Top = 100, Right = 300, Bottom = 150 の場合)

 この場合、UI の四隅の位置が Left, Top, Right, Bottom によって決まるため、UI のサイズも Left, Top, Right, Bottom によって決まります。
 例えば、Left, Top, Right, Bottom のすべての値を 0 にすると、UI を表す長方形の四隅とアンカーが作る長方形の4辺の距離がすべて 0 となるため、UI のサイズとアンカーが作る長方形のサイズは同じになります。

 UI のサイズや位置を解像度に合わせて変化させたい場合、次のようにするとよいです。

  • UI を置きたいところにアンカーを合わせる
  • Left, Top, Right, Bottom はすべて 0 にする

(解像度が違う場合でも UI のサイズが変わり、はみ出ない)

 これで、UI が画面外にはみ出たり、画面に対するサイズの割合が変化することはなくなります。しかし、縦横比が固定の場合は問題ないですが、そうではない場合、UI 自身の縦横比が変わってしまうため、注意が必要です。

Anchor Presets

 アンカーの設定位置はプリセットが用意されています。

 オレンジの点の位置にアンカーを置くことができます。また、Shift キーを押しながら選択することで、Pivot の位置を、Alt キーを押しながら選択することで UI の位置も変更することができます。(Pivot については後述)

Pivot

Pivot とは

 Pivot は

UI 要素の基準点

になります。
 anchoredPosition や回転(rotation)、サイズ(size)、スケール(scale) はすべて Pivot を基準にされます。

 シーンビューでは、中抜きの青丸で表示されます。

Pivot の変更

 Pivot の位置は Vector2 で表されます。

(X, Y) Pivot の位置
(0, 0) UI 要素の左下
(0, 1) UI要素の左上
(1, 0) UI 要素の右下
(1, 1) UI 要素の右上
(0.5, 0.5) UI 要素の中央

 Pivot の位置を変える方法は4つあります。

  • Inspector から Pivot の数値を変える
  • スクリプトから Pivot の数値を変える
  • Anchors Preset から変更する(上述)
  • シーンビューの Pivot マーク(中抜きの青丸)を直接動かす

Rotation, Scale

 Rotation(回転)と Scale は基本的には通常の Transform と同じです。違いは基準点が Pivot であるという部分だけです。

Blueprint Mode

 Blueprint Mode は RectTransform の Scale や Rotation とは関係なくWidthやHeight等のUIの位置情報を元にUIを操作出来るモードです。

(Blueprint Mode が有効の場合)

(Blueprint Mode が有効でない場合)

 Scale や Rotation を変更する前の状態を確認しながら操作できるため、UI が斜めになっている状態で Width や Height を変更する際に便利です。

 Blueprint Mode を有効にするには、Inspector の点線の四角形のボタンをクリックします。

Rawedit Mode

 Anchor や Pivot を変更すると、通常、UI のサイズや位置が変更されないように他の数値が自動調整されます。Rawedit Mode を有効にすることで、他の値を変更することなく Anchor や Pivot を変更することができます。(その代わり、UI の相対的な位置やサイズは変化します。)

 Rawedit Mode を有効にするには、Inspector で R ボタンをクリックします。

参考

docs.unity3d.com
docs.unity3d.com

最後に
  • RectTransform は UI 要素の位置やサイズを決めるコンポーネント
  • Anchors が UI 要素の位置、サイズに影響を与える
  • Pivot は UI 要素の基準点
  • Blueprint Mode や Rawedit Mode といった編集するために便利なモードがある