ゲーム化!tomo_manaのブログ

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

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

Unity学習#26-4 RectTransformのAnchorとPivot (Unity 2019.4.4f1)

f:id:tomo_mana:20220112204932p:plain

Unity の UIに使用する RectTransform の Anchor と Pivot が分かりにくいので、まとめ記事を作りました。

RectTransform について

RectTransform は Transform と同じく座標と親子関係を保持するデータで、必ず親より子が前に表示されます。

f:id:tomo_mana:20220112195934p:plain
Hierarchy と RectTransform

Transformと違って、Z座標は無視されます(→RectTransformの重なり順に関する過去記事)。


以下、RectTransform の親を灰色、子を赤の四角で示します。

Anchor

Anchor は親オブジェクトに対して子オブジェクトをどこに配置するかを決める変数です。0~1で指定します。

f:id:tomo_mana:20220112193510p:plain
Anchorの座標と設定例


図では省略していますが、実際のAnchorはminとmaxの2つがあると思います。上の図は、minとmaxを同じ値に設定した場合をあらわしています。

f:id:tomo_mana:20220112202434p:plain
Anchor の min と max

Pivot

Pivot はオブジェクトの拡大方向(正確には起点)をあらわす変数です。0~1で指定します。

f:id:tomo_mana:20220112193549p:plain
Pivot の指定方法と設定例

少し分かりにくいですが、以下のような動きをします。
●Xが0なら左を起点にしますので、拡大方向は右になります。
●Yが0なら下を起点にしますので、拡大方向は上になります。

f:id:tomo_mana:20220112203657p:plain
Pivot の起点と拡大方向

設定例

いくつか設定例を示します。

Word や Excel のように 横方向なら「Right/Left/Center」、縦方向なら「Top/Middle/Bottom」のように設定できると分かりやすいのですが、Anchor と Pivot で表現すると以下のようになります。

例1:上下左右に寄せる(アライメント)

f:id:tomo_mana:20220112201141p:plain
寄せる(アライメント)

例2:親のサイズに合わせる(ストレッチ)

Anchor の min と max を変えることによって、親のサイズに合わせることができます。

f:id:tomo_mana:20220112204450p:plain
親に合わせる(ストレッチ)


関連
以前の記事。今回の記事をもう少し深堀した内容になっています。
tomo-mana.hatenablog.com


(以上)