Die Arbeitsfläche kann man sich zunächst einmal, nahezu unendlich groß vorstellen. Tatsächlich ist die Größe davon abhängig wie weit das entfernteste Node vom Zentrum platziert wurde.

Jedoch können wir im Ansichtsfenster (Viewport) nur einen kleinen Teil davon sehen. Oben links beginnend bei der Koordinate x=0 und y=0 mit der Größe welche wir unter

Projekteinstellung ⇒ Display ⇒ Window ⇒ Width
Projekteinstellung ⇒ Display ⇒ Window ⇒ Height

eingestellt haben.

Zu beachten ist, dass das hier verwendete Koordinatensystem in X-Richtung nach rechts und in Y-Richtung nach unten größer wird (Positiv).

Die Farbe können wir über Skript wie folgt ändern:

VisualServer.set_default_clear_color(Color(1,0.4,0.4,1.0))

Wollen wir den Viewport in der Szene verschieben, können wir dies am einfachsten über eine Camera2D erreichen.

Die Spielfigur kann ihre Position über ein Skript, in der Szene ändern. Da die Kamera in diesem Fall hierarchisch „Kind“ der Spielfigur ist, folgt sie dieser. Damit die Kamera ihr Bild an den übergeordneten Viewport sendet, muss die Kamera noch auf aktuell im Inspektor gesetzt werden.

Panel(Inspektor) ⇒ Camera2D ⇒ Current = An

Mit folgenden Einstellungen wird die Spielfigur in der Mitte des Kamerabildes gehalten:

Inspektor ⇒ Anchor Mode = Drag Center

Im Editor kann Camera2D drei Rahmen anzeigen, welche wir über folgende Einstellungen ein und aus schalten können:

Panel(Inspektor) ⇒ Editor

Draw Screen = Größe Camerabild = Größe Viewport
Draw Limits = Maximaler Bereich in dem die Camera folgt
Draw Margin = Bereich in dem sich die Spielfigur bewegen kann, ohne das die Camera folgt

Die Größe des entsprechenden Rahmens ist unter: Panel(Inspektor) ⇒ Limit

in den entsprechenden Richtungen eingestellt.

Dieses Verhalten kann mit zwei getrennten Parametern in Horizontal als auch in Vertikal aktiviert werden.

Panel(Inspektor) ⇒ Camera2D

Drag Margin H Enabled
Drag Margin V Enabled

Die Größe des Rahmens wird unter:

Panel(Inspektor) ⇒ Drag Margin

in den entsprechenden Richtungen eingestellt.

Die Verfahrgeschwindigkeit der Kamera richtet sich nach der Geschwindigkeit des Mutter-Nodes(Spielfigur). Über die Parameter

Panel(Inspektor) ⇒ Smoothing

Enabled = An können wir die Verfahrgeschwindigkeit der Camera auf…
Speed = Maximale Geschwindigkeit

begrenzen.

Wenn wir mehrere Viewports benötigen, beispielsweise bei einem Splitscreen, müssen wir die Fläche zunächst unterteilen. Hierzu müssen wir mit Containern aus den Control-Nodes arbeiten. Betrachten wir zunächst einen Szenen-Baum mit einem einzelnen ViewportContainer: Diesen ViewportContainer platzieren wir im Ursprungs-Viewport und im

Panel(Inspektor) ⇒ ViewportContainer ⇒ Stretch = An
Panel(Inspektor) ⇒ Size Flags ⇒ Horizontal = Fill & Expand

In diesem Fall habe ich eine eigene Szene dem Viewport angehängt. Entsprechend der Größe dieses Viewports wird die linke obere Ecke des Szene-Ursprungs-Viewport eingefügt.

Beginnen wir mit einem einfachen Node. Nur mit diesem können wir den nächsten Node HboxContainer über:

2d-Editor ⇒ Menü ⇒ Layout = Full Rect setzen

Bei den beiden ViewportContainer

Panel(Inspektor) ⇒ ViewportContainer ⇒ Stretch = An
Panel(Inspektor) ⇒ Size Flags ⇒ Horizontal = Fill & Expand

In der Szene befindet sich das eigentliche Level.

Über ein Skript verbinden wir die erste Camera noch mit der gleichen Szene und hängen die Kameras an die entsprechenden Spielfiguren an. Dieses Skript hängen wir dem Main-Node an.

Onready var view1 = $HboxContainer/ViewportContainer/Viewport
Onready var view2 = $HboxContainer/ViewportContainer2/Viewport
Onready var camera1 = $HboxContainer/ViewportContainer/Viewport/Camera2D
Onready var camera2 = $HboxContainer/ViewportContainer2/Viewport/Camera2D
Onready var welt = $HboxContainer/ViewportContainer2/Viewport/Camera2D/Szene
 
Func _ready():
	view1.world_2d = view2.world_2d
	camera1.target = welt.get_Node("Spieler1")
	camera2.target = welt.get_Node("Spieler2")