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.

2D 소개

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

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

2D 플랫폼 게임 데모는 애셋 라이브러리에서 사용 가능합니다.

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

팁

3D에 대한 소개를 원하시면 3D 소개를 참조하세요.

2D 작업 공간

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

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

3D와 마찬가지로 작업 공간 선택기 아래의 탭을 사용하여 현재 열려 있는 씬 간에 변경하거나 더하기 (+) 버튼을 사용하여 새 씬을 만들 수 있습니다. 왼쪽 및 오른쪽 독은 편집기 소개에서 익숙할 것입니다.

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

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

메인루프(MainLoop)

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

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

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

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

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

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

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

  • 팬 모드 (G): 실수로 노드를 선택하지 않고 뷰포트에서 탐색할 수 있습니다. 다른 모드에서는 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만큼 이동합니다.

  • Use Pixel Snap: Toggles the use of subpixels for snapping. If enabled, the position values will be integers, disabling will enable subpixel movement as decimal values. For the project at runtime, consider going to the Project Settings and enabling Rendering > 2D > Snapping for Node2D nodes, or GUI > General > Snap Controls to Pixels for Control nodes.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Group selected nodes (Ctrl + G). This allows selection of the root node if any of the children are selected. Using Ctrl + Shift + G ungroups them. Additionally, clicking the ungroup button in the scene tree performs the same action.

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

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

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

더 보기

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

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

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

좌표계

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

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

A root node will have its origin at this position once added. Switching to the move or scale modes after selecting a node will display the gizmos at the node's offset position. The gizmos will point to the positive directions of the x and y axes. In the move mode, you can drag the green line to move only in the y axis. Similarly, you can hold the red line to move only in the x axis.

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

뷰포트 2개

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

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

Middle-clicking and dragging the mouse will pan the view. The scrollbars on the right or bottom of the viewport also move the view. Alternatively, the G or Space keys can be used. If you enable Editor Settings > Editors > Panning > Simple Panning, you can activate panning directly with Space only, without requiring dragging.

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

The black bars at the viewport's left and top edges are the rulers. You can use them to orient yourself in the viewport. By default, the rulers will display the pixel coordinates of the viewport, numbered at 100 pixel steps. Changing the zoom factor will change the shown values. Enabling Grid Snap or changing the snapping options will update the ruler's scaling and the shown values.

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

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

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

You can also enable snapping to the created guides using the Smart Snap menu.

참고

If you cannot create a line, or do not see previously created guides, make sure that they are visible by checking the View menu of the viewport. Y toggles their visibility, by default. Also, make sure you have at least one node in the scene.

Depending on the tool chosen in the toolbar, left-clicking will have a primary action in the viewport. For example, the Select Mode will select the left-clicked node in the viewport. Sometimes, left-clicking can be combined with a modifier (e.g., Ctrl, or Shift) to perform secondary actions. For example, keeping Shift pressed while dragging a node in the Select or Move modes will try to snap the node in a single axis while moving.

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

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

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

  • Show Helpers: Toggles the temporary display of an outline of the node, with the previous transform properties (position, scaling, or rotation) if a transform operation has been initiated. For Control nodes, it also shows the sizing parameters. Useful to see the deltas.

  • 눈금자 표시: 가로 및 세로 눈금자의 표시 여부를 전환합니다. 눈금자에 대한 자세한 내용은 뷰포트 2개를 참조하세요.

  • 가이드 표시: 생성된 가이드의 표시 여부를 전환합니다. 생성 방법은 뷰포트 2개를 참조하세요.

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

  • Show Viewport: Toggles the visibility of the game's default viewport, indicated by an indigo-colored rectangle. It is also the default window size on desktop platforms, which can be changed by going to Project Settings > Display > Window > Size and setting Viewport Width and Viewport Height.

  • Gizmos: Toggles the visibility of Position (shown with cross icon), Lock (shown with padlock), Groups (shown with two squares), and Transformation (shown with green and red lines) indicators.

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

  • Frame to Selection: Similar to Center Selection, but also changes the zoom factor to fit the contents in the screen. Shift + F is the default shortcut.

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

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

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

Flow Control(흐름 제어)

CanvasItem은 2D의 기본 노드입니다. Node2D는 2D 게임 오브젝트의 기본 노드이며, Control은 모든 GUI의 기본 노드입니다. 3D에서는 Node3D를 사용합니다.

2D에 3D 노드 표시하기

SubViewport를 사용하여 3D 노드를 2D 씬에서 표시할 수 있습니다. 3D in 2D Viewport에서 데모 영상을 확인할 수 있습니다.

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