BLOG ブログ

ENTRY

お申し込みはこちら

【Unity】図解でわかるRectTransformのアンカーとピボット

アンカーとピボット

 UnityのUIはレイアウトが細かく設定できるが、反面細かすぎて慣れないうちは思い通りに見せることが難しい。この記事ではUIレイアウトの要であるRectTransfromとその重要な設定項目であるanker【アンカー】とpivot【ピボット】についてなるべく噛み砕いて図解していく。
 ちなみにざっくりと言ってしまうと上図の通り。
 また、その他のUnityに関する記事は【Unity】サイト内Tips記事リンクまとめにまとめてある。

RectTransfromの基本

RectTransform基本
まず基本状態のそれぞれのパラメータを色分けした。
今回はわかりやすいようにボタンオブジェクトを例にしていく。
ちなみにUIの編集はSceneウィンドウよりGameウィンドウを見ることを推奨する。

位置座標(PosXとPosY)

(100,0)にすると
PosXとPosYはそれぞれ縦横の表示位置。
XとYそれぞれ大きくなるほど右へ上へと移動する。
マイナスを指定すれば左へ下へと移動する。
Zは基本的に意識しなくてよい。

Width(ワイド)とHeight(ハイト)

Widthを大きくすると
WidthとHeightは表示するエリアのサイズ。
ここではボタンの大きさを指定できる。
注意点としてテキストを表示したい場合、このエリアがフォントサイズより小さいと基本的には表示されなくなってしまう。

Anchor(アンカー)

アンカーのプリセット
さて、デフォルトの状態では画面原点からのピクセル値でしか位置を指定できないが例えば
「常に画面底辺から一定の距離にボタンを置きたい」
という場合が出てくる。
開発中のテストプレイで原点から適切に距離を指定しても、画面のサイズが変わってしまうと底辺からの距離は変わってしまう。

こういう場合実は画面の原点の位置を変更することができる。
詳細な変更については後述するとして、まずはよく使われるプリセットを利用するとよい。
RectTransformコンポーネントの各パラメータより左側にアイコンを押すと24パターンのプリセットが選べるポップが出てくる。
縦横の赤い線がXYの軸、オレンジの点が座標の原点だ。

座標の原点をずらすと

アンカーをズラすと
試しにcenter,bottom(中央下)のプリセットを読み込んでみた。
XY座標の指定方法自体は変わらないので、Y座標の数値だけを増やせば画面下からの距離で指定できる。
このように画像やテキストを「どこを原点として」表示させるかを個別に指定できるのがAnker(アンカー)だ。

Pivot(ピボット)

ピボットのプリセット
先程アンカーのプリセットを選ぶポップでShiftキーを押すと水色の点が表示される。
これは表示させたい画像やボタンの中心を同時に変更したい場合に使う。

原点と中心をずらす

原点と中心をずらす
レイアウトデザインでは多くの場合余白を入れる。
例えば、「常に画面右下に一定の余白を置いて表示させたい」という場合。
ボタンの中央からの距離指定ではボタンのサイズを変更した際に再度余白となるスペースを調整し直す必要がある。
シンプルに余白の数値を設定できればスムーズである。

ここで使えるのがボタンの中心の変更だ。
上の例ではボタンの中心(水色の点)が左下になるプリセットを選んだ。
これでボタンの大きさが変わっても常に一定の余白を置いて表示することができる。
この画像の中心となる水色の点がPivot(ピボット)だ。

アンカーとピボット

さて、細かくこだわらない限りここまでに述べたプリセットを利用すれば簡単なUIは作ることができる。
ここから先はプリセットより1歩踏み込んだ詳細設定に関する話だ。

アンカーの指定方法

アンカーの指定方法
まずデフォルト状態のアンカーを見ていこう。
XとYがぞれぞれ(0.5,0.5)となっている。

《今はMaxとMinについて考えてはいけない》

この0.5が何を意味しているかというと、基準とするCanvas(この記事の例では画面全体)の端から端までを0~1としたときの位置を表している。
例えばXなら左端が0、右端が1といった具合だ。
Yについても同様である。

ピボットの指定方法

ピボットの指定方法
次にピボットだが0.5という数値の意味するところはアンカーと同じだ。
自身(この記事ではボタン)の右端が0、左端が1となる。
無論(0.5,0.5)とすればボタンの中央になる。

まとめ

アンカーとピボット
ここまでの話を一旦まとめると、
「アンカーは画面の原点」
「ピボットは画像の中心」
と覚えておけばよい。
勿論完璧に適切な表現ではない。

ではどこを原点にしてどこを中心にするのがいいのか?
コツとしては一旦紙に描くと整理しやすい。
テストプレイ画面で数値ばかり調整していると画面比率やサイズが変わったとき、どこの距離を優先させてレイアウトしたいかをイメージしづらい。
優先したい距離を見定めそれを元にアンカーとピボットを決めていくことを推奨する。

ストレッチ

ストレッチプリセット
さて、察しのいい人は「なぜアンカーのパラメータが4つあるのか」気になる頃合いだろう。
これにはstretch(ストレッチ)というプリセットが大きく関係してくる。

ストレッチは水色の矢印のついたプリセットのことだ。
これは画面のサイズやアスペクト比に自動的に対応させるときにとても重要な役割を果たす。

ストレッチの指定方法

ストレッチの指定方法
試しに上下のストレッチプリセットを例に見ていこう。
デフォルトではMinとMaxが(0,1)だ。
コンポーネント上部の4つのパラメータ(Right,Top,Left,Bottom)をすべて0に戻そう。
すると画面全体をボタンが覆ってしまう。
これを(0.2,1)に変更すると、ボタンを表示できる下限のラインが画面全体の20%あたりになった。
下端から上端を0~1で表しているのは前述と変わらない。

つまりピクセル値で位置とサイズを指定するのではなく、画面の比率で指定するのがストレッチだ。
そしてその指定のためにXYそれぞれのMinとMaxが必要になるのだ。

ストレッチのメリット

ストレッチのメリット
タイトルロゴを表示させる例を上図で示す。
PCでもスマホでもおおよそ同じレイアウトで表示できることがわかるはずだ。
無論ストレッチも万能ではないので使うべきかどうかは見極めていく必要はある。
しかしここまでの内容を理解できていれば概ね思い描いたとおりにレイアウトができるはずだ。

おまけ

ポビットと回転
余談だがスプライト画像やテキストの回転はピボットを中心に回る。
至極当たり前でUIレイアウトではあまり意識しないかもしれない。
2Dスプライトでアニメーションを設定したいときには非常に重要になってくるので触れておいた。

CONTACT お問い合わせ

無料体験授業は随時開催しています。
ご希望やご質問など、お気軽にお寄せください。