Canvas-Ebenen

Ansichtsfenster und Canvas-Elemente

Reguläre 2D-Nodes wie Node2D und Control sind abgeleitet von CanvasItem auf dem auch sämtliche andere 2D-Nodes basieren. CanvasItems können in einer Baumhierarchie strukturiert werden und erben ihre Transformation vom übergeordneten Node. Das heißt, wenn ein übergeordnetes Node bewegt wird, bewegen sich alle untergeordneten Nodes in gleicher Weise.

CanvasItem-Nodes (oder Nodes, die von CanvasItem erben) sind stets direkte oder indirekte Unterobjekte einer Ansichtsfenster-Instanz und werden über diese dargestellt.

Ein Ansichtsfenster enthält die Eigenschaft Viewport.canvas_transform, die es erlaubt, die gesamte CanvasItem-Hierarchie durch ein benutzerdefiniertes Transform2D zu beeinflussen. Nodes wie Camera2D funktionieren, indem sie diese Transformation verändern.

Effekte wie das Scrollen lassen sich am besten durch Bearbeiten der Canvas-Eigenschaft "Transformation" erzielen. Dieser Ansatz ist effizienter als das Verschieben des Wurzel-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:

  • Parallaxe Hintergründe: Sich langsamer bewegende Hintergründe im Gegensatz zum Rest des Geschehens.

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

  • Übergänge: Übergangseffekte (Ein-/Ausblendungen, Bildüberlagerungen) bleiben üblicherweise ebenso auf einer festen Position.

Wie können diese Umstände innerhalb eines einzelnen Szenenbaums berücksichtigt werden?

CanvasLayers

Die Antwort ist CanvasLayer, ein Node, der eine separate 2D-Ebene zum Zeichnen seiner untergeordneten Nodes bietet. Nodes unter dem (Haupt-)Viewport 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. Dies erlaubt es, UI-Elemente auf einer bestimmten Stelle zu fixieren während sich die Umgebung verä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 der Schaltfläche zum Pausieren dagegen werden auf Ebene "1" angelegt.

Zur Veranschaulichung, hier ein Diagramm:

../../_images/canvaslayers.png

CanvasLayers funktionieren unabhängig von der Anordnung der Baumhierarchie, sie hängen einzig von der Ebenennummer ab, die für die Instanzierung benötigt wird.

Bemerkung

CanvasLayers sind nicht erforderlich, um die Zeichenreihenfolge von Nodes zu steuern. Die Standardmethode um sicherzustellen, dass ein Node korrekt 'vor' oder 'hinter' anderen gezeichnet wird besteht darin, die Reihenfolge der Nodes im Szenenfenster zu ändern. Möglicherweise werden die obersten Nodes im Szenenfenster hinter den unteren Nodes im Ansichtsfenster gezeichnet und nicht wie intuitiv angenommen andersherum. 2D-Nodes haben auch eine Eigenschaft zum Steuern ihrer Zeichnungsreihenfolge (siehe Node2D.z_index).