サイズとアンカー

ゲームが常に同じデバイスの同じ解像度で実行される場合には、位置の制御は、それぞれの位置とサイズを設定するだけの簡単な問題です。ですが残念ながら、それはめった当てはまりません。

最近のテレビだけが標準的な解像度とアスペクト比を備えています。パソコン用モニターやタブレット、ポータブルコンソール、携帯電話に至るまで、他のすべては異なる解像度とアスペクト比を持っています。

これを処理する方法はいくつかありますが、今のところは、画面の解像度が変更され、コントロールを再配置する必要があることを想像してみましょう。画面の上部や下部に合わせる必要があったり、あるいは、右または左の余白を必要とするものです。

../../_images/anchors.png

これは、コントロールの Margin プロパティを編集することにより行われます。各コントロールには、Left、Right、Bottom、Top という4つのマージンがあります。デフォルトでは、それらはすべて、親コントロールまたは(親コントロールがない場合は)ビューポートの左上隅からの相対的な距離をピクセル単位で表します。

../../_images/margin.png

When horizontal (left, right) and/or vertical (top, bottom) anchors are changed to 1, the margin values become relative to the bottom-right corner of the parent control or viewport.

../../_images/marginend.png

ここでは、コントロールは親の右下隅を基準にして拡大するように設定されているので、親のサイズを変更すると、コントロールは常に20ピクセルの余白を残して親を覆います:

../../_images/marginaround.png

コントロールのセンタリング

コントロールを親の中央に配置するには、アンカーを0.5に設定し、各マージンを関連する寸法の半分に設定します。たとえば、次のコードは、TextureRectを親の中央に配置する方法を示しています:

var rect = TextureRect.new()
rect.texture = load("res://icon.png")
rect.anchor_left = 0.5
rect.anchor_right = 0.5
rect.anchor_top = 0.5
rect.anchor_bottom = 0.5
var texture_size = rect.texture.get_size()
rect.margin_left = -texture_size.x / 2
rect.margin_right = -texture_size.x / 2
rect.margin_top = -texture_size.y / 2
rect.margin_bottom = -texture_size.y / 2
add_child(rect)

各アンカーを0.5に設定すると、マージンの参照ポイントがその親の中心に移動します。そこから、コントロールが自然なサイズになるように負のマージンを設定します。

Layout Presets

Instead of manually adjusting the margin and anchor values, you can use the toolbar's Layout menu, above the viewport. Besides centering, it gives you many options to align and resize control nodes.

../../_images/layout_dropdown_menu.png