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.

3D 소개

Godot의 2D 게임 개발 도구에는 전용 2D 렌더링 엔진, 물리 시스템 및 2D 경험 제작을 위해 특별히 맞춤화된 기능이 포함되어 있습니다. TileMap 시스템을 사용하여 레벨을 효율적으로 디자인하고, 2D 스프라이트 또는 컷아웃 애니메이션으로 캐릭터에 애니메이션을 적용하고, 동적 씬 조명을 위해 2D 조명을 활용할 수 있습니다. 내장된 2D 입자 시스템을 사용하면 복잡한 시각 효과를 만들 수 있으며 Godot는 사용자 정의 셰이더도 지원하여 그래픽을 향상시킵니다. Godot의 접근성 및 유연성과 결합된 이러한 기능은 매력적인 2D 게임을 만들기 위한 견고한 기반을 제공합니다.

../../_images/2d_platformer_demo.webp

자산 라이브러리에서 2D 플랫폼 게임 데모를 이용할 수 있습니다.

이 페이지에서는 2D 작업공간과 이에 대해 알아보는 방법을 보여줍니다.

3D에 대한 소개를 보려면 :ref:`doc_introduction_to_3d`를 참조하세요.

2D 작업공간

2D 작업공간을 사용하여 2D 장면, 디자인 레벨 작업을 하거나 사용자 인터페이스를 생성합니다. 2D 작업공간으로 전환하려면 씬 트리에서 2D 노드를 선택하거나 편집기 상단 가장자리에 있는 작업공간 선택기를 사용할 수 있습니다.

../../_images/2d_editor_viewport.webp

3D와 마찬가지로 작업 공간 선택기 아래의 탭을 사용하여 현재 열려 있는 장면 간에 변경하거나 더하기(+) 버튼을 사용하여 새 장면을 만들 수 있습니다. 왼쪽 및 오른쪽 도크는 :ref:`editor 소개 <toc-editor-interface>`에서 익숙할 것입니다.

씬 선택기 아래에는 기본 도구 모음이 있고, 기본 도구 모음 아래에는 2D 뷰포트가 있습니다.

FileSystem 도크에서 호환되는 노드를 끌어서 놓아 뷰포트에 노드로 추가할 수 있습니다. 드래그 앤 드롭을 하면 드래그된 노드가 선택한 노드의 형제로 추가됩니다(루트 노드를 선택한 경우 하위로 추가됩니다). 삭제할 때 :kbd:`Shift`을 계속 누르면 노드가 선택한 노드의 하위 항목으로 추가됩니다. 삭제할 때 :kbd:`Alt`을 누르고 있으면 노드가 루트 노드의 하위 항목으로 추가됩니다. 드롭 시 :kbd:`Alt + Shift`를 누르고 있으면 해당되는 경우 노드 유형을 선택할 수 있습니다.

메인루프(MainLoop)

기본 도구 모음의 일부 버튼은 3D 작업 영역의 버튼과 동일합니다. 버튼 위에 마우스 커서를 1초간 올려놓으면 단축키에 대한 간략한 설명이 제공됩니다. 일부 버튼에는 다른 키를 누르는 경우 추가 기능이 있을 수 있습니다. 기본 단축키를 포함한 각 버튼의 주요 기능에 대한 요약은 아래 왼쪽에서 오른쪽으로 제공됩니다.

../../_images/2d_toolbar.webp
  • 선택 모드 (Q): 뷰포트에서 노드를 선택할 수 있습니다. 뷰포트에서 노드를 마우스 왼쪽 버튼으로 클릭하면 선택됩니다. 직사각형을 마우스 왼쪽 버튼으로 클릭하고 드래그하면 직사각형 경계 내의 모든 노드가 선택됩니다. 선택하는 동안 :kbd:`Shift`을 누르고 있으면 선택 항목에 더 많은 노드가 추가됩니다. :kbd:`Shift`을 누른 상태에서 선택한 노드를 클릭하면 노드가 선택 해제됩니다. 이 모드에서는 선택한 노드를 드래그하여 이동할 수 있고, :kbd:`Ctrl`을 눌러 일시적으로 회전 모드로 전환하거나 빨간색 원을 사용하여 크기를 조정할 수 있습니다. 노드를 여러 개 선택하면 이동과 회전만 가능합니다. 이 모드에서는 스내핑이 활성화된 경우 회전 및 배율 조정에서 스내핑 옵션을 사용하지 않습니다.

  • 이동 모드 (W): 선택한 노드에 대한 이동(또는 번역) 모드를 활성화합니다. 자세한 내용은 :ref:`doc_introduction_to_2d_the_viewport`를 참조하세요.

  • 회전 모드 (E): 선택한 노드에 대한 회전 모드를 활성화합니다. 자세한 내용은 :ref:`doc_introduction_to_2d_the_viewport`를 참조하세요.

  • **배율 모드**(S): 선택한 노드의 두 축에 배율 조정 장치를 활성화하고 표시합니다. 자세한 내용은 :ref:`doc_introduction_to_2d_the_viewport`를 참조하세요.

  • 클릭한 위치에 선택 가능한 노드 목록 표시: 설명에서 알 수 있듯이 클릭한 영역에 두 개 이상의 노드가 있는 경우 클릭한 위치에 선택 가능한 노드 목록을 컨텍스트 메뉴로 제공합니다.

  • 회전 피벗: 노드(s)를 회전하도록 회전 피벗을 설정합니다. 추가된 노드에는 예외를 제외하고 기본적으로 x: 0, y: 0``에 회전 피벗이 있습니다. 예를 들어 ``centered 속성이 ``true``로 설정된 경우 :ref:`Sprite2D <class_Sprite2D>`의 기본 피벗은 중심입니다. 노드의 회전 피벗을 변경하려면 이 버튼을 클릭하고 왼쪽 클릭하여 새 위치를 선택합니다. 노드는 이 점을 고려하여 회전합니다. 여러 노드를 선택한 경우 이 아이콘은 모든 선택한 노드에서 공통적으로 사용할 임시 피벗을 추가합니다. :kbd:`Shift`을 누르고 이 버튼을 클릭하면 선택한 노드의 중심에 피벗이 생성됩니다. 스냅 옵션 중 하나가 활성화된 경우 드래그할 때 피벗도 해당 옵션에 스냅됩니다.

  • **팬 모드**(G): 실수로 노드를 선택하지 않고 뷰포트에서 탐색할 수 있습니다. 다른 모드에서는 :kbd:`Space`을 누른 상태에서 마우스 왼쪽 버튼으로 드래그하여 동일한 작업을 수행할 수도 있습니다.

  • 눈금자 모드: 활성화한 후 뷰포트를 클릭하면 현재 전역 x 및 y 좌표가 표시됩니다. 한 위치에서 다른 위치로 드래그하면 거리가 픽셀 단위로 측정됩니다. 대각선으로 드래그하면 삼각형이 그려지고 x, y 및 축에 대한 각도(도 단위)를 포함하여 대상까지의 총 거리 측면에서 별도의 거리가 표시됩니다. R 키는 눈금자를 활성화합니다. 스냅이 활성화된 경우 그리드 수를 기준으로 측정값도 표시됩니다.

../../_images/2d_ruler_with_snap.webp

스냅이 활성화된 눈금자를 사용합니다.

  • 스마트 스냅 사용: 이동, 회전 및 배율 조정 모드에 대한 스마트 스냅을 전환합니다. 그리고 회전 피벗. 스냅 도구 옆에 있는 점 3개 메뉴를 사용하여 사용자 정의하세요.

  • 그리드 스냅 사용: 이동 및 배율 모드, 회전 피벗 및 눈금자를 위한 그리드에 대한 스냅을 전환합니다. 스냅 도구 옆에 있는 점 3개 메뉴를 사용하여 사용자 정의하세요.

이동 모드, 회전 모드, 크기 조정 모드, 눈금자 및 회전 피벗이 스냅을 사용하도록 그리드 설정을 사용자 정의할 수 있습니다. 이를 위해 점 3개 메뉴를 사용하세요.

../../_images/2d_snapping_options_menu.webp
  • 회전 스냅 사용: 구성된 회전 설정을 사용하여 스냅을 전환합니다.

  • 스케일 스냅 사용: 구성된 스케일링 단계 설정을 사용하여 스냅을 토글합니다.

  • 스냅 상대: 선택한 노드의 현재 변환 값을 기반으로 스냅 사용을 토글합니다. 예를 들어 그리드가 32x32 픽셀로 설정되어 있고 선택한 노드가 ``x: 1, y: 1``에 있는 경우 이 옵션을 활성화하면 그리드가 일시적으로 ``x: 1, y: 1``만큼 이동합니다.

  • 픽셀 스냅 사용: 스냅에 하위 픽셀 사용을 전환합니다. 활성화하면 위치 값이 정수가 되고, 비활성화하면 하위 픽셀 이동이 십진수 값으로 활성화됩니다. 런타임 속성의 경우 Node2D 노드의 경우 Project Settings > Rendering > 2D > Snapping 속성을 확인하고 Control 노드의 경우 `Project Settings > GUI > General > Snap Controls to Pixels`를 확인하는 것이 좋습니다.

  • 스마트 스냅핑: 활성화된 경우 특정 위치에 스냅할 수 있는 일련의 옵션을 제공합니다.

    • 상위 항목에 스냅: 상위 항목의 가장자리에 스냅합니다. 예를 들어, 이 기능이 활성화된 동안 하위 컨트롤 노드의 크기를 조정하면 상위 컨트롤의 경계에 맞춰집니다.

    • 노드 앵커에 스냅: 노드의 앵커에 스냅합니다. 예를 들어 노드 컨트롤의 앵커가 다른 위치에 배치된 경우 이를 활성화하면 앵커의 측면과 모서리에 맞춰집니다.

    • 노드 측면에 스냅: 회전 피벗 또는 앵커 위치 지정과 같은 노드 측면에 스냅합니다.

    • 노드 중심에 스냅: 회전 피벗이나 앵커 위치 지정 등을 위해 노드의 중심에 스냅합니다.

    • 다른 노드에 스냅: 이동하거나 크기를 조정하는 동안 다른 노드에 스냅합니다. 편집기에서 노드를 정렬하는 데 유용합니다.

    • 안내선에 맞추기: 가로 또는 세로 눈금자를 사용하여 그린 사용자 정의 안내선에 맞춰집니다. 아래에서 눈금자와 안내선에 대해 자세히 알아보세요.

../../_images/2d_snapping_options.webp
  • 스냅 구성: 위에 표시된 창을 열고 일련의 스냅 매개변수를 제공합니다.

    • 그리드 오프셋: 원점을 기준으로 그리드를 이동할 수 있습니다. x``y``는 별도로 조정할 수 있습니다.

    • 그리드 단계: 각 그리드 사이의 거리(픽셀)입니다. x``y``는 별도로 조정할 수 있습니다.

    • Primary Line Every: 메인 라인을 표시하기 위해 무한한 라인을 그리기 위한 그리드 수입니다.

    • 회전 오프셋: 회전 스냅을 이동하기 위한 오프셋을 설정합니다.

    • 회전 단계: 스냅 정도를 정의합니다. 예를 들어 15는 회전 스냅이 활성화되고 회전 모드가 사용되는 경우 노드가 15도의 배수로 회전하고 스냅됨을 의미합니다.

    • 스케일 단계: 스케일링 증분 계수를 결정합니다. 예를 들어 0.1이면 스케일링 스냅이 활성화되고 스케일링 모드가 사용되면 0.1단계로 스케일링이 변경됩니다.

  • **선택한 노드**를 잠급니다(Ctrl + L). 선택한 노드를 잠궈 뷰포트에서 선택 및 이동을 방지합니다. 버튼을 다시 클릭하면(또는 Ctrl + Shift + L 사용) 선택한 노드의 잠금이 해제됩니다. 잠긴 노드는 씬 트리에서만 선택할 수 있습니다. 씬 트리에서 노드 이름 옆에 있는 자물쇠로 쉽게 식별할 수 있습니다. 이 자물쇠를 클릭하면 노드도 잠금 해제됩니다.

  • 그룹 선택한 노드 (Ctrl + G). 이를 통해 자식 노드 중 하나를 선택한 경우 루트 노드를 선택할 수 있습니다. :kbd:`Ctrl + G`를 사용하면 그룹이 해제됩니다. 또한 씬 트리에서 그룹 해제 버튼을 클릭하면 동일한 작업이 수행됩니다.

  • 스켈레톤 옵션: Skeleton2D 및 Bone2D 작업을 위한 옵션을 제공합니다.

    • 뼈 표시: 선택한 노드의 뼈 표시 여부를 토글합니다.

    • 노드(s)에서 Bone2D 노드(s) 만들기: 선택한 노드(s)를 Bone2D로 변환합니다.

더 보기

GDScript는 GDScript 형식 문자열도 지원합니다.

  • 보기 메뉴: 뷰포트 보기를 제어하는 옵션을 제공합니다. 해당 옵션은 뷰포트에 크게 의존하므로 뷰포트 2개 섹션에서 다룹니다.

보기 메뉴 옆에 추가 버튼이 표시될 수 있습니다. 이 장의 시작 부분에 있는 도구 모음 이미지에는 Sprite2D가 선택되었기 때문에 추가 Sprite2D 버튼이 나타납니다. 이 메뉴는 특정 노드 또는 선택 사항에 대해 작업하기 위한 몇 가지 빠른 작업과 도구를 제공합니다. 예를 들어 다각형을 그리는 동안 점을 추가, 수정, 제거할 수 있는 버튼이 제공됩니다.

좌표계

2D 편집기에는 3D와 달리 x``y``라는 두 개의 축만 있습니다. 또한 시야각도 고정되어 있습니다.

뷰포트에서는 두 가지 색상의 두 선이 화면을 무한히 가로지르는 것을 볼 수 있습니다. 빨간색은 x축, 녹색은 y축입니다. Godot에서는 오른쪽과 아래로 가는 것이 긍정적인 방향입니다. 이 두 선이 교차하는 곳이 원점입니다: x: 0, y: 0.

루트 노드는 일단 추가되면 이 위치에 원점을 갖게 됩니다. 노드를 선택한 후 move 또는 scale 모드로 전환하면 노드의 오프셋 위치에 기즈모가 표시됩니다. 기즈모는 x축과 y축의 양의 방향을 가리킵니다. 이동 모드에서는 녹색 선을 드래그하여 y 축에서만 이동할 수 있습니다. 마찬가지로 빨간색 선을 잡고 x 축에서만 이동할 수 있습니다.

스케일 모드에서 기즈모는 정사각형 모양을 갖습니다. 녹색 및 빨간색 사각형을 잡고 끌어서 y 또는 x 축에서 노드의 크기를 조정할 수 있습니다. 음수 방향으로 드래그하면 노드가 수평 또는 수직으로 반전됩니다.

뷰포트 2개

뷰포트는 레벨이나 사용자 인터페이스를 시각적으로 디자인하려는 경우 가장 많은 시간을 보내는 영역이 될 것입니다.

../../_images/2d_editor_viewport_with_viewmenu.webp

마우스 가운데 버튼을 클릭하고 드래그하면 뷰가 이동됩니다. 뷰포트의 오른쪽이나 아래쪽에 있는 스크롤바를 사용해도 보기가 이동됩니다. 또는 G 또는 Space 키를 사용할 수 있습니다. `Editor Settings > Editors > Panning > Simple Panning`를 활성화하면 드래그할 필요 없이 :kbd:`Space`만으로 직접 패닝을 활성화할 수 있습니다.

뷰포트에는 왼쪽 상단에 버튼이 있습니다. 중앙 보기 선택한 노드를 화면 중앙에 배치합니다. 노드가 많은 큰 씬이 있고 씬 트리에서 선택된 노드를 보려는 경우에 유용합니다. 그 옆에는 확대/축소 컨트롤이 있습니다. - 축소, ++ 확대, 백분율 기본값이 100%인 숫자를 클릭합니다. 또는 마우스 가운데 스크롤을 사용하여 확대(위로 스크롤) 및 축소(아래로 스크롤)할 수 있습니다.

뷰포트의 왼쪽 및 위쪽 가장자리에 있는 검은색 막대는 **눈금자**입니다. 이를 사용하여 뷰포트에서 방향을 잡을 수 있습니다. 기본적으로 눈금자는 뷰포트의 픽셀 좌표를 100픽셀 간격으로 표시합니다. 확대/축소 비율을 변경하면 표시된 값이 변경됩니다. `Grid Snap`를 활성화하거나 스냅 옵션을 변경하면 눈금자의 배율과 표시된 값이 업데이트됩니다.

측정을 수행하거나 노드를 정렬하는 데 도움이 되는 여러 사용자 정의 가이드를 만들 수도 있습니다.

../../_images/2d_editor_guidelines.webp

씬에 하나 이상의 노드가 있는 경우 가로 또는 세로 눈금자에서 뷰포트 방향으로 드래그하여 안내선을 만들 수 있습니다. 보라색 가이드가 나타나 해당 위치를 보여주며 마우스를 놓으면 그대로 유지됩니다. 눈금자의 교차점에 있는 회색 사각형을 드래그하여 수평 안내선과 수직 안내선을 동시에 만들 수 있습니다. 안내선은 해당 눈금자로 다시 드래그하여 위치를 변경할 수 있으며, 눈금자까지 완전히 다시 드래그하여 제거할 수 있습니다.

Smart Snap 메뉴를 사용하여 생성된 가이드에 스냅을 활성화할 수도 있습니다.

참고

라인을 생성할 수 없거나 이전에 생성된 가이드가 보이지 않는 경우 뷰포트의 View 메뉴를 확인하여 라인이 보이는지 확인하세요. :kbd:`Y`은 기본적으로 표시 여부를 전환합니다. 또한 씬에 하나 이상의 노드가 있는지 확인하세요.

도구 모음에서 선택한 도구에 따라 뷰포트에서 왼쪽 클릭이 기본 동작을 갖습니다. 예를 들어, Select Mode`는 뷰포트에서 왼쪽 클릭된 노드를 선택합니다. 때로는 왼쪽 클릭을 수정자(예: :kbd:`Ctrl 또는 Shift)와 결합하여 보조 작업을 수행할 수도 있습니다. 예를 들어 선택 또는 이동 모드에서 노드를 드래그하는 동안 :kbd:`Shift`을 계속 누르면 이동하는 동안 노드가 단일 축에 스냅됩니다.

뷰포트를 마우스 오른쪽 버튼으로 클릭하면 노드를 생성하거나 선택한 위치에서 씬을 인스턴스화하는 두 가지 옵션이 제공됩니다. 하나 이상의 노드가 선택된 경우 마우스 오른쪽 버튼을 클릭하면 선택한 노드를 이 위치로 이동할 수 있는 옵션도 제공됩니다.

뷰포트에는 뷰포트의 모양을 변경하는 여러 옵션을 제공하는 보기 메뉴가 있습니다.

  • 그리드: 스냅을 사용할 때만 그리드를 항상 표시하거나 전혀 표시하지 않을 수 있습니다. 제공된 옵션을 사용하여 전환할 수도 있습니다.

  • 도우미 표시: 변환 작업이 시작된 경우 이전 변환 속성(위치, 배율 조정 또는 회전)을 사용하여 노드 윤곽선의 임시 표시를 토글합니다. Control 노드의 경우 크기 조정 매개변수도 표시됩니다. 델타를 보는 데 유용합니다.

  • 눈금자 표시: 가로 및 세로 눈금자의 표시 여부를 전환합니다. 눈금자에 대한 자세한 내용은 :ref:`doc_introduction_to_2d_the_viewport`를 참조하세요.

  • 가이드 표시: 생성된 가이드의 표시 여부를 전환합니다. 생성 방법은 :ref:`doc_introduction_to_2d_the_viewport`를 참조하세요.

  • 원점 표시: ``x: 0, y: 0``에 그려진 녹색 및 빨간색 원점 선 표시를 전환합니다.

  • 뷰포트 표시: 남색 직사각형으로 표시된 게임의 기본 뷰포트 표시 여부를 토글합니다. 이는 데스크탑 플랫폼의 기본 창 크기이기도 하며 Project Settings > Display > Window > Size`로 이동하여 `Viewport Width`Viewport Height`를 설정하여 변경할 수 있습니다.

  • 기즈모: `Position`(십자 아이콘으로 표시), `Lock`(자물쇠로 표시), `Groups`(두 개의 사각형으로 표시) 및 `Transformation`(녹색 및 빨간색 선으로 표시) 표시기의 표시 여부를 전환합니다.

  • 중앙 선택: 뷰포트 내부의 중앙 보기 버튼과 동일합니다. 선택한 노드를 뷰 중앙에 배치합니다. :kbd:`F`이 기본 바로가기입니다.

  • 선택할 프레임: `Center Selection`와 유사하지만 화면 내용에 맞게 확대/축소 비율을 변경합니다. :kbd:`Shift + F`가 기본 단축키입니다.

  • 가이드 지우기: 화면에서 모든 가이드를 삭제합니다. 나중에 사용하려면 다시 생성해야 합니다.

  • 캔버스 배율 미리보기: 뷰포트의 확대/축소 비율 또는 보기가 변경될 때 편집기에서 캔버스 배율 미리보기를 전환합니다. 게임을 실행하지 않고 크기 조정 및 이동 후 컨트롤이 어떻게 보이는지 확인하는 데 유용합니다.

  • 미리보기 테마: 게임을 실행할 필요 없이 사용 가능한 테마 중에서 선택하여 편집기에서 제어 항목의 모양을 변경할 수 있습니다.

Flow Control(흐름 제어)

Node2D 는 2D의 기본 노드입니다. Control 는 모든 GUI의 기본 노드입니다. 이러한 추론에 따라 3D 엔진은 모든 3D에 Spatial 를 사용합니다.

Displaying 3D nodes in 2D

It is possible to display 3D nodes in a 2D scene by using a SubViewport. You can see this in the demo 3D in 2D Viewport.

../../_images/3d_in_2d_demo_editor.webp