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 kopieren ihre Transformation von der übergeordneten Node. Das heißt, wird ein übergeordneter Node bewegt, bewegen sich alle untergeordneten Nodes in gleicher Weise.

Diese Nodes in der Hierarchie sind stets direkte oder indirekte Unterobjekte einer Viewport-Instanz und werden über diese dargestellt.

Ein Viewport enthält die Eigenschaft Viewport.canvas_transform, die es erlaubt, die gesamte CanvasItem-Hierarchie durch ein benutzerdefiniertes Transform2D zu beeinflussen. Bestehende Nodes wie Camera2D passen auf diese Weise ihre Sicht an.

Effekte wie das Scrollen lassen sich am besten durch Bearbeiten der Canvas-Transformationseigenschaft 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 Transform 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 Bildschirmpositionen 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).