Couches du canevas

Eléments de fenêtre et de canevas

CanvasItem is the base for all 2D nodes, be it regular

2D nodes, such as Node2D, or Control <class_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.

Habituellement, cependant, nous ne voulons pas que tout dans le jeu ou l’application soit soumis à la transformation du canevas. Par exemples :

  • Arrière-plans de parallaxe : Arrière-plans qui bougent plus lentement que le reste de la scène.

  • 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 changes.

  • Transitions : Nous pouvons vouloir des effets visuels utilisés pour les transitions (fondus, mélanges) pour rester à un emplacement d’écran fixe.

Comment ces problèmes peuvent-ils être résolus dans une arborescence de scène unique ?

Couches de canevas

La réponse est CanvasLayer, qui est un nœud qui ajoute un calque de rendu 2D distinct pour tous ses enfants et ses petits-enfants. Les enfants de la fenêtre d'affichage dessineront par défaut au calque "0", tandis qu’un CanvasLayer est dessiné à n’importe quelle couche numérique. Les calques avec un plus grand nombre seront dessinés au-dessus de ceux avec un plus petit nombre. Les CanvasLayer ont également leur propre transformation et ne dépendent pas de la transformation des autres calques. Cela permet de fixer l'interface utilisateur sur place pendant que le monde bouge.

Un exemple de ceci est la création d'un fond en parallaxe. Cela peut être fait avec un CanvasLayer au calque "-1". L'écran avec les points, le compteur de durée de vie et le bouton de pause peuvent également être créés au calque "1".

Voici un diagramme de sa représentation :

../../_images/canvaslayers.png

Les CanvasLayers sont indépendants de l'ordre des arborescences, ils dépendent uniquement de leur numéro de couche, ainsi Ils peuvent être instanciés si nécessaire.

Note

CanvasLayers n'est pas nécessaire pour contrôler l'ordre de dessin des nœuds. La façon standard de s'assurer qu'un nœud est correctement dessiné " devant " ou " derrière " les autres est de manipuler l'ordre des nœuds dans le panneau de scène. Contre-intuitivement peut-être, les nœuds les plus en haut du panneau de scène sont dessinés sur les nœuds inférieurs en arrière de la fenêtre d'affichage. Les nœuds 2d ont également une propriété pour contrôler leur ordre de dessin (voir Node2D.z_index).