【Unity uGUI】Rect Transformコンポーネントを徹底解説


Rect Transformコンポーネント


今回は、すべてのuGUIの基本となるRect Transformについてです。
特にAnchorsの使い方を理解していないとuGUIは思い通りに表示されません。
Ancorについては特に詳しく解説していきます。

※使用しているUnityのバージョンは5.5.2f1です。

Rect Transformとは


Rect Transformコンポーネントは、2Dレイアウトに特化したUI要素用のTransformコンポーネントです。
UIの要素を描画する位置を矩形で表し、その矩形は親のRect Transformからの相対位置として管理されます。

プロパティの解説

WS000748

■Ancors

Ancor(アンカー)とは、錨(いかり)のことです。船が流されないようにするためのアレ。
uGUIでは転じて、UIを表示する位置のマーカーとして扱います。(4つの白い△がアンカー)

アンカーは、親要素のサイズ(ルートの場合はスクリーンサイズ)を縦1横1としたときの割合で表されます。
4つのアンカーが囲む矩形が、UIの表示位置となります。(9パッチという技術)

ここで大切なのは、「画面に対するアンカーの位置は、解像度が変わっても変化しない」ということです。
UIがマルチ解像度に対応できていことを確認するには、Gameビューを動かしてみるのが手っ取り早いです。
■UIを表示したい矩形をアンカーでしっかりと指定した場合↓

マルチ解像度に対応しています。

■位置を固定したいのに、アンカーが適切に設定されていない場合↓

解像度が落ちると、アンカーからの相対位置が画面からはみ出してしまいました。

AncorsのMinとMaxが同じ場合

UIの位置はアンカーからの相対位置(Pos X, Pos Y, Pos Z)で表されます。
また、UIのサイズはWidthとHeightで表されます。

AncorsのMinとMaxが違う場合(アンカーが矩形をつくる場合)

UIの位置とサイズは、アンカーがつくる矩形の辺々からのマージン(間隔)で表されます。
下図の場合、UIの右辺(Right)はアンカーと一致しているため0となり、底辺(Buttom)はアンカーから上に77間隔をとった位置にあることがわかります。

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

Shiftキーを押しながらプリセットを選択すると、Pivotの位置も自動で設定されます。
また、Altキーを押しながらだと、Positionが自動でアンカー位置にセットされます。

シーンビューで直接アンカーを操作する場合、Shiftキーを押しながらアンカーを動かすと、UIも一緒に動かせます。
また、アンカーの値は、インスペクターに直接入力すれば0以下や1以上にもセットすることが可能です。(D&Dスライダーでは無理)

■Pivot

Pivot(ピボット)は、要素の中心位置です。
アンカーからの相対位置や、Rotationを使った回転の基準となります。

■Rotation

要素の回転角度をx, y, z 軸ごとに設定できます。

■Scale

要素のサイズを変更できます。
しかし、見かけのサイズの変更であれば、Widthやアンカーからの相対位置の変更が基本です。
Render Mode が 「World Space」の場合に限り、他のオブジェクトとスケールを合わせるためによく利用します。

■Blueprint Mode

モードを有効にすると、要素のRotationやScaleが変更されていても、それらを無視して操作できるようになります。

■Rawedit Mode

Blueprint Modeの右側のRボタンを押すと、Rawedit Modeになります。
このモードではインスペクターからAncorsやPivotを変更してもUIの相対位置は変わりません。

↓Pivotの位置が変わっても、相対位置に変化はない。

↓Ancorの位置が変わっても、相対位置に変化はない。

以上です。

最近よく読まれている記事

【新着】Unityで主観カメラへの切り替えと、プレイヤーの移動方法について
【注目】Unityでマウスホイールでカメラの向きにドリーイン・ドリーアウトさせる
【知らないと危ない】UnityのactiveSelfとactiveInHierarchyの違いについて
【鉄板】Unityでカメラの向きを基準に移動する方法と、追従して回転できるカメラの実装

Unityの記事一覧にもどる

  • このエントリーをはてなブックマークに追加

PAGE TOP