アンカー

アンカーを使用して設定し、さまざまなスクリーン サイズとアスペクト比に基づいて UI ウィジェットを固定位置で保持する方法について説明します。

アンカー を使用すると、[Canvas Panel (キャンバス パネル)] で UI ウィジェットの位置を設定することができます。アンカーでは、さまざまなスクリーン サイズおよびアスペクト比に基づいた設定をサポートしています。

Minimum (最小値) (X,Y) および Maximum (最大値) (X,Y) アンカー パラメータとオフセット パラメータによって、各ウィジェットの位置が決定されます。

ウィジェットの位置は、複数のアンカー プリセットから選択したり、Minimum (X,Y) パラメータ、Maximum (X,Y) パラメータで手動で設定できます (ここで、Min (0,0) および Max (0,0) がキャンバス パネルの左上を決定し、Min (1,1) および Max (1,1) が右下を決定します)。それぞれのアンカー プリセットは、一連のオフセット パラメータが異なります。

アンカーの仕組み

メダル形状のアンカー はキャンバス パネルでのアンカーの位置を示しています。下の画像では、このアンカーは、黄色いボックスで示されています。

AnchorMedallion.png

次の画像は、キャンバス パネルに配置された Image ウィジェット を示しています。このためには、[Palette (パレット)] パネル から キャンバス パネル画像 をドラッグする必要があります。アンカーのデフォルト設定 (左上の位置) を使用します。

黄色の横線は、ボタンの X 軸のオフセットです。この横線は、メダル形状のアンカーから画像までの X 方向の距離 (スレート ユニット) を決定します。

黄色の縦線は、ボタンの Y 軸のオフセットです。この縦線は、メダル形状のアンカーから画像までの Y 方向の距離 (スレート ユニット) を決定します。

オフセット パラメータはキャンバス パネルのサイズに基づいており、サイズ変更に対応します。

Button1.png

このグラフの [Screen Size (スクリーン サイズ)] ボタンをクリックすると、現在使用しているサイズを変更することができます。このボタンは、異なるスクリーン サイズやアスペクト比を使用して UI ウィジェットのレイアウトをテストし、適宜調整する際に役立ちます。

ウィジェットのアンカー パラメータとオフセット パラメータを設定するときは、デバイスのスクリーン サイズとアスペクト比の違いを考慮することが重要です。ウィジェットがビューポートからはみ出さないようにする必要があります。スクリーン サイズに対してアンカーの設定が適切でない場合にウィジェットがはみ出すことがあります。

次の画像は、ウィジェットがはみ出している状態を示しています。黄色いボックスが、アンカー ポイントの位置を示しています。画像がビューポートからはみ出しています。

InGameButton1.png

アンカーの位置を右下に設定します。

Button2.png

この設定により、トリミングのが回避され、画像がビューポート内に配置されます。次の画像は、ウィジェットがビューポート内に配置されている状態を示しています。黄色いボックスが、アンカー ポイントの位置を示しています。

InGameButton2.png

この例は、アンカーが、アスペクト比に応じて、ビューポートでのウィジェットの位置に影響を与えることを示しています。また、メダル形状のアンカーを複数のコンポーネントに分割することもできます。これにより、より多くのオフセット オプションを設定して、異なるスクリーン サイズやアスペクト比を使用してウィジェットの表示をカスタマイズできます (詳細については、「手動アンカー」セクションを参照)。

プリセット アンカー

プリセット アンカーは、ウィジェットのアンカー ポイント設定で最もよく使用される方法です。プリセット アンカーを使用すると、UI ウィジェットの位置設定に伴うほとんどのニーズに対応できます。

[Details (詳細)] パネルにある [Anchors (アンカー)] ドロップダウン ウィンドウからプリセットを選択します。各プリセットで、アンカー ポイントの位置が決定されます。銀色のボックスは、この位置を表しています。

PresetAnchor.png

たとえば、必要とするウィジェットに、Center/Center (中央/中央) プリセット アンカー オプションを選択することができます。

CenterCenter.png

また、メダル形状のアンカーを複数のコンポーネントに分割する場合は、プリセットでその引き延ばし方法を選択することもできます。

HorizontalStretch.png

VerticalStretch.png

StretchBoth.png

水平方向の引き延ばし

垂直方向の引き延ばし

両方向の引き延ばし

これを使用すると、スクリーン サイズに基づいて、ビューポートに沿ってウィジェットを引き延ばすことができるように設定できます。

次の画像は、ウィジェットのアンカーをキャンバス パネルの下側に沿って引き延ばすプリセットを示しています。

ProgressBar3.png

この場合、メダル形状のアンカーの引き延ばしは、このアンカーを 2 つに分割することを意味します。

ピンの 1 つをドラッグすると、メダル形状のアンカーを分割できます。

前述のアンカー設定を使用した進捗バーは、ゲーム プロセスでは次のように表示されます。

ProgressBar4.png

他のアスペクト比のビューポートを使用した場合は、次のように表示されます。

ProgressBar5.png

手動アンカー

アンカーを手動で設定する必要がある場合があります。手動によるアンカー設定は、複数のウィジェットを相互に固定する必要がある場合などに役立ちます。

次の画像では、Progress Bar ウィジェットの横に Image ウィジェットを配置しています。どちらのウィジェットも別のキャンバス パネル上に配置されているキャンバス パネル内にあります。

Manual1.png

Progress Bar ウィジェットとImage ウィジェットは、キャンバス パネルの左上にそれぞれのアンカーがあります。

Manual2.png

次に、キャンバス パネル、ウィジェット、およびそれらの位置の間でサイズに応じて相互に均等に調整するプロセスについて説明します。

キャンバス パネルの縦方向に引き延ばされる進捗バーを設定し、右側からの距離を固定します。このためには、アンカーを次のように設定します。進捗バーのメダル形状のアンカーを進捗バーの左側の中央に移動させて、左側の中央のピンをドラッグしてメダル形状のアンカーを分割します。

Manual3.png

この設定により、キャンバス パネルと進捗バーが水平方向に相互に均等に配置されます。また、右側同士の距離も一定になります。

Manual4.png

次に、キャンバス パネル内の Image ウィジェットの位置を固定し、Image ウィジェットと Progress Bar ウィジェットの距離を固定します。

画像のメダル形状のアンカーを進捗バーの左上に移動させます。

Manual5.png

この設定により、キャンバス パネルのサイズ変更とともに画像が移動します。画像と進捗バーの間の距離は固定されています。

Manual6.png

画像とキャンバス パネルの右端の間の距離を固定の距離に設定します。これで、キャンバス パネルのサイズ変更に合わせて生じる画像のトリミングを回避できます。

Manual7.png

画像のメダル形状のアンカーを次の図のように移動して分割します。

Manual8.png

この設定により、画像の位置が水平方向に固定されます。また、キャンバス パネルと画像は水平方向に相互に均等に配置されます。

Manual9.png

次のステップでは、Image ウィジェットの位置を縦方向で固定します。これにより、進捗バーを基準とした画像のずれを回避することができます。

Manual9b.png

メダル形状のアンカーを図のように設定することで、進捗バーの X および Y 方向の位置に基づいて、画像の位置を固定します。

Manual10.png

これで、キャンバス パネル、進捗バー、画像が、どの方向においてもサイズに基づいて相互に均等に配置されました。また、各アイテムの位置は固定されています。