Größe und Bezugspunkte (Anker)

Wenn ein Spiel immer auf demselben Gerät und mit derselben Auflösung ausgeführt werden würde, wäre es einfach, die Position und Größe jedes einzelnen Spiels zu bestimmen. Dies ist leider selten der Fall.

Nur Fernseher haben heutzutage eine Standardauflösung und ein Standard-Seitenverhältnis. Alles andere, von Computermonitoren bis hin zu Tablets, tragbaren Konsolen und Mobiltelefonen, hat unterschiedliche Auflösungen und Seitenverhältnisse.

Es gibt verschiedene Möglichkeiten, um damit umzugehen, aber stellen wir uns vorerst vor, dass sich die Bildschirmauflösung geändert hat und die Steuerelemente neu positioniert werden müssen. Einige müssen dem unteren Bildschirmrand folgen, andere dem oberen Bildschirmrand oder möglicherweise dem rechten oder linken Rand.

../../_images/anchors.png

Dies erfolgt durch Bearbeiten der margin -Eigenschaften von Steuerelementen. Jedes Steuerelement hat vier Ränder: links, rechts, unten und oben. Standardmäßig stellen alle einen Abstand in Pixel relativ zur oberen linken Ecke des übergeordneten Steuerelements oder (falls kein übergeordnetes Steuerelement vorhanden ist) des Ansichtsfensters dar.

../../_images/margin.png

Werden horizontale (links, rechts) und/oder vertikale (oben, unten) Anker auf 1 geändert, so werden auch die Randwerte relativ zur unteren rechten Ecke des übergeordneten Steuerelements oder Ansichtsfensters verwendet.

../../_images/marginend.png

Hier ist das Steuerelement so eingestellt, dass es seine untere rechte Ecke mit der des übergeordneten Elements erweitert. Wenn Sie also die Größe des übergeordneten Elements ändern, wird es vom Steuerelement immer abgedeckt, sodass ein Rand von 20 Pixel verbleibt:

../../_images/marginaround.png

Zentrierung eines Steuerelements

Um ein Steuerelement in seinem übergeordneten Element zu zentrieren, setzen Sie seine Anker auf 0,5 und jeden Rand auf die Hälfte seiner relevanten Dimension. Der folgende Code zeigt beispielsweise, wie ein TextureRect in seinem übergeordneten Element zentriert werden kann:

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)

Wenn Sie jeden Ankerpunkt auf 0,5 setzen, wird der Referenzpunkt für die Ränder in die Mitte des übergeordneten Ankers verschoben. Von dort aus setzen wir negative Ränder, damit das Steuerelement seine natürliche Größe erhält.

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