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 et ils hériteront de leur transformation. Cela signifie que lors du déplacement du parent, les enfants seront également déplacés.

Ces nœuds sont placés en tant qu’enfants directs ou indirects dans 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 de transformer toute la hiérarchie CanvasItem par une transformation personnalisée Transform2D. Des nœuds tels que Camera2D, fonctionnent en modifiant cette transformation.

Changer la transformation du canevas est utile car c’est beaucoup plus efficace que de déplacer l’élément de canevas racine (et donc la scène entière). La transformation du canevas est une matrice simple qui équilibre le dessin 2D dans son ensemble. Il s’agit donc du moyen le plus efficace de faire du défilement.

Pas assez…

Mais ce n’est pas assez. Il y a souvent des situations où le jeu ou l’application peut ne pas vouloir tout transformé par la transformation du canevas. Par exemple :

  • Arrière-plans de parallaxe: Arrière-plans qui bougent plus lentement que le reste de la scène.
  • HUD: affichage tête haute ou interface utilisateur. Si le monde bouge, le compteur de vies, le score, etc. doivent rester statiques.
  • Transitions: les effets utilisés pour les transitions (fondus, mélanges) peuvent également vouloir rester à un emplacement déterminé.

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

Couches de canevas

La réponse est Calque de Canevas, 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 Calque de Canevas dessinera au calque numérique. Les calques avec un plus grand nombre seront dessinés au-dessus de ceux avec un plus petit nombre. Les Calques de Canevas 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.

Performance

Même s’il ne devrait y avoir aucune limitation de performances, il est déconseillé d’utiliser un nombre excessif de couches pour organiser l’ordre d’affichage des nœuds. Le moyen le plus optimal sera toujours de les organiser selon l’ordre de l’arborescence. Les nœuds 2D ont également une propriété pour contrôler leur ordre de dessin (voir Node2D.z_index).