概要
体力バー、スコア、ミニマップ、ボタン、メニュー画面など、ゲームにUI（ユーザーインターフェース）は欠かせません。Unityには、これらのUI要素を効率的に作成・管理するための強力なシステム、通称 uGUI (Unity GUI) が組み込まれています。
しかし、3DオブジェクトのTransformとは少し異なるuGUI独自の概念、特にRectTransformやAnchors（アンカー）でつまずく初心者は少なくありません。「画面サイズを変えたらUIのレイアウトが崩れてしまった」という経験は、 多くの人が通る道です。
この記事では、uGUIの最も基本的な3つの要素であるCanvas、RectTransform、そしてレスポンシブなレイアウトの鍵となるアンカーについて、その役割と関係性を詳しく解説していきます。
Canvas: UIを描画するキャンバス
すべてのUI要素は、Canvasという特別なゲームオブジェクトの子オブジェクトとして配置される必要があります。Canvasは、その名の通り、UIを描画するための「キャンバス」の役割を果たします。シーン内にUI要素（Image, Text, Buttonなど）を初めて作成すると、Unityは自動的にCanvasとEventSystemオブジェクトを生成します。
Canvasには、UIがどのように画面に描画されるかを決定するRender Modeという重要な設定があります。
- Screen Space - Overlay: 最も一般的なモード。UIはシーンの他のすべての要素の一番手前に、画面に張り付くように描画されます。2DゲームのUIや、3Dゲームのスコア表示などに使われます。
- Screen Space - Camera: 指定したカメラの前方、一定の距離にUIを描画します。UIと3Dオブジェクトの間にパーティクルエフェクトを挟みたい場合などに使います。
- World Space: UIを3D空間内のオブジェクトとして扱います。キャラクターの頭上に表示される体力バーや、VR空間内のメニューなど、3D世界と一体化したUIを作成する場合に使います。
初心者のうちは、まずデフォルトのScreen Space - Overlayに慣れることから始めましょう。
RectTransform: UIのためのTransform
通常の3DオブジェクトがTransformコンポーネントで位置、回転、スケールを管理するのに対し、UI要素は RectTransform（矩形トランスフォーム）という特殊なTransformで管理されます。
RectTransformには、Transformの機能に加えて、UIレイアウトに特化したプロパティが含まれています。
- Width / Height: UI要素の幅と高さ。
- Anchors (アンカー): 親要素（通常はCanvas）に対して、UI要素がどのように追従するかを定義する最も重要なプロパティ。
- Pivot (ピボット): UI要素自身の回転やスケーリングの中心点。通常は中央（X:0.5, Y:0.5）に設定されています。
Anchors: レイアウトの崩れを防ぐ「錨」
アンカーは、RectTransformのInspectorに表示される十字や四角形のアイコンで示され、UIレイアウトの要となる概念です。アンカーは、UI要素の四隅が、親要素（Canvas）のどの相対的な位置に固定されるかを定義する「錨（いかり）」の役割を果たします。
例えば、スマートフォンの画面は機種によって縦横の比率が異なります。アンカーを正しく設定しないと、ある機種では画面の右上に表示されていたボタンが、別の機種では 画面外にはみ出してしまう、といった問題が発生します。
アンカープリセット
Inspectorのアンカーアイコンをクリックすると、一般的なレイアウトに対応したプリセットが表示されます。これらを活用するのが基本です。
- 左上 (top-left): UI要素の位置を、親の左上からのピクセル距離で固定します。
- 中央 (middle-center): UI要素を親の中央に配置します。
- 右下 (bottom-right): UI要素の位置を、親の右下からのピクセル距離で固定します。
ストレッチ (Stretch)
アンカーの四隅が分離しているプリセット（例: top-stretch）を選ぶと、UI要素は親要素のサイズ変更に合わせて引き伸ばされるようになります。
- 左右ストレッチ (left-right-stretch): 親の幅に合わせてUI要素の幅が変化します。画面上部のヘッダーバーなどに使います。
- 上下ストレッチ (top-bottom-stretch): 親の高さに合わせてUI要素の高さが変化します。画面横のサイドバーなどに使います。
- 全方向ストレッチ (full-stretch): 親のサイズに合わせてUI要素の幅と高さの両方が変化します。背景画像などに使います。
アンカーの挙動を理解する
RectTransformのLeft, Top, Right, Bottomといったプロパティの意味は、アンカーの状態によって変わります。
- アンカーが一点にまとまっている場合:
PosX,PosYは、アンカーポイントからの相対的なピクセル位置を表します。 - アンカーが分離している（ストレッチ）場合:
Left,Rightなどは、UI要素の境界とアンカーポイントとの間のパディング（余白）を表します。
この違いを理解することが、レスポンシブなUIレイアウトをマスターする鍵です。
まとめ
UnityのuGUIシステムは非常に強力ですが、その挙動を理解するにはいくつかの重要な概念を学ぶ必要があります。
- Canvas: すべてのUI要素を配置する土台。Render Modeが描画方法を決定する。
- RectTransform: UI要素専用のTransform。幅と高さ、アンカーを持つ。
- アンカー: 様々な画面サイズに対応するための最も重要な仕組み。UI要素が親のどこに「固定」されるかを定義する。
まずは、Gameビューの解像度を色々なアスペクト比に変えながら、アンカープリセットを変えるとUI要素の挙動がどう変わるかを実験してみるのがおすすめです。アンカーを制する者は、uGUIを制します。