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.

컷 아웃(Cutout) 애니메이션

그것은 무엇입니까?

전통적으로 `컷아웃 애니메이션 <https://en.wikipedia.org/wiki/Cutout_animation>`__은 `스톱 모션 애니메이션 <https://en.wikipedia.org/wiki/Stop_motion>`__의 한 유형으로, 종이(또는 기타 얇은 재료)를 특별한 모양으로 자르고 캐릭터와 개체를 2차원 표현으로 배열합니다. 캐릭터의 신체는 일반적으로 여러 조각으로 구성됩니다. 조각들은 영화의 각 프레임마다 한 번씩 배열되고 촬영됩니다. 애니메이터는 각 샷 사이에 부품을 조금씩 움직이고 회전시켜 이미지가 순차적으로 빠르게 재생될 때 움직이는 듯한 착각을 불러일으킵니다.

디지털 시대의 도래와 함께 이 기술은 컴퓨터를 사용하여 가능하게 되었고 결과적으로 디지털 컷아웃을 이용한 애니메이션 TV 쇼의 양이 증가하게 되었습니다. 눈에 띄는 예로는 South Park 또는 Jake and the Never Land Pirates 있습니다.

비디오 게임에서 또한 이 기술이 유명합니다. 예로는 Paper Mario 또는 Rayman Origins 가 있습니다.

컷 아웃(Cutout) 애니메이션

Godot는 컷아웃 리그 작업을 위한 도구를 제공하며 작업 흐름에 이상적입니다:

  • 애니메이션 시스템이 엔진과 완전히 통합됨: 이 말은 즉 애니메이션은 텍스처, 스프라이트 크기, 중심점, 불투명함, 색깔 변조(modulation) 등과 같은 단순한 오브젝트의 움직임 이상의 것을 제어할 수 있습니다의.

  • 애니메이션 스타일 결합: AnimatedSprite2D를 사용하면 기존 셀 애니메이션을 컷아웃 애니메이션과 함께 사용할 수 있습니다. 셀 애니메이션에서는 서로 다른 애니메이션 프레임이 동일한 조각을 다르게 배치하는 대신 완전히 다른 그림을 사용합니다. 컷아웃 기반 애니메이션에서는 셀 애니메이션을 손, 발, 표정 변화 등 복잡한 부분에 선택적으로 사용할 수 있습니다.

  • 사용자 정의 모양 요소: UV 애니메이션, 변형 등을 허용하는 :ref:`Polygon2D <class_Polygon2D>`을 사용하여 사용자 정의 모양을 생성할 수 있습니다.

  • 입자 시스템: 또한 전통적인 애니메이션 구조와 혼합될 수 있습니다. 마법 효과, 제트팩 등에 유용함.

  • 커스텀 콜리더: 뼈대의 각기 다른 부분에 충돌기와 영향 영역을 설정합니다. 보스, 격투 게임 등에 적합합니다.

  • 애니메이션 트리: 여러 애니메이션의 복잡한 조합과 블렌딩을 가능하게 합니다. 3D에서 동일한 방식으로 작동합니다.

그리고 더 많이 있습니다!

GBot 만들기

이번 튜토리얼을 위해서 우리는 GBot 캐릭터의 조각들을 데모 컨텐츠로 사용할 것입니다. created by Andreas Esau.

../../_images/tuto_cutout_walk.gif

자산 가져오기: cutout_animation_assets.zip.

장비 설정

씬의 루트로 빈 Node2D를 만듭니다. 우리는 아래와 같이 작업할 것입니다:

../../_images/tuto_cutout1.png

모델의 첫 번째 노드는 엉덩이입니다. 일반적으로 2D와 3D 모두 엉덩이는 골격의 뿌리입니다. 이렇게 하면 애니메이션을 보다 쉽게 만들 수 있습니다:

../../_images/tuto_cutout2.png

다음은 몸통입니다. 몸통은 엉덩이의 자식이여야 하므로 자식 스프라이트를 만들어 몸통을 불러오고 나중에 적당히 맞춥니다:

../../_images/tuto_cutout3.png

좋아 보입니다. 우리 구조가 몸통을 돌려서 골격으로 작용하는지 봅시다. E 를 눌러 회전 모드로 들어가고 왼쪽 마우스 버튼으로 끌 수 있습니다. 회전 모드를 종료하려면 ESC 를 누르세요.

../../_images/tutovec_torso1.gif

회전 피벗이 잘못되어 조정할 필요가 있습니다.

Sprite 의 가운데에 있는 이 작은 십자가가 회전 중심점입니다:

../../_images/tuto_cutout4.png

중심점 조정하기

중심점은 스프라이트에서 offset 속성을 변경해서 조정될 수 있습니다:

../../_images/tuto_cutout5.png

그러나 시각적으로 할 수 있는 방법이 더 있습니다. 중심점이 있기를 원하는 지점에 커서를 올려놓고 단순히 "v" 키를 누르면 선택된 스프라이트의 중심점이 해당 위치로 움직입니다. 또는 툴바에 유사한 기능을 가진 툴이 있습니다.

../../_images/tutovec_torso2.gif

이제 좋아 보입니다! 오른쪽 팔을 시작으로 몸 부분을 계속 추가합시다. 구조에 넣을 때 스프라이트의 회전과 변환이 부모에 상대적이 되도록 하세요:

../../_images/tuto_cutout6.png

왼팔에 문제가 있습니다. 2D에서는 자식 노드가 상위 항목 앞에 나타납니다.

../../_images/tuto_cutout7.png

우리는 왼쪽 팔이 엉덩이와 몸통 *뒤*에 나타나기를 원합니다. 왼쪽 팔 노드를 엉덩이 뒤로(씬 계층에서 엉덩이 노드 위로) 이동할 수 있지만 그러면 왼쪽 팔이 더 이상 계층에서 적절한 위치에 있지 않습니다. 이는 몸통의 움직임에 영향을 받지 않는다는 것을 의미합니다. RemoteTransform2D 노드로 이 문제를 해결하겠습니다.

참고

Node2D에서 상속받은 노드의 Z 속성을 조정하여 깊이 순서 문제를 해결할 수도 있습니다.

RemoteTransform2D 노드

RemoteTransform2D라는 특수한 노드를 제공합니다. 이 노드는 원격 노드에 적용한 변형을 계층 어딘가에 있는 노드를 변형할 것입니다.

이를 통해 계층과 독립적인 뚜렷한 순서를 가질 수 있습니다.

만들기 a RemoteTransform2D 노드 몸통의 자식으로. remote_arm_l``라고 부르세요. 만들기 번째 내부의 다른 RemoteTransform2D 노드를 ``remote_hand_l``라고 부릅니다. 개의 새로운 노드의 ``Remote Path 속성을 사용하여 각각 arm_lhand_l 스프라이트를 대상으로 지정합니다.

../../_images/tuto_cutout9.png

원격 변형 노드를 움직이면 스프라이트가 움직입니다. 쉽게 애니메이션을 할 수 있고 캐릭터 자세를 잡을 수 있습니다:

../../_images/tutovec_torso4.gif

뼈대 완성하기

나머지 부분도 같은 과정을 거쳐서 뼈대를 완성합니다. 씬 결과는 다음과 같이 비슷하게 보여야 합니다:

../../_images/tuto_cutout10.png

결과 리그는 쉽게 애니메이션할 수 있습니다. 노드를 선택하고 회전하면 순운동학(FK)을 효율적으로 애니메이션할 수 있습니다.

단순한 객체와 리그의 경우에는 괜찮지만 다음과 같은 제한 사항이 있습니다.

  • 복잡한 리그에서는 메인 뷰포트에서 스프라이트를 선택하는 것이 어려울 수 있습니다. 대신 씬 트리가 부품을 선택하는 데 사용되므로 속도가 느려질 수 있습니다.

  • 역기구학(IK)은 손이나 발과 같은 말단을 애니메이션하는 데 유용하며 현재 상태에서는 리그와 함께 사용할 수 없습니다.

이러한 문제를 해결하기 위해서 Godot의 스켈레톤을 사용할 것입니다.

스켈레톤

Godot에는 노드 사이에 "뼈"를 생성하는 도우미가 있습니다. 뼈로 연결된 노드를 뼈대라고 합니다.

예를 들어 오른쪽 팔을 골격으로 만들어 봅시다. 골격을 만들기 위해서는 일련의 노드가 위에서 아래로 선택되어야 합니다:

../../_images/tuto_cutout11.png

그 다음 스켈레톤 설정 메뉴를 클릭하고 노드에서 맞춤 만들기 를 선택하세요.

../../_images/tuto_cutout12.png

이렇게 하면 팔을 덮는 뼈가 추가되지만 결과는 놀라울 수 있습니다.

../../_images/tuto_cutout13.png

손에 뼈가 없는 이유는 무엇입니까? Godot에서 뼈대는 노드를 그 부모와 연결합니다. 그리고 현재 노드의 자식은 없습니다. 이 지식을 바탕으로 다시 시도해 보겠습니다.

첫 번째 단계는 엔드포인트 노드를 생성하는 것입니다. 모든 종류의 노드가 가능하지만 :ref:`Marker2D <class_Marker2D>`이 편집기에 표시되므로 선호됩니다. 끝점 노드는 마지막 뼈대에 방향이 있는지 확인합니다.

../../_images/tuto_cutout14.png

이제 끝점부터 팔까지 전체 체인을 선택하고 뼈대를 만듭니다.

../../_images/tuto_cutout15.png

결과는 뼈대와 훨씬 유사하며 이제 팔과 팔뚝을 선택하고 애니메이션할 수 있습니다.

모든 중요한 사지에 대한 만들기 종점. 컷아웃의 모든 관절 부분에 대한 뼈대를 생성하고 엉덩이를 모든 부분 사이의 궁극적인 연결로 사용합니다.

엉덩이와 몸통을 연결할 때 추가 뼈가 생성되는 것을 볼 수 있습니다. Godot는 엉덩이 노드를 뼈로 씬 루트에 연결했는데, 우리는 그것을 원하지 않습니다. 이 문제를 해결하려면 루트와 힙 노드를 선택하고 Skeleton 메뉴를 열고 ``clear bones``를 클릭하세요.

../../_images/tuto_cutout15_2.png

당신의 최종 씬은 이렇게 보여야 할 것입니다.

../../_images/tuto_cutout16.png

손에 두 번째 엔드포인트 세트가 있다는 것을 눈치챘을 것입니다. 이는 곧 이해가 될 것입니다.

이제 전체 그림이 조작되었으므로 다음 단계는 IK 체인을 설정하는 것입니다. IK 체인을 사용하면 말단을 보다 자연스럽게 제어할 수 있습니다.

IK 체인

IK는 역운동학을 의미합니다. 이는 우리가 만든 것과 같은 손, 발 및 기타 리그 끝 부분의 위치를 애니메이션화하는 편리한 기술입니다. 지면의 특정 위치에 캐릭터의 발 포즈를 취하고 싶다고 상상해 보세요. IK 체인이 없으면 발의 각 모션은 여러 다른 뼈대(적어도 정강이와 허벅지)를 회전하고 위치를 지정해야 합니다. 이는 매우 복잡하고 부정확한 결과를 초래할 수 있습니다. IK를 사용하면 정강이와 허벅지가 자체 조정되는 동안 발을 직접 움직일 수 있습니다.

참고

Godot의 IK 체인은 현재 런타임이 아닌 편집기에서만 작동합니다. 이는 키프레임 설정 프로세스를 쉽게 하기 위한 것이며 현재 절차적 애니메이션과 같은 기술에는 유용하지 않습니다.

IK 체인을 만들려면 끝점에서 체인 베이스까지 뼈의 체인을 선택합니다. 예를 들어 오른쪽 다리에 대한 IK 체인을 만들려면 다음을 선택합니다.

../../_images/tuto_cutout17.png

그런 다음 IK에 대해 이 체인을 활성화합니다. 편집 > IK 체인 만들기로 이동합니다.

../../_images/tuto_cutout18.png

결과적으로 체인의 베이스가 *노란색*으로 변합니다.

../../_images/tuto_cutout19.png

IK 체인이 설정되면 체인 베이스(예: 발)의 자식 또는 손자를 잡고 이동합니다. 위치를 조정하면 체인의 나머지 부분도 조정되는 것을 볼 수 있습니다.

../../_images/tutovec_torso5.gif

애니메이션 설정

다음 섹션은 컷아웃 리그용 애니메이션 제작에 대한 팁 모음입니다. Godot의 애니메이션 시스템 작동 방식에 대한 자세한 내용은 :ref:`doc_introduction_animation`를 참조하세요.

씬 노드 속성 접근하기

애니메이션 편집기 창이 열리면 상단 도구 모음에 특별한 상황별 요소가 나타납니다.

../../_images/tuto_cutout20.png

키 버튼은 현재 재생 헤드 위치에서 선택한 객체나 뼈에 대한 위치, 회전 및 크기 조정 키프레임을 삽입합니다.

키 버튼 왼쪽에 있는 "loc", "rot" 및 "scl" 토글 버튼은 해당 기능을 수정하여 세 가지 속성 중 키프레임이 생성될 대상을 지정할 수 있습니다.

이것이 어떻게 유용할 수 있는지에 대한 그림은 다음과 같습니다. 이미 스케일에만 애니메이션을 적용하는 두 개의 키프레임이 있는 노드가 있다고 가정해 보세요. 동일한 노드에 중첩된 회전 동작을 추가하고 싶습니다. 회전 동작은 이미 설정된 스케일 변경과 다른 시간에 시작되고 끝나야 합니다. 새 키프레임을 추가할 때 토글 버튼을 사용하여 회전 정보만 추가할 수 있습니다. 이렇게 하면 기존 배율 애니메이션을 방해하는 원치 않는 배율 키프레임을 추가하는 것을 방지할 수 있습니다.

프로젝트 생성하기

휴식 포즈는 게임에서 활성화된 다른 포즈가 없을 때 컷아웃 리그를 설정해야 하는 기본 포즈로 생각하십시오. 만들기 휴식 자세는 다음과 같습니다.

1. Make sure the rig parts are positioned in what looks like a "resting" arrangement.

  1. AnimationPlayer 노드 만들기

  2. 장비에서 모든 노드를 선택합니다(상자 선택이 제대로 작동해야 함).

4. Make sure the "loc", "rot", and "scl" toggle buttons are all active in the toolbar.

5. Press the key button. Keys will be inserted for all selected parts storing their current arrangement. This pose can now be recalled when necessary in your game by playing the "rest" animation you've created.

../../_images/tuto_cutout21.png

회전만 수정

컷아웃 리그를 애니메이션할 때 변경해야 하는 것은 노드의 회전뿐인 경우가 많습니다. 위치와 규모는 거의 사용되지 않습니다.

따라서 키를 삽입할 때 대부분의 경우 "rot" 토글만 활성화하는 것이 편리할 수 있습니다.

../../_images/tuto_cutout22.png

이렇게 하면 위치와 크기에 대해 원치 않는 애니메이션 트랙이 생성되는 것을 방지할 수 있습니다.

IK 체인

IK 체인을 편집할 때 키프레임을 추가하기 위해 전체 체인을 선택할 필요는 없습니다. 체인의 끝점을 선택하고 키프레임을 삽입하면 체인의 다른 모든 부분에 대한 키프레임도 자동으로 삽입됩니다.

스프라이트를 부모 뒤로 시각적으로 이동

때로는 애니메이션 중에 상위 노드를 기준으로 노드의 시각적 깊이를 변경해야 하는 경우가 있습니다. 등 뒤에서 무언가를 꺼내서 앞으로 내밀고 있는 카메라를 바라보는 캐릭터를 생각해 보십시오. 이 애니메이션 동안 전체 팔과 손에 있는 개체는 캐릭터의 몸체를 기준으로 시각적 깊이를 변경해야 합니다.

이를 돕기 위해 모든 Node2D 상속 노드에 키프레임 가능한 "Behind Parent" 속성이 있습니다. 장비를 계획할 때 수행해야 할 움직임에 대해 생각하고 "Behind Parent" 및/또는 RemoteTransform2D 노드를 어떻게 사용할지 생각해 보세요. 중복되는 기능을 제공합니다.

../../_images/tuto_cutout23.png

여러 키에 대한 이징 곡선 설정

여러 키프레임에 동일한 이징 곡선을 한 번에 적용하려면 다음을 수행하세요.

  1. 관련 키를 선택합니다.

  2. 노드 탭에서 AnimationPlayer 노드를 클릭해서 뷰포트 하단의 애니메이션 패널을 엽니다.

  3. 전환 편집기에서 원하는 곡선을 클릭하여 적용합니다.

../../_images/tuto_cutout24.png

2D 골격 변형

골격 변형을 사용하면 컷아웃 리그를 강화하여 단일 조각을 유기적으로 변형할 수 있습니다(예: 곤충 캐릭터가 걸을 때 흔들리는 안테나).

이 프로세스는 :ref:`별도 튜토리얼 <doc_2d_skeletons>`에 설명되어 있습니다.