키

"keys"를 설정하여 Spine에서 애니메이팅이 이루어집니다. 키는 전환의 시작 및 종료 시간과 값을 정의합니다. 키 사이의 모든 시간에 대해 값이 보간됩니다. 스켈레톤을 애니메이팅하는 기술은 한마디로 요약하면 키에 의해 정의된 포즈와 타임라인에서 키의 시간입니다.

애니메이션

키를 설정하기 전에 애니메이팅 모드에 있고, 트리 보기에서 키의 표시점을 설정하거나 애니메이션 뷰에서 키를 선택하여 애니메이션이 활성화되어 있는지 확인하십시오.

트리에서 Animations 노드를 선택한 다음 New... Animation을 클릭하여 새 애니메이션을 만들 수 있습니다.

폴더

애니메이션은 폴더로 구성할 수 있습니다. 폴더를 만들려면 애니메이션을 선택한 다음 New... Folder를 클릭합니다. 애니메이션은 드래그하여 폴더 간에 이동할 수 있습니다.

내보낸 스켈레톤 데이터에서 폴더 이름은 애니메이션 이름 앞에 추가되어 Spine 런타임에서 사용되는 최종 이름이 생성됩니다. 예를 들어, emotes 폴더에 wave 애니메이션이 있다면 런타임 시 애니메이션 이름은 emotes/wave가 됩니다.

타임라인

애니메이팅 모드에서 스켈레톤의 포즈는 현재 타임라인 위치와 애니메이션 키에서 가져옵니다. 타임라인은 그래프, 도프시트, 타임라인 및 오디오 뷰에 표시됩니다.

키가 설정되면 그래프 또는 dopesheet 뷰의 타임라인 아래에 나타납니다. 타임라인의 주황색 다이아몬드는 하나 이상의 키가 있는 프레임을 나타냅니다. 주황색 세로 선은 가장 높은 프레임이 있는 키를 표시하며, 이 프레임은 애니메이션의 지속 시간을 결정합니다.

뷰포트에서 이동하는 것과 마찬가지로 마우스 오른쪽 버튼으로 드래그하면 타임라인이 좌우 또는 위아래로 이동됩니다.

타임라인 위로 마우스 휠을 스크롤하면 타임라인이 확대되거나 축소됩니다. 도프시트의 왼쪽 하단에 있는 확대/축소 슬라이더는 현재 확대/축소 수준을 나타내며 드래그할 수 있습니다. 확대/축소 슬라이더의 오른쪽에는 모든 키가 표시되도록 타임라인을 확대/축소하는 Zoom Keys 버튼이 있습니다.

타임라인 위치

타임라인 위치는 청록색 세로 선으로 표시됩니다. 타임라인 위치는 마우스 왼쪽 버튼을 클릭하거나 드래그하여 설정할 수 있습니다. 타임라인에서 드래그하는 것을 "스크러빙"이라고 하며 시간이 지남에 따라 스켈레톤의 포즈가 어떻게 바뀌는지 빠르게 확인할 수 있습니다. shift 키를 길게 눌러 프레임 스내핑을 비활성화합니다(아래의 프레임 참조).

반복이 활성화된 후 타임라인이 마지막 프레임을 지나서 스크러빙되면 해당 위치가 첫 번째 프레임으로 다시 루핑되지만 마지막 프레임 앞에서 스크러빙이 시작된 경우에만 해당됩니다. 이렇게 하면 스크러빙을 루핑 애니메이션에 사용할 수 있습니다. 이 동작을 원하지 않으시면 마지막 프레임 뒤에서 스크러빙을 시작하거나 반복을 비활성화하십시오.

프레임

타임라인은 "프레임"이라는 시간 단위로 나뉩니다. 프레임을 사용하면 시간에 따라 개별 위치를 선택한 다음 정확히 같은 시간에 여러 키를 설정하기가 더 쉽습니다. 기본적으로 타임라인에서는 초당 30프레임을 사용하지만, 타임라인은 재생 뷰에서 변경할 수 있습니다.

프레임은 편의상으로만 존재합니다. 재생 중에 타임라인 위치가 프레임 간에 이동합니다(보간이 비활성화되지 않은 경우). 타임라인이 표시하는 것보다 높거나 낮은 프레임 속도로 재생할 수 있습니다.

프레임 스내핑

타임라인을 클릭하거나 스크러빙할 때 shift 키를 길게 눌러 프레임 스내핑을 비활성화하고 프레임 사이의 타임라인 위치를 설정합니다. 이렇게 하면 재생될 때와 같이 애니메이션이 부드럽게 보간되는 것을 확인할 수 있고 필요한 경우 프레임 사이에 키를 설정할 수 있습니다.

소수 자리 프레임은 매우 짧은 전환에도 사용할 수 있습니다. 예를 들어, 뼈에는 프레임 15에 이동 키가 있고, 그다음에 다른 키가 프레임 15.01에 있을 수 있습니다.

반복

비활성화하면 애니메이션이 끝난 후에도 재생이 계속됩니다.

활성화하면 키가 있는 가장 높은 프레임에 애니메이션이 도달하면 프레임 0에서 재생이 다시 시작됩니다. 여러 스켈레톤에 활성 애니메이션이 있는 경우 모든 스켈레톤 중에서 키가 있는 가장 높은 프레임이 사용됩니다.

반복은 애니메이션별로 저장되지만 JSON 또는 바이너리 데이터로 내보내지지 않습니다.

키 설정

자동 키가 활성화되지 않고 애니메이팅 모드에서 스켈레톤이 변경되면, 변경 사항이 키처럼 애니메이션에 자동 저장되지 않습니다. 타임라인 위치가 변경되면 키가 지정되지 않은 변경 사항은 손실됩니다. 변경 사항을 유지하려면 변경된 각 속성에 대한 키 버튼을 클릭하여 변경 사항에 키를 지정해야 합니다. 또는 Key Edited 단축키를 사용하여 키보드에서 K를 눌러 변경된 모든 속성에 키를 지정할 수 있습니다.

속성의 키 버튼 색상은 현재 프레임에 키가 없는 경우 녹색, 변경되었지만 아직 키가 지정되지 않은 경우 주황색, 해당 속성에 대한 현재 프레임에 키가 있는 경우 빨간색입니다.

자동 키

메인 툴바에서 Auto Key를 활성화하면 변경이 될 때마다 키가 자동으로 설정됩니다. 이 옵션은 매우 편리하며 항상 자동 키를 활성화하는 것이 일반적입니다. 하지만 잘못하여 원치 않는 키가 생성되지 않도록 주의하셔야 합니다.

키 표시

그래프 및 도프시트 툴바의 Key Shown 버튼을 누르면 그래프에 표시된 모든 곡선 또는 도프시트에 표시된 모든 행에 대한 키가 설정됩니다. ctrl+shift+L(Mac의 경우 cmd+shift+L) 핫키를 사용하여 이 작업을 수행할 수도 있습니다.

이미 키가 있는 모든 속성에 키를 지정하면 현재 포즈를 구성하는 키가 생성됩니다. 이 옵션은 해당 키를 다른 프레임으로 이동하여 이동한 프레임에서 동일한 포즈를 얻을 수도 있기 때문에 매우 유용합니다.

키를 지정할 수 있는 속성

다음 섹션에는 Spine에서 키를 지정할 수 있는 모든 속성과 키 버튼을 찾을 수 있는 위치가 나열됩니다.

뼈 변형

회전, 이동, 크기 조정 또는 기울이기 키는 메인 툴바에서 해당 툴의 숫자 입력란 옆에 있는 키 버튼을 클릭하여 설정됩니다.

또한 회전, 이동, 크기 조정 또는 기울이기에 대해 키가 지정되지 않은 변경 사항이 뼈에 있으면 트리의 뼈 옆에 주황색 키 버튼이 나타납니다. 이 버튼을 클릭하면 키가 지정되지 않은 변형 변경에 대한 키가 생성됩니다.

X 및 Y 분리

기본적으로 뼈에 대한 각각의 이동, 크기 조정 및 기울이기 키는 X 및 Y 모두에 설정됩니다. 많은 애니메이션에 이것만으로도 충분하며 도프시트 및 그래프에 표시되는 타임라인 수를 줄입니다. 이 옵션은 런타임 시 적용되어야 하는 타임라인이 적기 때문에 약간 더 효율적이기도 합니다.

이 옵션이 필요한 애니메이션의 경우 트리 속성에서 뼈에 대한 Separate 확인란을 선택하여 X와 Y에 별도로 키를 지정할 수 있습니다. 분리되면 뼈의 X와 Y가 현재 애니메이션의 그래프와 도프시트에 별도로 표시됩니다.

슬롯 어태치먼트

슬롯에 대해 표시할 어태치먼트를 설정하려면 트리에서 표시점을 클릭하여 원하는 어태치먼트를 숨기거나 표시합니다. 슬롯의 어태치먼트 표시점에 키를 지정하려면 트리에서 슬롯 옆에 있는 키 버튼(아래에 주황색으로 표시)을 클릭합니다.

몇 프레임마다 다른 이미지가 표시되도록 슬롯 어태치먼트에 키를 지정하여 프레임별 애니메이션을 얻을 수 있습니다. 사용 예는 프레임별 데모 또는 예제 프로젝트를 참조하십시오.

슬롯 색상

슬롯 색상에 키를 지정하려면 트리에서 색상 버튼 옆에 있는 키 버튼을 클릭합니다.

색상 및 알파 분리

기본적으로 슬롯의 각 색상 키는 색상(RGB) 및 알파(A) 모두에 설정됩니다. 많은 애니메이션에 이것만으로도 충분하며 도프시트 및 그래프에 표시되는 타임라인 수를 줄입니다. 이 옵션은 런타임 시 적용되어야 하는 타임라인이 적기 때문에 약간 더 효율적이기도 합니다.

이 옵션이 필요한 애니메이션의 경우 트리 속성에서 슬롯의 Separate 확인란을 선택하여 색상 및 알파에 별도로 키를 지정할 수 있습니다.

분리되면 슬롯의 색상(RGB) 및 알파(A) 타임라인이 현재 애니메이션의 그래프와 도프시트에 별도로 표시됩니다. 또한 슬롯 색상에 대해 두 개의 색상 버튼이 나타납니다. 왼쪽 버튼을 클릭하면 알파가 포함된 색상이 표시되고 알파에 키를 지정할 수 있습니다. 오른쪽 버튼을 클릭하면 불투명한 색상이 표시되고 색상에 키를 지정할 수 있습니다. 두 버튼 중 하나를 클릭하면 알파, 색상 또는 둘 다 중 어느 하나를 변경할 수 있는 동일한 슬롯 색상 대화상자가 열립니다.

드로우 오더

트리의 Draw Order 노드 옆에 있는 키 버튼은 현재 드로우 오더에 대한 키를 설정합니다. 자세한 내용은 드로우 오더를 참조하십시오.

이벤트

이벤트 키 설정을 위한 키 버튼은 트리의 각 이벤트 옆에 있습니다. 이벤트의 정수, 부동 소수점 수, 문자열, 볼륨 및 밸런스 속성은 함께 키가 지정됩니다.

이벤트의 속성은 키를 설정하기 전에 변경할 수 있습니다. 이렇게 하면 필요한 이벤트 수를 줄일 수 있습니다. 예를 들어, 단일 particles 이벤트를 가질 수 있고 런타임 시 표시할 파티클 이름에 대해 각 키의 문자열 값을 사용할 수 있습니다.

변형 키

메쉬, 경로, 경계 상자 또는 클리핑 어태치먼트의 정점 위치에 대한 변형 키를 설정하려면 트리에서 어태치먼트 옆에 있는 키 버튼을 클릭합니다.

일반적으로 가중치가 기본으로 사용되어야 하며 다음과 같은 이유로 변형 키만 드물게 사용됩니다.

• 가중치를 사용하여 변형할 뼈에 키를 지정하면 애니메이션 데이터가 거의 필요하지 않습니다.
• 변형 키는 특히 가중치와 결합될 때 애니메이션 데이터의 크기를 상당히 증가시킬 수 있습니다. 각 변형 키에는 각 정점에 영향을 미치는 모든 뼈의 정점 위치가 저장됩니다(이는 어태치먼트에 필요한 정점 변형의 수입니다).
• 변형 키와 가중치는 모두 연결된 메쉬에 사용할 수 있지만, 가중치로 애니메이팅된 뼈는 다른 어태치먼트에 사용할 수도 있습니다.
• 어태치먼트의 모든 정점은 함께 키가 지정됩니다. 이렇게 하면 변형을 사용하여 동일한 어태치먼트의 다른 부분을 애니메이팅하는 것이 어려울 수 있으므로 변형 키가 스트레이트 어헤드를 사용하여 설정되도록 해야 합니다.
• Rotate 툴을 사용하여 정점을 회전시킬 수 있지만 변형 키 사이의 보간은 한 키에서 다음 키까지 직선으로 정점을 이동시킵니다.

변형 강조 표시

애니메이팅 모드에서 이동된 개별 정점은 핑크색으로 표시됩니다. ctrl 키를 길게 누른 다음 정점을 두 번 클릭하여 변형되거나 변형되지 않은 모든 정점을 선택합니다.

IK 제약조건

IK 제약조건에 대한 키를 설정하려면 트리에서 IK 제약조건 옆에 있는 키 버튼을 클릭합니다. IK 제약조건의 믹스, 부드러움, 구부러지는 방향, 압축 및 늘이기 속성은 함께 키가 지정됩니다.

변형 제약조건

변형 제약조건에 대한 키를 설정하려면 트리에서 변형 제약조건 옆에 있는 키 버튼을 클릭합니다. 변형 제약조건의 회전, X, Y, X 크기 조정, Y 크기 조정, Y 기울이기 믹스는 함께 키가 지정됩니다.

경로 제약조건

경로 제약조건에 대한 키를 설정하려면 트리 속성에서 경로 제약조건에 대한 스페이싱, 위치 또는 믹스 옆에 있는 키 버튼을 클릭합니다. 경로 제약조건의 믹스에 키를 지정할 때 회전 및 이동 믹스는 함께 키가 지정됩니다.

닫힘이 아닌 경로에 대해 경로의 위치에 키를 지정할 때, 위치를 0에서 100으로 변경한 다음 즉시 0에서 100으로 다시 변경해야 하는 경우가 있습니다. 이 작업은 소수 자리 프레임을 사용하여 수행할 수 있습니다. 예를 들어 위치 0, 100, 0 및 100에 대해 프레임 0, 30, 30.01 및 60에서 키를 설정합니다.

키 조작

도프시트 및 그래프 뷰에는 키를 조작할 수 있는 툴바 버튼이 제공됩니다.

클립보드 버튼

왼쪽에서 오른쪽으로:

• Copy 선택한 키를 클립보드에 복사합니다. 복사는 ctrl+C(Mac의 경우 cmd+C)를 눌러 수행할 수도 있습니다.
• Cut 선택한 키를 클립보드에 복사한 다음 삭제합니다. 잘라내기는 ctrl+X(Mac의 경우 cmd+X)를 눌러 수행할 수도 있습니다.
• Delete 선택한 키를 삭제합니다. 삭제는 키보드에서 Delete를 누르거나 키를 두 번 클릭하여 수행할 수도 있습니다.
• Paste 현재 타임라인 위치에 마지막으로 복사한 키를 붙여넣습니다. 붙여넣기는 ctrl+V(Mac의 경우 cmd+V)를 눌러 수행할 수도 있습니다.

뼈 변형, 색상, 슬롯 어태치먼트 및 변형 키는 붙여넣기 전에 해당 항목을 선택하여 다른 뼈, 슬롯 또는 어태치먼트에 붙여넣을 수 있습니다.

이동

Shift를 활성화한 다음 키를 이동하면 이동된 키 이후의 모든 키도 이동됩니다. Shift는 키를 드래그하면서 alt(Mac의 경우 option) 키를 길게 눌러 사용할 수도 있습니다. 이 옵션은 이동된 키 이후의 키 타이밍에 영향을 미치지 않고 키 사이의 타이밍을 조정할 때 유용할 수 있습니다.

오프셋

Offset 버튼은 루핑 애니메이션 키를 이동하는 데 사용되며, 키가 애니메이션의 끝을 통과하면 키를 다시 시작으로 래핑합니다. 이렇게 하면 뒤따르기 동작 및 겹치기 동작을 쉽게 조정할 수 있으며, 이 원칙은 애니메이션을 자연스럽게 보이게 하는 중요한 원칙입니다.

활성화된 후 키가 애니메이션의 끝이나 시작을 지나면, 키가 래핑되어 애니메이션의 지속 시간 내에 유지됩니다. 또한 키가 애니메이션의 시작과 끝에 설정되어 루핑된 움직임을 유지합니다.

Offset은 도프시트 또는 그래프에서 키를 드래그하면서 ctrl+alt(Mac의 경우 cmd+alt) 키를 길게 눌러 활성화할 수도 있습니다.

Offset을 사용하려면 첫 번째 키와 마지막 키가 같아야 합니다. 이 옵션은 지금도 거의 언제나 루핑 애니메이션의 경우입니다.

Offset을 사용하면 애니메이션이 루핑되는 위치에 새 키가 생성됩니다. 동일한 키를 다시 이동하면, 두 번째 새 키를 생성하지 않고 원래 키가 기억되고 오프셋이 다시 수행됩니다. 그러나 다른 키를 선택하면 원래 키는 무시되며 Offset을 다시 사용하면 두 번째 새 키가 생성됩니다.

루프를 사용하여 Offset에 사용되는 시작과 끝 프레임을 제어할 수 있습니다. 그렇지 않으면 프레임 0과 애니메이션의 가장 높은 프레임이 사용됩니다.

정리

애니메이션의 트리 속성에 있는 Clean Up 버튼은 불필요한 키를 모두 삭제합니다. 이러한 키는 애니메이션의 포즈에 영향을 주지 않고 안전하게 삭제할 수 있는 키입니다. 여기에는 연속으로 여러 번 동일한 값의 키 지정, 설정 포즈와 동일한 값의 키 지정 및 기타 여러 시나리오가 포함됩니다.

대개 애니메이션을 디자인할 때 키를 자유롭게 설정한 다음 나중에 Clean Up을 사용하는 것이 편리합니다. 키가 적으면 애니메이션에서 작업이 더 쉬워지고, 특히 변형 키가 제거되면 내보내는 애니메이션 데이터의 크기가 줄어듭니다. 또한 키가 적으면 런타임 시 애니메이션을 적용할 때 CPU 사용량이 약간 줄어듭니다.

Clean Up은 일반적으로 사용하기에 안전하지만 필요한 키를 제거하는 경우가 있을 수 있습니다. 가장 일반적인 시나리오는 애니메이션을 더 높은 AnimationState 트랙에 적용하려는 경우입니다. 이 경우 낮은 트랙의 애니메이션을 재정의하려면 키가 필요할 수 있습니다. AnimationState가 런타임 시 사용되지 않거나 런타임 코드를 사용하여 키를 찾고 키의 값을 변경하는 경우와 같은 다른 드문 시나리오가 있을 수 있습니다.

직접 체험

이제 Spine에서 키 지정이 어떻게 작동하는지 직접 살펴볼 즐거운 시간입니다. 아직 자신의 스켈레톤을 설정하지 않으셨다면 예제 프로젝트 중 하나를 연 다음 트리에서 Animations 노드를 클릭한 다음 New... Animation을 클릭하여 새 애니메이션을 만들 수 있습니다. 애니메이팅 모드에서 스켈레톤을 프레임 0에 놓고 키를 설정합니다(예: K를 누르거나 자동 키를 활성화하여 설정합니다). 그런 다음 프레임 30을 클릭하고, 스켈레톤을 다르게 놓은 후 키를 설정합니다. 드래그하여 타임라인을 스크러빙하거나 재생을 클릭하여 작동 중인 애니메이션을 확인합니다.

동영상

파트 1:

파트 2:

다음: 애니메이팅 이전: 툴