渋谷ほととぎす通信

「Unityをわかりやすく」初心者のためのゲーム作りブログ

【Unity】ピボットを知らないとUIレイアウトは不可能

【Unity】ピボットを知らないとUIレイアウトは不可能

こんにちは、Unityエンジニアのオオバです。

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

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

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

  • ピボット : 9種類
  • アンカー : 16種類

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

そこで、この記事ではわかりやすく必要最低限の項目にしぼりこみました。

  • ピボット : 9種類 → 3種類
  • アンカー : 16種類 → 3種類

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

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

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

ピボットはUI自身の基準点

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

ピボットはUI自身の基準点
  • ①ピボットはUI自体の基準点 ②座標(0
  • 0)のときアンカーとピボットは一致 ③X : 0で左基準、Y : 0で下基準 ④X : 1で右基準、Y : 1で上基準

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

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

どうしてもUIが思い通りにいかないときはこちらの記事もおすすめです。

👉DOTweenの教科書を読んでUnityアニメーションをプログラミングしてみよう!

ピボットとは?

最初にピボット自身について理解しましょう。結論から言うと、 ピボット(Pivot)とはUI自身の基準点 です。またピボットはRectTransformの機能です。

【Unity】ピボットを知らないとUIレイアウトは不可能_0

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

中央ピボット左上ピボット右下ピボット右中央ピボット
【Unity】ピボットを知らないとUIレイアウトは不可能_1
【Unity】ピボットを知らないとUIレイアウトは不可能_1
【Unity】ピボットを知らないとUIレイアウトは不可能_1
【Unity】ピボットを知らないとUIレイアウトは不可能_1
【Unity】ピボットを知らないとUIレイアウトは不可能_2
【Unity】ピボットを知らないとUIレイアウトは不可能_2
【Unity】ピボットを知らないとUIレイアウトは不可能_2
【Unity】ピボットを知らないとUIレイアウトは不可能_2
中央が基準点左上が基準点右下が基準点右中央が基準点

上の表はピボットの場所と、それを指定するピボットの値の関係です。基準点とは自分自身の座標を(0, 0)にしたときが向かう場所のことを指します。

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

結論から話すと、 座標(0, 0)のとき「ピボットはアンカーと一致」 します。

【Unity】ピボットを知らないとUIレイアウトは不可能_3

サンプルとして、このブログでよく登場するアセットGUI PRO Kit - Casual Gameの画像を配置してみます。アンカーとピボットをそれぞれ編集して関係性を理解しましょう。

【Unity】ピボットを知らないとUIレイアウトは不可能_4

  • ① : アンカー → 画面の中心
  • ② : 座標 → (X:100, Y:200)
  • ③ : ピボット → 左上(X:0, Y:1)

【Unity】ピボットを知らないとUIレイアウトは不可能_5

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

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

【Unity】ピボットを知らないとUIレイアウトは不可能_6

  • ① : アンカー → 画面の中心 ※変更なし
  • ② : 座標 → (X:0, Y:0)
  • ③ : ピボット → (X:0, Y:1) ※変更なし

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

【Unity】ピボットを知らないとUIレイアウトは不可能_7

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

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

【Unity】ピボットを知らないとUIレイアウトは不可能_8

  • ① : アンカー → 画面の左上
  • ② : 座標 → (X:0, Y:0) ※変更なし
  • ③ : ピボット → (X:0, Y:1) ※変更なし

【Unity】ピボットを知らないとUIレイアウトは不可能_9

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

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

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

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

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

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

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

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

【Unity】ピボットを知らないとUIレイアウトは不可能_10

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

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

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

【Unity】ピボットを知らないとUIレイアウトは不可能_11

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

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

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

【Unity】ピボットを知らないとUIレイアウトは不可能_12

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

この3種類のピボットさえ覚えておけば 残りは応用 です。残りの6種類を掲載しておきますが覚えてなくても大丈夫です。

【Unity】ピボットを知らないとUIレイアウトは不可能_13

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

Unity UIピボットのまとめ

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

Unity UIピボットのまとめ

①ピボットはUI自体の基準点

②座標が「0」のときアンカーとピボットは一致

③中心、左下、右上この3ピボットを覚えておけばOK

④残りのピボットは応用でなんとかなる

こんな感じです。

ここまで読んでも 「まだアンカーとピボットがよくわからない」 という方もいらっしゃると思います。アンカーとピボットこの2つの概念はややこしいですよね。

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

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

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

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

次の記事ではUnityでスマホ向けUIの作り方を解説しています。基本的なUIの作り方から本格的な複数解像度対応までを紹介。 全体を通してUIづくりをマスターできるようになっています。 本記事とあわせて読んでみてください。

「Unity初心者大学」というUnity初心者向けのYouTube始めました!!
ぜひチャンネル登録をお願いします!

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

オススメ記事
検証環境
  • Unity2020.3.19f1