Canvas layers

Viewport and Canvas items

Node2D 또는 :ref:`Control <class_Control>`와 같은 2D 노드는 모든 2D 노드의 기초가 되는 :ref:`CanvasItem <class_CanvasItem>`로부터 상속됩니다. CanvasItems은 트리 형태로 배열될 수 있고 변형을 상속받게 됩니다. 이는 부모를 옮길 때 자식들도 함께 움직이는 것을 의미합니다.

이러한 노드는 뷰포트의 간접 또는 직접적인 자식으로 배치되고 이를 통해 보여집니다.

뷰포트는 Viewport.canvas_transform 속성을 가지는데 사용자 정의 Transform2D 변형을 통해 모든 CanvasItem 계층을 변형할 수 있습니다. :ref:`Camera2D <class_Camera2D>`와 같은 노드는 이 변형을 바꾸는 것에 의해 작동됩니다.

Changing the canvas transform is useful because it is a lot more efficient than moving the root canvas item (and hence the whole scene). Canvas transform is a simple matrix that offsets the whole 2D drawing, so it's the most efficient way to do scrolling.

Not enough...

하지만 이 방법이 충분하지 않습니다. 게임이나 어플리케이션에서 캔버스 변형에 의해 모든 것이 변형되는 것을 종종 원하지 않는 상황이 있습니다. 다음과 같은 예:

  • 페럴렉스 배경: 무대 나머지 부분보다 느리게 움직이는 배경.
  • HUD: 전방 표시 장치(Heads-up display) 또는 사용자 인터페이스. 세상이 움직이면 목숨, 점수와 같은 것은 정적인 상태를 유지해야 합니다.
  • 전환: 전환에 사용되는 효과(페이드, 혼합)가 고정된 위치에 남아 있기를 원할 수 있습니다.

단일 씬 트리에서 어떻게 이 문제들을 해결할 수 있을까요?

CanvasLayers

이 해답은 자식들과 자손들에 분리된 2D 렌더링 레이어를 추가하는 CanvasLayer 노드에 있습니다. 뷰포트 자식들은 기본적으로 "0" 레이어에 그려집니다. 반면에 CanvasLayer는 아무 숫자 레이어에 그려집니다. 더 큰 숫자를 가진 레이어가 위에 그려집니다. 또한 각 CanvasLayers 만의 변형을 가지고 다른 레이어의 변형에 의존하지 않습니다. 이것은 세계가 움직이는 동안에 UI를 고정될 수 있게 해줍니다.

An example of this is creating a parallax background. This can be done with a CanvasLayer at layer "-1". The screen with the points, life counter and pause button can also be created at layer "1".

Here's a diagram of how it looks:

../../_images/canvaslayers.png

CanvasLayers are independent of tree order, and they only depend on their layer number, so they can be instantiated when needed.

성능

Even though there shouldn't be any performance limitation, it is not advised to use excessive amount of layers to arrange drawing order of nodes. The most optimal way will always be arranging them by tree order. 2d nodes also have a property for controlling their drawing order (see Node2D.z_index).