Unity UIデザイン Anchorでオフセットを固定する

アイキャッチ 使い方

UIが持っている Rect Transform コンポーネントには Anchor というレイアウトの機能があります。

親子関係にあるUI要素は、Anchor を使うことで親オブジェクトのサイズ変更があっても、

子オブジェクトの位置を固定させることができます。

今回は Rect Transform の Anchor(アンカー) の使い方を解説します。

これを覚えておくと、UI要素のサイズ変更時などに起こるレイアウトの崩れを防ぐことができます。

それでは、以下、解説。

Anchor の役割

Anchor は、親オブジェクトのどの位置に固定するかを設定する機能です。

アンカーは 4 つの小さな三角形のハンドルとして、シーンビューに表示されます。

アンカーハンドル

このハンドルをドラッグしてアンカーを設定することも出来ますし、

インスペクターから設定することも出来ます。

アンカー

位置を固定する

デフォルトでは、子オブジェクトのアンカーは、親オブジェクトの中心に設定されています。

このままサイズ変更した場合、親オブジェクトの中心からの固定オフセットを維持します。

中心アンカー

これを親オブジェクトの左上に固定してみます。

今度は、左上からの固定オフセットを維持するようになりました。

左上アンカー

このような形で、親オブジェクトの特定の位置に固定することができます。

サイズを引き延ばす

4つのアンカーを別々の位置に設定することによって、対応する角を異なるオフセットで固定できます。

これにより、親オブジェクトのサイズに合わせて、子オブジェクトのサイズが引き延ばされるようになります。

ストレッチアンカー
ストレッチアンカー2

複数解像度への対応

複数解像度への対応は、アンカーの設定も必要ですが、Canvas Scaler を使った方が良いです。

UI Scale Mode を Scale With Screen Size にして UI要素全体がスクリーンサイズに合わせて

スケーリングされるようにしておいて、微調整はアンカーで行うのが良いかと思います。

 



コメント

タイトルとURLをコピーしました