Canvas-Ebenen

Ansichtsfenster und Canvas-Elemente

CanvasItem is the base for all 2D nodes, be it regular 2D nodes, such as Node2D, or Control. Both inherit from CanvasItem. You can arrange canvas items in trees. Each item will inherit its parent's transform: when the parent moves, its children move too.

CanvasItem nodes, and nodes inheriting from them, are direct or indirect children of a Viewport, that display them.

A Viewport has the property Viewport.canvas_transform, allows to apply a custom Transform2D transform to the CanvasItem hierarchy it contains. Nodes such as Camera2D work by changing that transform.

To achieve effects like scrolling, manipulating the canvas transform property is more efficient than moving the root canvas item and the entire scene with it.

Usually though, we don't want everything in the game or app to be subject to the canvas transform. For example:

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

  • UI: Think of a user interface (UI) or head-up display (HUD) superimposed on our view of the game world. We want a life counter, score display and other elements to retain their screen positions even when our view of the game world changes.

  • Ü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).