Canvas layers

Viewport y Canvas items

Los nodos 2D comunes, como Node2D o Control heredan ambos de CanvasItem, que es la base de todos los nodos 2D. Los CanvasItems se pueden organizar en árboles y heredarán su transformación. Esto significa que al mover al padre, los hijos también se moverán.

Los nodos CanvasItem y todos los que heredan de ellos, son directa o indirectamente hijos de un Viewport, y son mostrados en pantalla por este.

El nodo Viewport tiene la propiedad Viewport.canvas_transform, la que permite aplicar una matriz de transformación Transform2D personalizada para modificar la jerarquía de CanvasItem que contiene. Nodos como Camera2D, funcionan cambiando esa transformación.

Efectos como scrolling, se pueden lograr manipulando la propiedad canvas transform. Este modo es más eficiente que mover la el canvas item raíz (y por ende, toda la escena).

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

  • Parallax Backgrounds: Fondos que se mueven más lentamente que el resto del escenario.

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

  • Transiciones: Podríamos preferir que efectos usados para transiciones (mezclas, desvanecimientos) se mantengan en un lugar fijo de la pantalla.

¿Cómo se pueden resolver esos problemas desde un único árbol de escenas?

CanvasLayers

La solución es la CanvasLayer, que es un nodo que añade una capa de renderizado 2D separada para todos sus nodos hijos y descendientes. Los hijos de Viewport dibujarán por defecto en la capa "0", mientras que CanvasLayer dibujará en cualquier capa numérica. Las capas con un número mayor se dibujarán por encima de las capas con un número menor. CanvasLayers también tienen su propia transformación, y no dependen de la transformación de otras capas. Esto permite que la interfaz de usuario se fije en el lugar mientras se cambia la vista del mundo del juego.

Un ejemplo de esto es la creación de un fondo parallax. Esto se puede hacer con un CanvasLayer en la capa "-1". La pantalla con los puntos, el contador de vida y el botón de pausa también se puede crear en la capa "1".

Aquí hay un diagrama de cómo se ve:

../../_images/canvaslayers.png

Los nodos CanvasLayer son independientes del orden en el árbol y sólo dependen del número de capa, así que pueden ser instanciados cuando y donde sean necesarios.

Nota

Las CanvasLayers no están necesariamente para controlar el orden de dibujado de los nodos. El modo normal de asegurar que un nodo es dibujado correctamente 'al frente' o 'detrás' otros, es manipulando el orden de los nodos en el panel de escena. Los nodos más arriba en el panel de escena, son dibujados detrás de los que están más abajo en el viewport. Nodos 2D también tienen la propiedad de controlar el orden de dibujado (ver Node2D.z_index).