고도엔진 튜토리얼 #19 뷰포트와 캔버스 변환(Viewport and canvas transforms)

도입

이 튜토리얼은 대부분의 사용자에게 다소 어두울 항목을 다룬 후 생성됩니다. 그리고 노드에 대해 로컬에서 콘텐츠를 그리는 시점부터 화면에 그려지는 시점까지 2D 변환되는 모든 사항을 설명합니다.

캔버스 변환

이전 튜토리얼인, 캔버스 층에서 언급했듯이 모든 CanvasItem 노드(Node2D와 제어가 CanvasItem을 공통된 루트로 사용한다는 것을 기억하세요)는 캔버스 층에 있습니다. 모든 캔버스층은 행렬32를 통해 접근 가능한 변환(이동, 회전, 스케일 등)을 가집니다.

또한 앞의 튜토리얼에서 다루었듯이, 노드는 내장된 캔버스인 기본으로 설정된 레이어 0에 그려집니다. 노드를 다른 레이어에 놓고 싶다면, CanvasLayer 노드를 사용할 수 있습니다.

전역 캔버스 변환

뷰포트도 전역 캔버스 변환 기능을 지원합니다(행렬32도 해당). 전역 캔버스 변환은 변환의 주인이며 모든 개인의 캔버스 층에 영향을 끼칩니다. 일반적으로 이 변환은 자주 사용하지 않지만, 고도 에디터의 CanvasItem 에디터에서 사용됩니다.

스트레치 변환

마지막으로 뷰포트에는 화면 크기를 조정하거나 화면을 늘일 때 사용되는 스트레치 변환 기능이 있습니다. 이 변환은 내부적으로 사용(다수의 해상도에서 설명하였듯이)되지만 뷰포트마다 수동으로 설정할 수도 있습니다.

MainLoop,Input_event() 콜백에서 수신된 입력 이벤트는 이 변환을 통해 곱해지지만, 위에 설명한 기능들은 없습니다. InputEvent 좌표를 로컬 CanvasItem 좌표로 변환하려는 편의를 위해 CanvasItem.make_input_local() 함수가 추가되었습니다.

변환 순서

CanvasItem 로컬 속성의 좌표가 실제 화면 좌표가 되려면 다음과 같은 변환 체인이 적용되어야 합니다 :

변환 함수

각 변환의 달성은 다음 함수을 통해 이루어질 수 있습니다 :

타입	변환
CanvasItem	CanvasItem.get_global_transform()
CanvasLayer	CanvasItem.get_canvas_transform()
CanvasLayer+GlobalCanvas+Stretch	CanvasItem.get_viewport_transform()

마지막으로 CanvasItem 로컬 좌표를 화면 좌표로 변환하려면 다음 순서로 곱하기만 하면 됩니다 :

var screen_coord = get_viewport_transform() * ( get_global_transform() * local_pos )

그러나 일반적으로 화면 좌표로 작업하는 것은 바람직하지 않다는 점에 유의하십시오. 권장 방법은 자동 화면 해상도 조정 기능이 제대로 작동하도록 하기 위해 캔버스 좌표 (Canvas.get_global_transform())에서만 작업하는 것입니다.

사용자 지정 입력 이벤트 피드

씬 트리에 사용자 지정 입력 이벤트를 제공하려는 경우가 많습니다. 위 지식을 사용하여 올바르게 수행하려면 다음 방법으로 수행해야 합니다 :

var local_pos = Vector2(10,20) # local to Control/Node2D
var ie = InputEvent()
ie.type = InputEvent.MOUSE_BUTTON
ie.button_index = BUTTON_LEFT
ie.pos = get_viewport_transform() * (get_global_transform() * local_pos)
get_tree().input_event(ie)