Work in progress

The content of this page was not yet updated for Godot 4.2 and may be outdated. If you know how to improve this page or you can confirm that it's up to date, feel free to open a pull request.

Größe und 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 Controls 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 Controls 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 geschieht durch die Bearbeitung der Seitenrand-Propertys der Controls. Jedes Control hat vier Seitenränder: links, rechts, unten und oben, die den jeweiligen Kanten des Controls entsprechen. Standardmäßig stellen sie alle einen Abstand in Pixeln relativ zur linken oberen Ecke des Parent-Controls oder (falls es kein Parent-Control gibt) des Viewports dar.

../../_images/margin.png

Um das Control breiter zu machen, können Sie also den rechten Seitenrand größer und/oder den linken Seitenrand kleiner machen. So können Sie die genaue Platzierung und Form des Controls festlegen.

Die Anker-Propertys stellen ein, relativ zu welchem Punkt die Seitenränder gemessen werden. Jeder Seitenrand hat einen individuellen Anker, der vom Anfang bis zum Ende des Parent-Elements eingestellt werden kann. So lassen sich die vertikalen (oben, unten) Anker von 0 (oben am Parent) bis 1,0 (unten am Parent) einstellen, wobei 0,5 der Mittelpunkt ist, und die Control-Seitenränder relativ zu diesem Punkt platziert werden. Die horizontalen Anker (links, rechts) passen sich ebenfalls von links nach rechts dem Parent an.

Wenn Sie möchten, dass der Rand eines Controls über oder links vom Ankerpunkt liegt, müssen Sie den Seitenrand auf einen negativen Wert ändern.

Beispiel: Wenn horizontale Anker auf 1 geändert werden, gelten die Seitenrand-Werte relativ zur oberen rechten Ecke des Parent-Controls oder des Viewports.

../../_images/marginend.png

Wenn Sie die beiden horizontalen oder die beiden vertikalen Anker auf unterschiedliche Werte einstellen, ändert das Control seine Größe, wenn das Parent-Control dies tut. Hier wird das Control so eingestellt, dass seine untere rechte Ecke an der unteren rechten Ecke des Parent-Controls verankert wird, während die oberen linken Seitenränder des Controls immer noch an der oberen linken Ecke des Parent-Controls verankert werden, so dass das Control bei einer Größenänderung des Parent-Controls dieses immer abdeckt und einen Seitenrand von 20 Pixeln übrig lässt:

../../_images/marginaround.png

Zentrieren eines Controls

Um ein Control in seinem Parent-Element zu zentrieren, setzen Sie seine Anker auf 0,5 und jeden Seitenrand auf die Hälfte seiner relevanten Dimension. Der folgende Code zeigt beispielsweise, wie ein TextureRect in seinem Parent-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.offset_left = -texture_size.x / 2
rect.offset_right = texture_size.x / 2
rect.offset_top = -texture_size.y / 2
rect.offset_bottom = texture_size.y / 2
add_child(rect)

Wenn Sie jeden Anker auf 0,5 setzen, wird der Referenzpunkt für die Seitenränder in die Mitte des Parent-Elements verschoben. Von dort aus setzen wir negative Seitenränder, damit das Control seine natürliche Größe bekommt.

Layout-Vorgaben

Anstatt die Seitenrand- und Ankerwerte manuell anzupassen, können Sie das Layout-Menü der Toolbar über dem Viewport verwenden. Neben der Zentrierung bietet es viele Optionen zum Ausrichten und Ändern der Größe von Control-Nodes.

../../_images/layout_dropdown_menu.png