Language:
Page Info
Engine Version:

アンカー

アンカー を使用して キャンバス パネル 上で UI ウィジェットの望ましい位置を定義し、様々な画面サイズでその位置を維持します。アンカーは Min(0,0) および Max(0,0) が左上隅で、Min(1,1) および Max(1,1) が右下隅になるように標準化されます。

キャンバス パネルを用意し、他の UI ウィジェットを追加したら、数多くあるプリセットされたアンカー位置から選択するか (ウィジェットを特定の位置のみに維持したい場合は、これらのうちのひとつを選択すれば十分です)、またはアンカー位置および Min/Max 設定やオフセットの適用を手動設定できます。

アンカーの仕組み

以下の黄色のボックス内は、メダル形状のアンカー です。これは、キャンバス パネル上でのアンカー位置を表します。

AnchorMedallion.png

以下の画像ではキャンバス パネルにボタンを配置し、アンカーをデフォルト位置のままにしました (左上)。

Button1.png

上の画面の黄色の垂直な線は、キャンバス サイズに基づきビューポートの左上から開始し、 Y 軸に沿ってアンカーからどの程度移動するかをボタンに指示します。黄色の水平な線は、キャンバス サイズに基づきビューポートの左上から開始し、 X 軸に沿ってアンカーからどの程度移動するかをボタンに指示します。ウィンドウの左下隅 (黄色いボックス内) では、作業するキャンバスの Screen Size (画面サイズ) を見ることができます。

グラフ内で [画面サイズ] ボタンをクリックして現在使用されているサイズを変更します。様々な画面サイズやアスペクト比で UI ウィジェットがどのように見えるかをチェックし調整するのは良い習慣です。

ゲーム内で再生すると、ビューポートのサイズに応じて以下のように表示されます。この場合、黄色いボックスはアンカーポイントを表します。

InGameButton1.png

ビューポート サイズに応じてボタンは画面から移動します。

アンカーを代わりに右下に移動すると以下のようになります。

Button2.png

その後、同じビューポート サイズでゲーム内でもう一度再生します。

InGameButton2.png

右下 (黄色いボックス) でのアンカーの位置が原因で画面からトリミングされることを避けるためにボタンは移動されています。

この例では、アンカー位置の定義方法と画面サイズに応じてその位置がウィジェットの位置にどのように影響を及ぼすかを定義する方法を図示しています。メダル形状のアンカーを「分けて」、ウィジェットを様々な画面サイズに対応させるオプションを増やすこともできます (詳しい情報は、手動アンカー のセクションをご覧ください)。

プリセット アンカー

キャンバス パネル に UI ウィジェットを配置した状態でウィジェットの [詳細] パネルからプリセット アンカーを選択できます。

PresetAnchor.png

おそらくこれがウィジェットのアンカー ポイントを設定する最も一般的な方法であり、ほとんどのニーズを満たすはずです。シルバーのボックスはアンカー ポイントを示し、選択するとメダル形状のアンカーをその位置に移動します。そのため、例えばあるものを常に画面中央に配置したい場合、ウィジェットをキャンバス パネル中央に配置した後、センター/センターのプリセット オプションを選択します。

CenterCenter.png

また、以下のプリセット ストレッチング方法から選択することもできます。

HorizontalStretch.png

VerticalStretch.png

StretchBoth.png

水平ストレッチ

垂直ストレッチ

水平、垂直の両方をストレッチ

これはビューポート サイズに沿って何かをストレッチしたい場合に役立ちます (以下を参照)。

ここでは、キャンバスの下部に沿ってアンカーを水平にストレッチして配置することを選択しました。

ProgressBar3.png

このストレッチは、メダル形状のアンカーが 1 つではなく 2 つの部分に分割されることで反映されます。

ひとつのピンの上で引っ張ることでメダルを分けることができます。

ここでゲーム内で再生する場合、進捗バーは以下のように見えます (標準)。

ProgressBar4.png

異なるビューポートを使用すると以下のように見えるかもしれません。

ProgressBar5.png

または、他のビューポート サイズの場合、以下のようになる場合もあります。

ProgressBar6.png

手動アンカー

プリセットの使用に加えて、ウィジェットを固定したい場所にメダル形状のアンカーを手動で配置することができます。これは、あるウィジェットに関連して別のウィジェットを固定したい場合に特に役立ちます。以下はその例です。

Manual1.png

上の画像では、別のキャンバス パネル上に配置されたキャンバス パネル内で進捗バー ウィジェットの隣に画像ウィジェットがあります。画像/進捗バーを含むキャンバス パネルは、画面左上隅に固定されています。これは、例えばヘルスバーの隣にあるプレイヤー キャラクターの画像を表すために使用することができます。

以下では、進捗バーは (表示されていませんが画像も) それが存在するキャンバス パネルの左上に固定されています。

Manual2.png

進捗バーをストレッチさせるが右側から固定距離のままで一定量外側に延ばしたいとします。これは、以下のように左中央部分でメダル形状のアンカーを引っ張って分けることで行います。

Manual3.png

以下の画像でキャンバス パネルの右側をストレッチするに従い、進捗バーがストレッチしますが、右側からの距離はそのままで中央に向かって外側に延びます。

Manual4.png

ここで問題が起こります。キャンバス パネルをウィジェットが入っている状態でリサイズすると、画像ウィジェットは最初に設定した位置 (または、望んでいた進捗バーに関連した位置) に留まりません。

画像のアンカーがキャンバス パネルの左上隅に留まる代わりに手動で移動させて新しいアンカー ポイントを設定できます。

Manual5.png

上では、進捗バー自体の左上隅に固定しました。そこで、この 2 つのウィジェットを含むキャンバス パネルをリサイズすると以下のようになります。

Manual6.png

画像ウィジェットは進捗バーから固定距離を維持します。しかし、別の問題として、代わりにキャンバス パネルを左側に移動すると以下のようになります。

Manual7.png

左側に対して画像が固定されたままになるように距離を設定しなかったため、画像はトリミングされます。これは、メダル形状のアンカーを分割して行うことができます。

Manual8.png

上では、アンカー ポイント、画像を進捗バーからどれくらい離れて伸ばすか、また左側のマージンも指定しました。その結果、リサイズすると、以下のようになります。

Manual9.png

画像の左右のスペースはそのままの状態ですが、上下はどうでしょう?キャンバス パネルを下に伸ばすと画像は進捗バーと共にセンタリングされません。

Manual9b.png

メダル形状のアンカーをあともう一歩調整すると上記を修正できます。ここでは、進捗バーに関連して上および下から画像をどの程度プッシュするかを指定しました。

Manual10.png

任意の方向にキャンバス パネルをリサイズすると画像はリサイズし、同じくストレッチする進捗バーに関連した位置を維持します。