Camadas de canvas

Janela de Exibição e itens de Canvas

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.

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

  • Planos de fundo Paralax: planos de fundo que se movem mais lentamente do que o resto do estágio.

  • UI: Pense em uma Interface de Usuário (UI) ou uma head-up display (HUD) sobreposta à nossa visão do mundo do jogo. Queremos um contador de vida, uma exibição de pontuação e outros elementos para manter suas posições na tela mesmo quando nossa visão do mundo do jogo está mudando.

  • Transições: Podemos desejar que os efeitos visuais usados para as transições (fades, misturas) permaneçam em um local fixo na tela.

Como esses problemas podem ser resolvidos em uma única árvore de cena?

CanvasLayers

A resposta é CanvasLayer, que é um nó que adiciona uma camada de renderização 2D separada para todos os seus filhos e netos. Filhos da janela de visualização desenharão por padrão na camada "0", enquanto um CanvasLayer desenhará em qualquer camada numérica. Camadas com um número maior serão desenhadas acima daquelas com um número menor. CanvasLayers também têm sua própria transformação e não dependem da transformação de outras camadas. Isso permite que a UI seja fixada no espaço da tela enquanto nossa visão do mundo do jogo muda.

Um exemplo disso é a criação de um fundo de paralax. Isso pode ser feito com um CanvasLayer na camada "-1". A tela com os pontos, contador de vida e botão de pausa também pode ser criada na camada "1".

Here's a diagram of how it looks:

../../_images/canvaslayers.png

CanvasLayers são independentes da ordem da árvore e dependem apenas do número da camada, portanto, podem ser instanciados quando necessário.

Nota

CanvasLayers não são necessários para controlar a ordem de desenho dos nós. A maneira padrão de garantir que um nó seja desenhado corretamente 'na frente' ou 'atrás' dos outros é manipular a ordem dos nós no painel da cena. Talvez contraintuitivamente, os nós superiores no painel de cena são desenhados atrás dos inferiores na janela de exibição. Os nós 2d também possuem uma propriedade para controlar sua ordem de desenho (veja Node2D.z_index).