Capas de Canvas¶
Viewport y Canvas items¶
CanvasItem is the base for all 2D nodes, be it regular 2D nodes, such as Node2D, or 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.
Sin embargo, por lo general, no queremos que todo en el juego o la aplicación esté sujeto a la transformación del canvas. Por ejemplo:
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:
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).