Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Checking the stable version of the documentation...

뷰포트와 캔버스 변형

소개

노드에서 콘텐츠를 지역으로 그리는 순간부터 화면에 그려지는 시간까지 진행되는 2D 변환에 대한 개요입니다. 이 개요는 엔진에서 매우 저수준의 세부 정보를 설명합니다.

이 튜토리얼의 목표는 올바른 좌표계의 위치를 사용하여 입력 이벤트를 입력에 공급하는 방법을 가르치는 것입니다.

모든 좌표계 및 2D 변환에 대한 보다 광범위한 설명은 :ref:`doc_2d_coordinate_systems`에서 확인할 수 있습니다.

캔버스 변형

이전 캔버스 레이어 튜토리얼에서 언급한 것과 같이 모든 CanvasItem 노드(Node2D와 Control를 기반으로 두는 노드는 CanvasItem를 공통의 루트로 사용하는 것을 기억하세요)는 *Canvas Layer*에 있습니다. 모든 canvas layer는 :ref:`Transform2D <class_Transform2D>`로 접근할 수 있는 변형(옮김(translation), 회전, 스케일 등)이 있습니다.

또한 이전 튜토리얼에서도 다뤘듯이 노드는 기본적으로 내장된 캔버스의 레이어 0에서 그려집니다. 노드를 다른 레이어에 배치하려면 :ref:"CanvasLayer <class_CanvasLayer> 노드를 사용할 수 있습니다.

전역 캔버스 변형(Global canvas transform)

뷰포트에는 전역 캔버스 변형(또한 :ref:"Transform2D <class_Transform2D>도)이 있습니다. 이는 모든 각각의 Canvas Layer 변형에 영향을 미치는 마스터 변형입니다. 일반적으로 이 변형은 별로 쓸모가 없지만 Godot 편집기의 CanvasItem 편집기에서 사용된다.

늘이기 변형

마지막으로, 뷰포트에는 *늘이기 변형*이 있으며, 이는 화면 크기를 조절하거나 늘일 때 사용됩니다. 이 변형은 내부적으로 사용되지만( :ref:`doc_multiple_resolutions`에 설명됨) 각 뷰포트에서 수동으로 설정할 수도 있습니다.

Input events received in the MainLoop._input_event() callback are multiplied by this transform but lack the ones above. InputEvent 좌표를 지역 CanvasItem 좌표로 변환하기 위해서는 CanvasItem.make_input_local() 기능을 편의를 위해 추가했습니다.

캔버스 변형

루트 뷰포트는 :ref:`Window <class_Window>`입니다. :ref:`doc_multiple_resolutions`에 설명된 대로 창 콘텐츠의 크기를 조정하고 위치를 지정하기 위해 각 :ref:`Window <class_Window>`에는 창 변환*이 포함되어 있습니다. 예를 들어 *뷰포트*가 고정된 종횡비로 표시되도록 *창 측면의 검은색 막대를 담당합니다.

변형 순서

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

../../_images/viewport_transforms3.webp

변형 기능들

위 그래픽은 사용 가능한 일부 변환 기능을 보여줍니다. 모든 변환은 오른쪽에서 왼쪽으로 진행됩니다. 즉, 변환에 좌표계를 곱하면 왼쪽으로 더 좌표계가 되고, 변환의 :ref:`affine inverse <class_Transform2D_method_affine_inverse>`을 곱하면 좌표계가 더 오른쪽으로 됩니다.

# Called from a CanvasItem.
canvas_pos = get_global_transform() * local_pos
local_pos = get_global_transform().affine_inverse() * canvas_pos

마지막으로 CanvasItem 지역 좌표를 화면 좌표로 변환하려면 다음 순서로 곱하세요:

var screen_coord = get_viewport().get_screen_transform() * get_global_transform_with_canvas() * local_pos

그러나 화면 좌표를 사용하여 작업하는 것은 일반적으로 바람직하지 않음을 명심하세요. 권장되는 접근방식은 Canvas 좌표(CanvasItem.get_global_transform())로 자동으로 화면 해상도를 제대로 크기 조절할 수 있게 간단히 작동해야 합니다.

사용자 정의 입력 이벤트 제공

씬 트리에 사용자 지정 이벤트를 주는 것이 바람직합니다. 위의 지식으로 이벤트를 주려면 다음과 같은 방법으로 해야 됩니다.

var local_pos = Vector2(10, 20) # Local to Control/Node2D.
var ie = InputEventMouseButton.new()
ie.button_index = MOUSE_BUTTON_LEFT
ie.position = get_viewport().get_screen_transform() * get_global_transform_with_canvas() * local_pos
Input.parse_input_event(ie)