Das Koordinatensystem wird durch die Rote (X) und die Grüne (Y) Linie definiert. Dort wo sich beide Linien kreuzen, befindet sich der Nullpunkt beider Achsen. +X verläuft nach rechts und +Y zeigt nach unten. Die beiden Blauen Linien grenzen den Viewport ab.

Fügen wir ein Node hinzu, richtet sich dies nach der linken oberen Ecke dem Nullpunkt aus. Auf dieser Position befindet sich standartmäßig der Anker des Nodes.

Über den Inspektor ⇒ Margin ⇒ Left sowie Top können wir den Abstand zwischen Node und Anker bestimmen. Über das Menü(Layout) können wir dem Node und dessen Anker, eine neue Position zuordnen. Als Rahmen dient das übergeordnete Node! Weswegen für die weitere Erklärung ein Node2D als RootNode ungeeignet ist. Es bildet lediglich einen Punkt ab.

Das Node wird hierbei wieder in den sichtbaren Bereich des Viewports verschoben. Dies geschieht durch automatisches setzen der Werte Margin ⇒ Left sowie Top.

Die im Menü(Layout) mit „Wilde“ endenden Menüpunkte vergrößern entsprechend die Werte Margin ⇒ Right und Bottom. Ebenso der Menüpunkt(Full Rect) welcher das Node auf die Größe des Viewports bringt.

Letztendlich führt der Menüpunkt(nur Anker) zu einer Reihe von Menüpunkten mit welchen wir lediglich den Anker des Nodes versetzen können. Ineinander geschachtelte Nodes verhalten sich entsprechend, jedoch auf das jeweilige Rechteck des VaterNodes! Weswegen sich ja alle untergeordneten Nodes verschieben, wenn man das VaterNode im Viewport versetzt.

Die angezeigten Rahmen um die Nodes haben ansonsten auf die Position von anderen Nodes keinerlei einfluß. Diese Tatsache muss in hinsicht auf eine mögliche Änderung der Fenstergröße bedacht werden! Da hierdurch eine Überlappung und die daraus resultierende gegenseitige Verdeckung von Nodes entstehen kann. Abhilfe schaffen hier Container Nodes, welche ihren Bereich entsprechend unterteilen.

Dieser Container bestimmt den Abstand (Rahmen) zwischen dem übergeordneten Node und den untergeordneten Nodes. Die Rahmendicke können wir für alle vier Seiten unterschiedlich im
Inspektor ⇒ Control ⇒ Custom Constants ⇒ Margin… vorgeben.

Alle hier untergeordneten Nodes werden nebeneinander angeordnet.

Alle hier untergeordneten Nodes werden untereinander angeordnet.

Alle hier untergeordneten Nodes werden in einem Raster angeordnet.
Unter Inspektor ⇒ GridContainer ⇒ Columns bestimmen wir die Anzahl an Spalten.

Der Untergeordnete Node richtet sich mittig aus.

Dieser Container teilt seine Fläche vertikal in zwei Flächen auf, in die jeweils ein untergeordnetes Node eingefügt wird. Das Verhältnis der Größe beider Flächen kann mit dem Anfasser zur Laufzeit verändert werden. Sofern diese Funktion nicht deaktiviert wurde.
Inspektor ⇒ Split Offset = Vorgegebene Größe des ersten Nodes

Dieser Container teilt seine Fläche horizontal in zwei Flächen auf, in die jeweils ein untergeordnetes Node eingefügt wird. Das Verhältnis der Größe beider Flächen kann mit dem Anfasser zur Laufzeit verändert werden. Sofern diese Funktion nicht deaktiviert wurde.
Inspektor ⇒ Split Offset = Vorgegebene Größe des ersten Nodes

unterhalb des ScrollContainers soll ein Node welches die Gesamtgröße definiert. Entsprechend dieser Größe werden an den Rändern Scrollbars angezeigt. Dieser Node kann aber durchaus auch ein HBoxContainer sein.

Dieser Container ist mit einem Karteikasten vergleichbar. In diesen Container dürfen ausschließlich direkt untergeordnet Tabs-Node sein. Unterhalb der Tabs-Node können Andersartige Nodes Verwendung finden. Diese Tabs-Node liegen übereinander, lediglich die Reiter ragen nebeneinander angeordnet raus. Wird eines dieser Reiter selektiert, wird das entsprechende Tab sichtbar.

Anwendung unter: Camera und Viewport