Canvas-Ebenen

Viewport und CanvasItem

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 eigenes Transform2D zu beeinflussen. Bestehende Nodes wie Camera2D passen auf diese Weise ihre Sicht an.

Effects like scrolling are best achieved by manipulating the canvas transform property. This approach is more efficient than moving the root canvas item (and hence the whole scene).

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

  • Parallax Backgrounds: Sich langsamer bewegende Hintergründe im Gegensatz zum Rest des Geschehens.
  • UI: Think of a user interface (UI) or Heads-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 is changing.
  • Ü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 aren’t necessary to control the drawing order of nodes. The standard way to ensuring that a node is correctly drawn ‚in front‘ or ‚behind‘ others is to manipulate the order of the nodes in the scene panel. Perhaps counterintuitively, the topmost nodes in the scene panel are drawn on behind lower ones in the viewport. 2d nodes also have a property for controlling their drawing order (see Node2D.z_index).