Unity ソフトウエアでゲーム制作#1モグラたたき編（20.パネルとアンカープリセット）

本記事のポイント

• UIのPanelを設置する
• アンカープリセットへの理解を深める

RectTransformのざっくり解説

• RectTransformコンポーネントは親に配置された4つのアンカー（Anchor）とそれに対応する子の4つの角のオフセット（どの方向にどれだけ離れているか）の関係で親オブジェクトに子オブジェクトを配置している。
• RectTransformのイメージは壁に（親のオブジェクト）に固定具から出たひも（オフセット）で画（子のオブジェクト）を飾るイメージ。
• アンカー（Anchor）の元の意味は「錨」とか「固定具」。壁（親オブジェクト）に4つの固定具（位置の基準となる点）を設定します。シーンでは白線の三角で表示されています。位置はシーン上でドラッグするか、インスペクターで設定できます。
• アンカーの位置は親オブジェクトの大きさの割合で、X方向の最大最小、Y方向の最大最小の組合せで主に4パターン。①4つが同じ位置にある1点パターン、②X方向で2つが重なる2点パターン、③②のY方向パターン、④4つが矩形に配置された4点パターン
• 2つ（もしくは4つ）重なったアンカーは重なり方向のオフセットを子オブジェクトのピボットの位置で参照する
• Pivot（ピボット）とは元の意味は「枢軸」「回転軸」。これはピボットモードの時に回転の軸になるポイントのためです。ピボットの位置はRectTransformのサイズやスケールの基準点にもなります。
• 少しわかりづらいですがインスペクターでみてみましょう。
• まずはPivotを見てみます。ピボットをX「0.5」、Y「0.5」（中心）に設定します。
• インスペクターで幅と高さを変更します。変化がピボットを基準に起きてると思います。
• 次にアンカーを見ていきます。
• アンカーを最小　X「0.9」Y「0.9」最大X「0.9」Y「0.9」（すべて重なる1点パターン）にするとオブジェクトはアンカーからピボットまでのX方向／Y方向の位置とそれぞれの方向にあたる高さと幅で設定される
• アンカーを最小　X「0.1」Y「0.1」最大X「0.1」Y「0.9」（X方向で重なる2点パターン・アンカーが垂直に分離されているパターン）にするとアンカーからピボットまでのX方向の位置と幅、Y方向にあたるアンカーから上下までの余白（パディング）で設定される。
• アンカーを最小　X「0.1」Y「0.1」最大X「0.9」Y「0.1」（Y方向で重なる2点パターン・アンカーが水平に分離されているパターン）にするとアンカーからピボットまでのY方向の位置と高さ、X方向にあたるアンカーから左右までの余白で設定される。
• アンカーを最小　X「0.1」Y「0.1」最大X「0.9」Y「0.9」（４点パターン）にするとX方向にあたるアンカーから左右までの余白と、Y方向にあたるアンカーから上下までの余白で設定される。

まとめ

• アンカープリセットはUIを実装するうえでの必須級の項目。ポイントを押さえて使いながら覚えてしまいましょう。