UI

【UI】アンカー

はじめに

Unity UIのアンカーについて説明します。

アンカーといえば、船を固定するための錨を意味しますが、UIの文脈でも、固定を意味します。何を固定するのかといえば、Unityでは、親UIオブジェクトの基準点からの距離(オフセット)を固定します。説明だけでは、ピンとこないので実際にUnityで見ていきましょう。

Canvas上にボタンを2つ作成しました。赤ボタンが親オブジェクト、青ボタンが赤ボタンの子オブジェクトにしました。青ボタンを選択すると、4つ場のクローバーのような中抜き三角形が4つ中心に表示されています。この各三角形1つ1つがアンカーポイントであり、基準点を表しています。以下、基準点をアンカーポイントとして説明します。

アンカーは 親UIオブジェクトの基準点からの距離を固定 すると説明しました。

丁寧に見ていきます。 青ボタンの親UIオブジェクトは赤ボタンであり、 赤ボタン の基準点 は、青ボタン 側で設定したアンカーポイントを意味します。デフォルトでは、アンカーポイントは 親オブジェクト の真ん中に設定されています。 アンカーポイントは、矩形の各頂点と対応するため4つ存在しています。ここでは、左上の頂点を見てみますが、左上の頂点と左上に対応するアンカーポイントの距離は画像の赤線になります。この赤線の距離が固定されます。(*他の頂点も同様に対応する基準点と距離が固定されます。)

さて、ここで、赤ボタンをスケールさせると、青ボタンはどうなるでしょうか。

赤ボタンをスケールさせました。

アンカーポイント は親オブジェクトの真ん中に設定しているため、赤ボタンのスケールに合わせて アンカーポイントも移動しています。そのアンカーポイントから固定された距離に青ボタンの各頂点が置かれるため、青ボタンもスケールに合わせて移動しつつ、大きさは変わらないという結果になっています。

では、もう1つ見てみましょう。

青ボタンの左下と右下に対応するアンカーポイントを赤ボタンの底に設定しました。

イメージとして、固定される各距離を赤線で示しました。

先ほどと同様に赤ボタンをスケールさせてみます。

青ボタンの上の2頂点は、赤ボタンの真ん中からの距離を維持しています。一方で、下の2頂点は、赤ボタンの底からの距離を維持しています。結果として、青ボタンが縦に引き伸ばされる形となりました。

アンカーポイントは、RectTransformコンポーネントのインスペクタ上にあるAnchoresプロパティのmin, maxで設定できます。

が、より直観的に設定できるようにプリセットがUnityでは用意されています。

赤枠をクリックすると、プリセットが表示されます。

表示されたプリセットをクリックすると、アンカーポイントが変更されます。

アンカーポイントの働きとしては、既に説明した通りのため、各プリセットの説明は割愛します。

端末毎の解像度に合わせる際やアニメーションとしてUIをスケールさせることはあると思います。その際に、子のUIオブジェクトが親のUIオブジェクトに対してどのように変化するのが適切かアンカーでしっかり制御しましょう。

Pocket