Up to date

This page is up to date for Godot 4.2. If you still find outdated information, please open an issue.

Canvas-Ebenen

Viewport- und Canvas-Elemente

CanvasItem ist die Basis für alle 2D-Nodes, seien es normale 2D-Nodes, wie Node2D, oder Control. Beide erben von CanvasItem. Sie können Canvas-Elemente in Bäumen anordnen. Jedes Element erbt die Transformation seines Parents: Wenn sich der Parent bewegt, bewegen sich auch seine Child-Elemente.

CanvasItem-Nodes und Nodes, die davon erben, sind direkte oder indirekte Child-Elemente eines Viewport, das sie anzeigt.

Die Viewport-Property Viewport.canvas_transform erlaubt es, eine benutzerdefinierte Transform2D-Transformation auf die CanvasItem-Hierarchie anzuwenden, die sie enthält. Nodes wie Camera2D funktionieren, indem sie diese Transformation ändern.

Effekte wie das Scrollen lassen sich am besten durch Bearbeiten der Canvas-Property "Transformation" erzielen. Dieser Ansatz ist effizienter als das Verschieben des Root-Canvas-Elements (und damit der gesamten Szene).

Normalerweise wollen wir nicht, dass alles im Spiel durch Canvas-Transformation beeinflusst werden soll. Dazu zählen beispielsweise:

• Parallax-Hintergründe: Hintergründe, die sich langsamer bewegen als der Rest des Geschehens.

• UI: Stellen Sie sich eine Benutzeroberfläche (UI) oder ein Head-up-Display (HUD) vor, die unsere Sicht auf die Spielwelt überlagert. Wir möchten, dass eine Lebensanzeige, eine Punkteanzeige und andere Elemente ihre Positionen auf dem Bildschirm beibehalten, auch wenn sich unsere Sicht auf die Spielwelt ändert.

• Übergänge: Übergangseffekte (Fading, Blending) bleiben üblicherweise ebenso auf einer festen Position.

Wie lassen sich diese Probleme in einem einzigen Szenenbaum lösen?

CanvasLayers

Die Antwort ist CanvasLayer, ein Node, der eine separate 2D-Ebene zum Zeichnen seiner untergeordneten Nodes bietet. Child-Nodes des Viewports werden grundsätzlich auf Ebene "0" gezeichnet, wohingegen ein CanvasLayer auf jeder beliebigen Ebene sein kann. Ebenen mit einer höheren Nummer liegen über jenen mit einer kleineren. CanvasLayers besitzen jeweils eigene Transformationsanpassungen und sind nicht von denen der anderen Ebenen abhängig. Dadurch kann die Benutzeroberfläche im Screen-Space fixiert werden, während sich die Ansicht der Spielwelt ändert.

Ein Beispiel dazu ist ein Parallax-Hintergrund. So kann dieser in einem CanvasLayer auf Ebene "-1" dargestellt werden. Die Ansicht mit Punktestand, Lebensanzeige und Pause-Button dagegen werden auf Ebene "1" angelegt.

Hier ein Diagramm zur Veranschaulichung:

CanvasLayer sind unabhängig von der Baumreihenfolge und hängen nur von der Ebenennummer ab, so dass sie bei Bedarf instanziiert werden können.

Bemerkung

CanvasLayer sind nicht notwendig, um die Zeichenreihenfolge von Nodes zu steuern. Der Standardweg, um sicherzustellen, dass ein Node korrekt "vor" oder "hinter" anderen gezeichnet wird, besteht darin, die Reihenfolge der Nodes im Szenenfenster zu manipulieren. Vielleicht kontraintuitiv, werden die obersten Nodes im Szenenfenster hinter den niedrigeren im Viewport gezeichnet. 2D-Nodes haben auch die Property CanvasItem.z_index, um ihre Zeichenreihenfolge zu steuern.