고도엔진 튜토리얼 #20 캔버스 층(Canvas layer)

뷰포트와 캔버스 아이템

모든 2D 노드의 기본이 되는 일반적인 2D 노드 Node2D 또는 컨트롤은 CanvasItem에서 상속됩니다. CanvasItem은 트리 모양으로 수덩될 수 있으며 그들의 변환을 상속받을 수 있습니다. 이것은 부모를 움직이면 자식도 움직인다는 것을 뜻합니다.

이 노드들은 뷰포트의 직접 혹은 간접적인 자식으로 위치되며 뷰포트를 통해 볼 수 있습니다.

뷰포트는 커스텀 행렬32 변환에 의한 모든 CanvasItem 계층 구조의 변환을 허용하는 "canvas_transform" Viewport.set_canvas_transform() 속성을 가집니다. 노드는 Camera2D처럼 변환을 바꾸면서 작동합니다.

캔버스 변환을 바꾸는 것은 유용합니다. 왜냐하면 루트 캔버스 아이템을 움직이는 것보다 훨씬 효율적이기 때문입니다. 캔버스 변환은 완전히 2D 그림을 다루는 간단한 행렬 오프셋입니다. 그렇기 때문에 스크롤링(scrolling)에 있어 가장 효율적인 방법입니다.

충분하지 않아요...

하지만 충분하지 않습니다. 게임이나 어플리케이션에서 모든것이 캔버스 변환으로 변하지 않기를 바라는 상황이 종종 있습니다. 예를 들자면 :

• 시차 배경 : 배경이 나머지 스테이지보다 느리게 움직입니다.
• HUD : Head's up display 혹은 유저 인퍼테이스입니다. 만약 전체가 움직여도 체력바나 점수 등 정적으로 남아야 하는 것들이 있습니다.
• 이동 : 이동에 사용되는 이펙트(fades, blends(들 또한 고정된 위치에 남아야합니다.

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

캔버스 층(CanvasLayers)

정답은 CanvasLayer입니다. CanvasLayer 노드는 모든 자식 및 손자를 위한 별도의 2D 렌저링 레이어를 추가합니다. 뷰포트의 자식은 기본으로 레이어 "0"에서 그리고, CanvasLayer는 어느 숫자 레이어에서 그립니다. 숫자가 더 큰 레이어는 숫자가 더 작은 레이어 위에 그려진다. CanvasLayer도 또한 고유의 변환을 가지며, 다른 계층의 변환 기능에 종속되지 않습니다. 이를 통해 UI를 고정된 인-플레이스 방식으로 수정하고 세상을 움직일 수 있습니다.

이에 대한 예는 시차 배경(parallax background)을 만드는 것입니다. 이건 레이어 "-1"에서 CanvasLayer로 할 수 있습니다. 점, 체력바 및 일시 중지 화면이 있는 화면을 레이어 "1"에서 만들 수도 있다.

이게 어떻게 보이는 지 도식으로 나타내면 :

CanvasLayers는 트리 순서에 관계 없이 독립적이며, 계층 번호에만 의존하므로 필요할 때 인스턴스화할 수 있습니다.

퍼포먼스

성능 제한이 없어야 하지만, 노드의 도면 순서를 준비하는 데 너무 많은 양의 계층을 사용하지 않는 것이 좋습니다. 가장 적절한 방법은 언제나 트리 순서로 배열하는 것이다. 2D 노드에는 도면 순서를 제어할 수 있는 속성도 있습니다(Node2D.set_z()).