こんにちわ、オオバです。

UnityでUIレイアウトするとき外せないのが、
「ピボット」「アンカー」

聞いたことはあるという人もいるでしょう。
この2つの関係性を理解していないと
意図したUIレイアウトはできません。

ただ、ややこしくて分かりづらいんですよね。

9 × 16 = 144パターン
多すぎじゃない?(笑)
ちょっと避けたくなる数です。。。

そこで、この記事ではわかりやすく絞ってみました。

3 × 3で 合計9種類 です。
144種類 → 9種類 に減ってだいぶ 現実的な数値 になりましたね。
(残りは応用でどうにかなります)

この記事では3種類のピボットをわかりやすく解説していきます。
さきの 144パターンを覚えているUIデザイナーはまだ少ない と思います。
今のうちにマスターして差をつけていきましょう。

アンカーについては 「16種類のうち3種類覚えたら大丈夫」
という記事を先日リリースしました。ぜひあわせて読んでみてください。

座標(0, 0)のときアンカーとピボットは一致する

結論を簡単にまとめます。

重要なのは、
座標(0, 0)のときアンカーとピボットは一致する です。

ピボットはアンカーと並んでUnity UI (以下:uGUI) の要。
ピボットの意味を正しく理解して
思い通りのUIレイアウトができるようになりましょう。

この記事の内容

UIの基準点(ピボット)とアンカーの関係を理解する

座標(0, 0)のときピボットはアンカーと一致 します。

ピボット(Pivot)とはRectTransformの機能です。

【Unity】知らないとヤバい!「ピボット」はUIレイアウトの要_0

XとYにそれぞれ値をセットして、
UIの基準点(ピボット) を指定します。

【Unity】知らないとヤバい!「ピボット」はUIレイアウトの要_1

サンプルとして、このブログでよく登場するアセット
👆GUI PRO Kit - Casual Gameの画像を配置してみます。

アンカーとピボットをそれぞれ編集 して関係性を理解しましょう。

【Unity】知らないとヤバい!「ピボット」はUIレイアウトの要_2

【Unity】知らないとヤバい!「ピボット」はUIレイアウトの要_3

このように中心アンカーから、
(X:100, Y:200)の位置に配置されました。
水色のバツマークはUIの基準点(ピボット)
ピンクのバツマークがアンカーです。

では座標(0, 0)に変えてみます。

【Unity】知らないとヤバい!「ピボット」はUIレイアウトの要_4

この条件の場合どう配置されるでしょうか。

【Unity】知らないとヤバい!「ピボット」はUIレイアウトの要_5

このように アンカーとピボットが一致した座標に配置 されます。


もう1パターンいきましょう。
ピボットはそのまま、アンカーを中心 → 左上に変更してみます。

【Unity】知らないとヤバい!「ピボット」はUIレイアウトの要_6

【Unity】知らないとヤバい!「ピボット」はUIレイアウトの要_7

左上のアンカーに対して、
ピボットが一致する座標に配置されます。

なんとなく分かってきたのではないでしょうか。
つまり 座標(0, 0)のとき、アンカーとピボットは重なる のです。

覚えるべき3つのピボット

なんとなくピボットとアンカーが分かってきたところで、
本題の覚えるべき3つのピボットの紹介。

結論、覚えるのは次の3つです。

  1. 中心ピボット
  2. 左下ピボット
  3. 右上ピボット

その1. 中心ピボット(X:0.5, Y:0.5)※デフォルト

ピボット X:0.5、Y:0.5のとき(デフォルト状態)

【Unity】知らないとヤバい!「ピボット」はUIレイアウトの要_8

X、Y共に0.5のときはのときは中心が基準点(ピボット)です。

その2. 左下ピボット(X:0, Y:0)

ピボット X:0、Y:0のとき

【Unity】知らないとヤバい!「ピボット」はUIレイアウトの要_9

X、Y共に0のときはのときは左下が基準点(ピボット)。

その3. 右上ピボット(X:1, Y:1)

ピボット X:1、Y:1のとき

【Unity】知らないとヤバい!「ピボット」はUIレイアウトの要_10

X、Y共に1のときはのときは右上が基準点(ピボット)となります。

この3種類のピボットさえ覚えておけば 残りは応用 です。

残りの6種類を掲載。
※覚えてなくても大丈夫です。

【Unity】知らないとヤバい!「ピボット」はUIレイアウトの要_11

3種類覚えておけば、
残りのピボットは値を変化させるだけなのです。

まとめ : ピボットはUI自体の基準点

記事の内容を簡単にまとめます。

こんな感じです。

ここまで読んでも、
「まだアンカーとピボットがよくわからない」
という方もいらっしゃると思います。

アンカーとピボットこの2つの概念はややこしいですよね。

とりあえず、👇これだけ覚えておきましょう。
「座標(0, 0)のときアンカーとピボットは一致する」

あとは とにかく手を動かすのみ
実際にUnityでUIを配置してみることをオススメします。

これからもアンカーとピボットについて、
みなさんの参考になりそうな記事を書いていきます。

ぜひともアンカーとピボットをマスターして
思い通りにUI配置できるようになりましょう。


フォローすると UIデザイナー力の上がるTwitter やってます!
今日から使えるテクニックを発信中。
ぜひフォローしてみてください!
👉フォローはこちら!

最後まで読んでいただきありがとうございました!
すばらしいUnityライフをお過ごしください。

オススメ記事
検証環境