ゲーム化!tomo_manaのブログ

ゲーム化!tomo-manaのブログ

Unityでゲームを作る方法について紹介しています

Unity学習#26-3 RectTransform (Unity 2019.4.4f1)

#26 の実装にあたって、少しRectTransformについて調べた内容についてまとめます。

<目次>

RectTransform の構成

f:id:tomo_mana:20210204222431p:plain
クラス図 - RectTransform

RectTransform は Transform を継承しています。Transform は座標と親子関係、RectTransform は四角形(矩形)を管理します。先に簡単に Transform についてまとめ、その後に RectTransform についてまとめます。

Transform

f:id:tomo_mana:20210202075216p:plain
Transform

Transform の役目は座標を管理することです。
Transform - Unity マニュアル

Unity では 3Dでの説明がメインなので、ここでは 2D での説明に特化します。

プロパティ 機能
Position 親を(0,0)としたときの、自分の相対座標またはオフセット(x,y)。1=1マス。
Rotation 回転角。2Dでキャラクターを回転させる(x, y方向)ときは、z軸を回転させます。1=1度で、z=360で1回転します。
Scale 親を1とした時の、自分の拡大縮小率(x, y)

Transform の座標はGrid単位(1=1マス分)です。

RectTransform

f:id:tomo_mana:20210202075239p:plain
RectTransform

RectTransform は、ある座標を起点にした四角形(矩形)を管理します。Transform と同じく座標を持ちますが、RectTransform の座標はピクセル単位です。
基本的なレイアウト - Unity マニュアル

ここでは RectTransform の最大の特徴であるAnchorとPivotについてまとめます。

Anchor

f:id:tomo_mana:20210203001543p:plain
RectTransform - Anchor

Anchor を直訳すると(船の)いかりです。親に対して自身のどの点を固定するかを規定します。

X、Yは、親のどの位置を自分の座標基準にするかを表したものです。Xは0なら親の左端、1なら親の右端を基準にします。Yは0なら親の下端、1なら親の上端です。Min と Max はX方向、Y方向それぞれに2つの点を置けることを意味し、また拡大方向も示すことができます。Min と Max を別々にすると、親のサイズが変わった時に、自身もサイズ変更の影響を受けるようになります。

f:id:tomo_mana:20210204232430p:plain
Anchor

MinとMaxの設定は、大きく3種類に分かれます。Anchor を 親に対する自分のピン留めのように考えると、図の緑はピン留めが1個、オレンジは2個、ピンクは3個です。

f:id:tomo_mana:20210202080242p:plain
Anchor Preset
1点で固定(min == max)
f:id:tomo_mana:20210204224313p:plain
Anchor - 1点で固定

min と max が一致しているとき、子は親の1点に固定されます。PosX、PosY が Transform の Position(座標)の役目をします。Width、Height は四角形の大きさですが、Position に対してどっち方向に辺を展開するかは、後述する Pivot で決まります。

(Anchor Preset と XY の例)

Anchor Preset X Y
left-top 0 1
center-middle 0.5 0.5
right-bottom 1 0
2点で固定(Xmin == Xmax または Ymin == Ymax)
f:id:tomo_mana:20210204224631p:plain
Anchor - 2点で固定

少なくとも X または Y の MinとMax が一致しているとき、子は親の2点に固定されます。親が拡大縮小した時に、自分がX方向(横)に拡大縮小されるようにしたいなら、X の Min と Max を異なる値にします。同じくY方向(縦)に拡大縮小されるようにしたいなら、Y の Min と Max を異なる値にします。
X方向(横)に拡大縮小する場合、PosX/Width の代わりに Left/Right を設定します。これはピン留めした地点から自分の端(辺)までのマージンになります。Y方向(縦)に拡大縮小する場合、PosY/Height の代わりに Top/Bottom を設定します。

3点で固定(Xmin != Xmax かつ Ymin != Ymax)
f:id:tomo_mana:20210204224653p:plain
Anchor - 3点で固定

X の Min と Max、Y の Min と Max をそれぞれ別々にすると、先ほどの拡大縮小の効果をX方向(横)、Y方向(縦)の両方に適用できます。Width と Height の代わりに Left/Right、Top/Bottom を設定します。

拡大縮小設定の場合、Anchor の Min と Max、それと Left/Right、Top/Bottom の何が違うのか分からなくなる時があります。これは、特に Anchor の Min と Max に 0 と 1 以外の値を設定した時に起こります。いろいろ設定できるのですが、よほどのことがない限りは、Preset の範囲(0, 0.5, 1)で座標を設定するのが良いと思いました。

Unityのマニュアルを見ると分かった気持ちになるのですが、使ってみるとなぜか混乱します。Anchor の動きがぱっと見で分かりにくいのは、エディタ側の仕様で、Anchor Preset をクリックしても、見た目はそのまま RectTransform の座標だけを書き換えてしまうためです。

直感的に操作したい場合は、Anchor Preset を選択する時に Altキー を押します。Altキーを押しながら Anchor Preset を選択すると、RectTransformの表示位置が変わるため、Anchorの振る舞いがもう少し分かりやすくなります。

Pivot

f:id:tomo_mana:20210204235803p:plain
Pivot

width/heightを広げる方向。プラス寄りかマイナス寄りかを表します。0 なら Anchor の中心を起点としてプラス方向に(左寄せ、下寄せ)、1なら同じくマイナス方向(右寄せ、上寄せ)に、0.5なら左右上下均等に(中央寄せ)四角形を描画します。エディタのアライメントのように考えるとわかりやすいと思います。

f:id:tomo_mana:20210204234840p:plain
Pivot

こちらも(0、0.5、1)以外の値を取れますが、Anchor を熟知していない限りは左寄せ、中央、右のいずれかの指定の仕方が扱いやすいと思います。

最後に、Anchor と Pivot がそれぞれアライメントの役目を果たすので、どっちがどっちか分からなくなることがあります。Anchor は位置を決め、Pivot は拡大方向を決めます。Anchorを左にするならPivotは右側に展開するように、上にするならPivotは下側に展開するように、中央なら中央にすると使い勝手が良いと思います。


(以上)