Unity UI入門⑬ | Rect Transformを徹底解説！画面サイズが変わってもUIを正しく配置する方法

UnityでUIを作成すると、ButtonやImage、Textなどには「Transform」ではなく、Rect Transformというコンポーネントが付いています。

これまでUIを作ってきた中でも、

• Pos X

• Pos Y

• Width

• Height

などを変更して、UIの位置や大きさを調整してきました。
そのため「Rect TransformはUIの位置やサイズを決めるもの」という認識でも、基本的には間違いありません。

ただしRect Transformには、もうひとつ非常に重要な役割があります。

それが「画面サイズが変わっても、UIを正しい位置に表示する」ことです。

特にスマートフォン向けのゲームでは、端末によって画面の大きさや縦横比が異なります。
自分のスマートフォンではきれいに表示されていたのに、別のスマートフォンではボタンの位置がずれてしまった。

そんな問題を防ぐために重要なのが、Rect Transformの Anchor（アンカー）です。

今回はRect Transformの基本と、画面サイズの違いに対応するためのAnchorについて見ていきましょう。

Rect Transformとは？

UIオブジェクトを選択すると、Inspectorの一番上に「Rect Transform」が表示されます。

通常のGameObjectにはTransformコンポーネントがありますが、UIにはRect Transformが使われます。

Rect Transformでは主に、

• UIの位置

• UIの幅と高さ

• Anchor

• Pivot

• 回転

• 拡大・縮小

などを設定できます。

例えばButtonを選択すると、

Pos X
Pos Y
Width
Height

といった項目があります。

Pos X、Pos Yを変更すると位置が変わり、Width、Heightを変更するとUIの大きさが変わります。
ここまでは通常のTransformとよく似ています。

Rect Transformで特に覚えておきたいのが、Anchorです。

Anchor（アンカー）とは？

Anchorは、日本語では「いかり」という意味です。
船のいかりは、船をその場所につなぎ止めておくために使います。

UnityのUIでも似たようなイメージで、「このUIを、親オブジェクトのどこにつなぎ止めておくか」を決めるのがAnchorです。

例えば、画面の右上に設定ボタンを配置するとします。
このボタンのAnchorを右上に設定すると、画面の右上を基準にしてボタンの位置が決まります。

そのため画面の横幅が変わっても、ボタンは右上付近に表示され続けます。

見た目だけ右上に置いてもダメ？

ここがAnchorを理解するうえで重要なポイントです。

例えばButtonを画面の右上に配置したとします。
見た目としては、きちんと右上にあります。

ところが、Anchorが画面中央のままだったとします。
この場合、そのButtonは「画面中央からこれだけ離れた位置」として配置されています。

つまり、「右上に固定されている」わけではありません。
画面サイズや縦横比が変わると、画面中央の位置と画面右端との距離も変わります。
その結果、Buttonが画面の端から離れてしまうことがあります。

一方、Anchorを右上に設定しておけば、画面右上からの距離 を基準に配置できます。
そのため画面サイズが変わっても、右上に配置した状態を維持しやすくなります。

Anchor Presetsを使ってみよう

AnchorはRect Transformの左上にある、小さな四角形のボタンから簡単に変更できます。

このボタンをクリックすると、Anchor Presets が表示されます。
Anchor Presetsには、

• 左上

• 上中央

• 右上

• 左中央

• 中央

• 右中央

• 左下

• 下中央

• 右下

などがあります。例えば、

• 画面右上に配置する設定ボタンなら「右上」。

• 画面左上に表示するHPなら「左上」。

• 画面右下に配置するジャンプボタンなら「右下」。

というように選択します。

最初のうちはAnchorの数値を直接変更するよりも、Anchor Presetsから設定する方が分かりやすいでしょう。

Pos X・Pos Yはどこからの距離？

ここで覚えておきたいのが、Rect TransformにあるPos XとPos Yです。
これは単純な「画面上の座標」と考えるよりも、Anchorを基準にした位置と考えると分かりやすくなります。

例えばAnchorが中央にある状態で、Buttonを右側へ移動すると、画面中央を基準にして位置が決まります。

Anchorを右上に変更すると、今度は右上側を基準として位置が決まります。

つまりRect Transformを見るときは、Pos XやPos Yの数字だけを見るのではなく、「Anchorはどこに設定されているのか？」も一緒に確認することが重要です。

Pivot（ピボット）とは？

Rect Transformには、もうひとつ似たような設定として、Pivot（ピボット）があります。

Anchor と Pivot は名前だけ見ると少し分かりにくいですが、役割は違います。

Anchorは、親オブジェクトのどこを基準にするか を決めます。

Pivotは、UI自身のどこを基準にするか を決めます。

通常、Pivotは以下の値になっています。

• X = 0.5

• Y = 0.5

これはUI自身の中心を基準にする設定です。

例えばButtonの場合、Buttonの真ん中にPivotがあります。
Pivotは回転や拡大・縮小をするときの中心にもなります。

最初のうちは、特別な理由がなければPivotは0.5、0.5のままでも問題ありません。まずは、

Anchor＝親側の基準

Pivot＝自分側の基準

と覚えておきましょう。

Stretch（ストレッチ）とは？

Anchor Presetsを見ると、上下や左右に引き伸ばされたようなマークもあります。
これはStretchという設定です。

Stretchを使うと、UIの幅や高さを固定するのではなく、親オブジェクトのサイズに合わせて伸び縮みさせることができます。

例えば、画面全体を覆うPanelを作る場合、Panelを固定サイズで作ってしまうと、画面サイズが変わったときに余白ができる可能性があります。

そこでAnchorを上下左右へStretchさせておけば、画面サイズが変わったときにPanelも一緒に伸び縮みします。

背景やウィンドウなど、画面サイズに合わせて広げたいUIでは非常に便利です。

Anchorを変更していると、「あれ？WidthとHeightがなくなった！」となることがあります。
これはエラーではありません。

例えば左右方向にStretchすると、Rect TransformではWidthの代わりに、

Left
Right

が表示されます。

上下方向にStretchすると、Heightの代わりに、

Top
Bottom

が表示されます。
これは、「幅を何pxにするか」ではなく、「親オブジェクトの端からどれくらい離すか」でサイズを決めるようになるためです。

Rect Transformに表示される項目は、Anchorの設定によって変化することを覚えておきましょう。

Canvas ScalerとAnchorは役割が違う

以前の記事では、Canvas Scalerについて紹介しました。

Canvas Scalerも、異なる画面サイズに対応するために重要なコンポーネントです。
ただし、Canvas ScalerとAnchorは役割が違います。

Canvas Scalerは、画面サイズに合わせてUI全体の大きさを調整する、という役割があります。

一方Anchorは、それぞれのUIを画面のどこを基準に配置するのかを決めます。
つまり

• Canvas Scaler　→　 UI全体のサイズ

• Anchor　→　 各UIの基準位置

と考えると分かりやすいでしょう。

さまざまな画面サイズに対応する場合は、Canvas Scalerだけ設定すればOKというわけではありません。
Canvas ScalerとRect TransformのAnchorを組み合わせて使うことで、画面サイズや縦横比が変わってもレイアウトが崩れにくいUIを作ることができます。

今回のポイント

Rect Transformは、UIの位置やサイズを設定するためのコンポーネントです。

次回

今回はRect TransformとAnchorについて紹介しました。

次回は、UIを自動できれいに並べてくれる、

Horizontal Layout Group
Vertical Layout Group
Grid Layout Group

などの Layout Group について見ていきます。

Buttonをひとつずつ手作業で並べなくても、自動で整列できる便利な機能です。

こちらはUnity初心者向けの記事をテーマ別にまとめています。
▼ Unity初心者向け記事まとめはこちら

こちらのマガジン「ミニゲーム作成講座　全8回セット」でもシーンの切り替えなどを活用して、初心者でも知識ゼロから作れるミニゲーム作成講座を紹介しています。

さらにステップアップの「スマホで遊ぶジャンプゲーム　8回セット」のマガジンもぜひご活用ください。

ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。