Camadas de canvas

Janela de Exibição e itens de Canvas

Nós 2D normais, como Node2D ou Control ambos herdam de CanvasItem, que é a base para todos os nós 2D. CanvasItems podem ser organizados em árvores. Cada item herdará a transformação de seu pai. Isso significa que quando o pai é movido, os filhos também se movem.

Os nós CanvasItem, e nós herdados deles, são filhos diretos ou indiretos de uma Viewport, e serão exibidos através dela.

Uma Viewport tem a propriedade Viewport.canvas_transform, que permite aplicar uma transformação personalizada Transform2D à hierarquia CanvasItem que a contém. Nós como Camera2D funcionam alterando essa transformação.

Efeitos como rolagem são melhor alcançados manipulando a propriedade de transformação do canvas. Essa abordagem é mais eficiente do que mover o item do canvas raiz (e, portanto, toda a cena).

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

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