Couches du canevas

Eléments de fenêtre et de canevas

Les nœuds 2D ordinaires, tels que Node2D ou Control héritent tous deux de CanvasItem, qui est la base de tous les nœuds 2D. Les objets CanvasItems peuvent être organisés en arborescences. Ils hériteront de la transformation de leurs parents. Cela signifie que lors du déplacement du parent, les enfants seront également déplacés.

Les nœuds CanvasItem, et les nœuds qui héritent d’eux sont des enfants directs ou indirects d’une Fenêtre d’affichage, et seront affichés à travers elle.

La fenêtre d’affichage a la propriété Viewport.canvas_transform, qui permet d’appliquer une transformation personnalisée Transform2D à la hiérarchie CanvasItem qui la contient. Des nœuds tels que Camera2D, fonctionnent en modifiant cette transformation.

Les effets comme le défilement sont mieux réalisés en manipulant la propriété de transformation de canevas. Cette approche est plus efficace que de déplacer l’élément de canevas racine (et donc toute la scène).

Habituellement, cependant, nous ne voulons pas que tout dans le jeu ou l’application soit soumis à la transformation du canevas. Voici quelques 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 is changing.
  • 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).