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 시차

소개

시차는 텍스처가 카메라를 기준으로 서로 다른 속도로 이동하도록 하여 깊이를 시뮬레이션하는 데 사용되는 효과입니다. Godot는 이 효과를 달성하기 위해 Parallax2D 노드를 제공합니다. 하지만 여전히 넘어지기 쉬울 수 있으므로 이 페이지에서는 일부 속성에 대한 심층적인 설명과 몇 가지 일반적인 실수를 수정하는 방법을 제공합니다.

참고

이 페이지에서는 ParallaxLayer 및 ParallaxBackground 노드 위에 사용하는 것이 권장되는 Parallax2D 사용 방법을 설명합니다.

시작하기

시차 노드는 사물을 자식 노드로 렌더링하는 노드 추가를 지원하므로 하나 이상의 노드를 사용하여 각 레이어를 구성할 수 있습니다. 시작하려면 독립적으로 스크롤하려는 각 노드 또는 노드를 자체 시차 노드의 하위 항목으로 배치합니다. 아래 이미지처럼 사용된 텍스처의 왼쪽 상단이 (0, 0) 교차점에 있는지 확인하세요. 이것이 중요한 이유는 positioning 섹션을 참조하세요.

위의 씬는 :ref:`Sprite2D <class_sprite2d>`에서 더 높은 구름을 위해 준비된 하나의 텍스처를 사용하지만 레이어를 구성하기 위해 간격을 두고 여러 개의 노드를 쉽게 사용할 수도 있습니다.

스크롤바(Scrollbar).

시차 효과의 중추는 scroll_scale 속성입니다. 이는 스크롤 속도 승수로 작동하여 레이어가 각 축 세트에 대해 카메라와 다른 속도로 이동할 수 있도록 합니다. 값이 1이면 시차 노드가 카메라와 동일한 속도로 스크롤됩니다. 스크롤할 때 이미지가 더 멀리 보이도록 하려면 1보다 낮은 값을 사용하고 0이면 이미지가 완전히 중지됩니다. 무언가가 카메라에 더 가까이 나타나도록 하려면 1보다 큰 값을 사용하여 스크롤 속도를 더 빠르게 만드세요.

위의 씬는 5개의 레이어로 구성됩니다. 좋은 scroll_scale 값은 다음과 같습니다:

• (0.7, 1) - 숲

• (0.5, 1) - 힐스

• (0.3, 1) - 낮은 구름

• (0.2, 1) - 더 높은 구름

• (0.1, 1)-하늘

아래 비디오는 이러한 값이 게임 내 스크롤에 어떤 영향을 미치는지 보여줍니다.

무한 반복

:ref:`Parallax2D<class_parallax2d>`는 텍스처에 무한히 반복되는 듯한 느낌을 주는 보너스 효과를 제공합니다. :ref:`repeat_size<class_parallax2d_property_repeat_size>`는 카메라가 설정된 값만큼 스크롤할 때 노드에 위치를 앞뒤로 스냅하도록 지시합니다. 이 효과는 값만큼 오프셋된 모든 하위 캔버스 항목에 단일 반복을 추가하여 달성됩니다. 카메라가 이미지와 해당 반복 사이를 스크롤하는 동안 눈에 보이지 않게 다시 스냅백되어 반복되는 이미지처럼 보입니다.

섬세한 효과이기 때문에 익숙하지 않은 사용자가 설정에서 실수를 하기 쉽습니다. 사용자가 직면하는 몇 가지 일반적인 문제의 "방법"과 "이유"를 살펴보겠습니다.

불쌍한 크기

무한 반복 효과는 원활하게 반복되도록 설계된 이미지가 있고 :ref:`repeat_size<class_parallax2d_property_repeat_size>`를 설정하기 전 뷰포트와 크기가 동일하거나 더 클 때 사용하기 가장 쉽습니다. 이 작업을 위해 설계된 자산을 얻을 수 없는 경우 크기와 관련하여 이미지를 더 잘 준비하기 위해 수행할 수 있는 다른 작업이 있습니다.

어떻게 작동하는 지의 예제입니다:

뷰포트 크기는 500x300이지만 텍스처는 288x208임을 알 수 있습니다. :ref:`repeat_size<class_parallax2d_property_repeat_size>`를 이미지 크기로 설정하면 원본 텍스처가 뷰포트를 덮지 않기 때문에 무한 반복 효과가 제대로 스크롤되지 않습니다. :ref:`repeat_size<class_parallax2d_property_repeat_size>`를 뷰포트의 크기로 설정하면 간격이 커집니다. 우리는 무엇을 할 수 있나요?

뷰포트를 더 작게 만드세요

가장 간단한 대답은 뷰포트를 텍스처와 같은 크기 또는 더 작게 만드는 것입니다. **프로젝트 설정 > 디스플레이 > 창**에서 Viewport Width 및 Viewport Height 설정을 배경에 맞게 변경합니다.

Parallax2D 크기 조정

완벽한 픽셀 스타일을 목표로 하지 않거나 약간의 흐릿함을 신경쓰지 않는다면 화면에 맞게 텍스처 크기를 더 크게 조정할 수 있습니다. :ref:`Parallax2D<class_parallax2d>`의 :ref:`scale<class_node2d_property_scale>`를 설정하면 모든 하위 텍스처가 이에 따라 확장됩니다.

씬을 저장하세요.

Parallax2D 노드의 크기를 화면을 덮을 만큼 크게 늘릴 수 있습니다. Parallax2D.repeat_size 및 :ref:`Sprite2D.region_rect<class_sprite2d_property_region_rect>`와 같은 일부 설정은 배율을 고려하지 않으므로 배율에 따라 이러한 값을 조정해야 합니다.

텍스처 가져오기

프로세스 초기에 자식 노드를 준비하여 오른발부터 시작할 수도 있습니다. 반복하고 싶지만 너무 작은 :ref:`Sprite2D<class_sprite2d>`가 있는 경우 다음을 수행하여 반복할 수 있습니다.

• :ref:`texture_repeat<class_canvasitem_property_texture_repeat>`를 :ref:`CanvasItem.TEXTURE_REPEAT_ENABLED<class_canvasitem_constant_TEXTURE_REPEAT_ENABLED>`로 설정

• :ref:`region_enabled<class_sprite2d_property_region_enabled>`를 ``true``로 설정

• :ref:`region_rect<class_sprite2d_property_region_rect>`를 뷰포트를 덮을 수 있을 만큼 큰 텍스처 크기의 배수로 설정합니다.

아래에서 이미지를 두 번 반복하면 화면을 덮을 만큼 커지는 것을 볼 수 있습니다.

Godot 버전 관리

사용자가 실수로 모든 텍스처를 (0,0) 중앙에 배치하는 것을 보는 것은 흔한 일입니다.

이는 무한 반복 효과에 문제를 일으키므로 피해야 합니다. "무한 반복 캔버스"는 ``(0,0)``에서 시작하여 repeat_size 값의 크기까지 오른쪽 아래로 확장됩니다.

텍스처가 (0,0) 교차점의 중심에 있으면 무한 반복 캔버스는 부분적으로만 덮여 있으므로 부분적으로만 반복됩니다.

``repeat_times``를 늘리면 이 문제가 해결됩니까?

:ref:`repeat_times<class_parallax2d_property_repeat_times>`를 기술적으로 늘리는 것은 일부 시나리오에서 작동할 수 있지만 무차별 대입 솔루션이며 해결하도록 설계된 문제는 아닙니다(이에 대해서는 잠시 후에 살펴보겠습니다). 더 나은 해결 방법은 반복 효과가 어떻게 작동하는지 이해하고 시차 텍스처를 적절하게 설정하는 것입니다.

먼저 캔버스의 네거티브 부분에 텍스처가 흘러나오는지 확인하세요. 시차 노드에 사용된 텍스처가 ``(0,0)``에서 시작하는 "무한 반복 캔버스" 내부에 맞는지 확인하세요. 이렇게 하면 :ref:`Parallax2D.repeat_size<class_parallax2d_property_repeat_size>`가 올바르게 설정되면 뷰포트보다 크기가 같거나 큰 이미지의 단일 루프가 있는 다음과 같아야 합니다.

이미지가 화면에서 어떻게 스크롤되는지 생각해 보면 빨간색 직사각형(:ref:`repeat_size<class_parallax2d_property_repeat_size>`로 결정) 내부에 있는 내용을 표시하는 것으로 시작하고 노란색 직사각형 내부에 도달하면 이미지를 앞으로 압축하여 영원히 스크롤되는 듯한 느낌을 줍니다.

이미지를 "무한 반복 캔버스"에서 멀리 떨어진 곳에 배치한 경우 카메라가 노란색 직사각형에 도달하면 아래 이미지처럼 앞으로 이동하기 전에 이미지의 절반이 잘립니다.

스크롤 오프셋

시차 텍스처가 이미 올바르게 작동하고 있지만 다른 지점에서 시작하는 것을 선호하는 경우 Parallax2D 속성이 함께 제공됩니다. 예를 들어 이미지가 288x208인 경우 scroll_offset<class_parallax2d_property_scroll_offset>`를 ``(-144,0)` 또는 ``(144,0)``로 설정하면 이미지 중간에서 시작할 수 있습니다.

반복

이상적으로는 이 가이드에 따르면 시차 텍스처가 축소된 경우에도 화면을 덮을 만큼 충분히 큽니다. 지금까지 우리는 288x208 뷰포트 내부에 완벽하게 맞는 288x208 텍스처를 가지고 있었습니다. 그러나 :ref:`Camera2D.zoom<class_camera2d_property_zoom>`를 ``(0.5, 0.5)``로 설정하여 축소하면 문제가 발생합니다.

기본 확대/축소 수준에서 뷰포트에 대한 모든 것이 올바르게 설정되어 있어도 축소하면 뷰포트보다 작아져 무한 반복 효과가 깨집니다. :ref:`repeat_times<class_parallax2d_property_repeat_times>`가 도움을 줄 수 있는 곳입니다. ``3``(뒤와 앞쪽에 하나의 추가 반복) 값을 설정하면 이제 무한 반복 효과를 수용할 수 있을 만큼 충분히 커집니다.

이러한 텍스처를 수직으로 반복하려는 경우 repeat_size<class_parallax2d_property_repeat_size>`에 대해 ``y` 값을 지정했을 것입니다. :ref:`repeat_times<class_parallax2d_property_repeat_times>`는 자동으로 위와 아래에도 반복을 추가합니다. 이는 수평 시차일 뿐이므로 이미지 위와 아래에 빈 블록이 남습니다. 이 문제를 어떻게 해결하나요? 우리는 창의력을 발휘해야 합니다! 이 예에서는 하늘을 더 높게 늘리고 잔디 스프라이트를 더 낮게 늘립니다. 이제 텍스처는 일반 확대/축소 수준과 절반 크기로 축소를 지원합니다.

화면 분할

Godot에서 분할 화면 게임을 만들기 위한 대부분의 튜토리얼은 첫 번째 SubViewport의 :ref:`Viewport.world_2d<class_viewport_property_world_2d>`를 두 번째 SubViewport에 할당하기 위해 작은 스크립트를 작성하는 것으로 시작하여 공유 디스플레이를 갖게 됩니다. 두 화면 간에 시차 효과를 공유하는 방법에 대한 질문이 자주 나타납니다.

시차 효과는 카메라를 기준으로 다양한 텍스처의 위치를 이동하여 원근감을 가짜로 만듭니다. 여러 대의 카메라가 있는 경우 텍스처가 동시에 두 위치에 있을 수 없기 때문에 이는 당연히 문제가 됩니다!

이는 시차 노드를 두 번째(또는 세 번째 또는 네 번째) :ref:`SubViewport<class_subviewport>`에 복제하여 여전히 달성할 수 있습니다. 2인용 게임의 설정은 다음과 같습니다.

물론 이제 두 배경이 두 하위 뷰포트 모두에 표시됩니다. 우리가 원하는 것은 각 시차가 해당 뷰포트에만 표시되는 것입니다. 다음을 수행하여 이를 달성할 수 있습니다.

• 모든 시차 노드를 기본값 :ref:`visibility_layer<class_canvasitem_property_visibility_layer>`인 1로 유지합니다.

• 첫 번째 SubViewport의 :ref:`canvas_cull_mask<class_viewport_property_canvas_cull_mask>`를 레이어 1과 2로만 설정합니다.

• 두 번째 SubViewport에도 동일한 작업을 수행하되 레이어 1과 3을 사용합니다.

• 첫 번째 SubViewport의 시차 노드를 공통 상위로 지정하고 해당 :ref:`visibility_layer<class_canvasitem_property_visibility_layer>`를 2로 설정합니다.

• 두 번째 SubViewport의 시차 노드에 대해 동일한 작업을 수행하되 레이어 3을 사용합니다.

어떻게 작동하나요? 캔버스 항목에 SubViewport의 :ref:`canvas_cull_mask<class_viewport_property_canvas_cull_mask>`와 일치하지 않는 :ref:`visibility_layer<class_canvasitem_property_visibility_layer>`가 있는 경우 일치하더라도 모든 자식 노드가 숨겨집니다. 우리는 이것을 유리하게 사용하여 부모가 지원되는 :ref:`visibility_layer<class_canvasitem_property_visibility_layer>`가 없는 시차 노드의 렌더링을 SubViewport가 차단하도록 합니다.

편집기에서 코드 실행하기

4.3 이전에는 모든 레이어를 자체 ParallaxBackground 속성을 활성화하고, 개별 레이어의 크기를 조정하는 것이 권장되었습니다. 이 방법은 항상 올바르게 수행하기 까다로웠지만 ParallaxBackground 대신 :ref:`CanvasLayer<class_canvaslayer>`를 사용하면 여전히 달성할 수 있습니다.

참고

또 다른 권장 사항은 `KoBeWi의 "Parallax2D Preview" 애드온 <https://github.com/KoBeWi/Godot-Parallax2D-Preview>`_입니다. 몇 가지 다른 미리보기 모드를 제공하며 매우 편리합니다!