키 프레임

Spine에서 "키 프레임"을 사용하여 애니메이션을 만들 수 있으며 키 프레임을 줄여서 간단히 "키"라고 부르기도 합니다. 키는 시작과 끝 값을 정합니다. 키 사이의 어떤 위치에서든 값을 보간하거나 "트윈드"할 수 있습니다. 뼈대를 애니메이팅하는 그림은 타임라인에서 키와 키의 위치에 따라 정해진 포즈에 해당합니다.

키를 설정하기 전에 Spine이 애니메이트 모드에 있는지, 편집할 애니메이션의 트리에서 가시성 항목을 켰는지를 확인해주세요.

타임라인

애니메이트 모드에서 뼈대의 포즈는 키와 현재 타임라인 위치에서 정해집니다. 타임라인은 도프시트 뷰에서 찾을 수 있습니다.

타임라인에는 1초당 30개의 프레임이 들어 있습니다. 타임라인에서 프레임을 클릭하면 새로운 타임라인 위치를 설정하게 됩니다. 키가 설정되면 타임라인 아래의 도프시트에 나타납니다. 도프시트에서 타임라인과 도프시트에서의 작업에 대한 더 많은 정보를 볼 수 있습니다.

키 설정

애니메이트 모드에서 뼈대에 변경사항이 생기면 저장이 자동으로 되지는 않습니다. 타임라인 위치가 변경되면 변경사항은 잃게 됩니다. 툴바 또는 트리에서 적당한 키 버튼을 클릭하여 변경사항을 유지하려면 키잉해야 합니다.

현재 프레임에 키가 없다면 키 버튼은 초록색으로 표시되며, 변경사항이 생겼지만 아직 키잉이 안 된 상태이면 노란색으로, 현재 프레임에 키가 있으면 빨간색으로 표시됩니다.

트랜스폼

툴바에서 각 툴의 숫자 입력 칸 옆에 있는 열쇠모양 버튼을 클릭하여 회전, 이동, 크기 조정할 키를 설정할 수 있습니다.

그리고 뼈의 트랜스폼에 키잉이 되지 않은 변경사항이 있을 경우 노란 열쇠모양 버튼이 트리에서 뼈 옆에 나타납니다. 이 버튼을 클릭하면 키잉되지 않은 변경사항에 대해서만 키를 생성합니다.

키 X와 Y를 각각 이동하거나 크기 조정하는 것은 현재 불가능하며 X와 Y는 항상 함께 키로 입력되어야 합니다.

회전

회전이 키일 되었을 때 회전하는 방향은 항상 가장 짧은 경로입니다. 180도 보다 많이 회전시키고 싶다면 키가 하나 이상 필요합니다. 360도를 회전시키려면 키 3개가 필요합니다.

어태치먼트

슬롯에 보이는 어태치먼트를 키잉하려면 어태치먼트 옆의 가시성 도트를 클릭하여 트리에서 어태치먼트를 표시하거나 숨겨야 합니다. 그러면 슬롯의 키 버튼이 노란색으로 바뀌고, 버튼을 클릭하면 키를 설정하게 됩니다.

슬롯 색상

애니메이션에서 어태치먼트에 색깔을 입히려면 어태치먼트가 아니라 슬롯에 색깔을 설정해야 합니다. 트리 아래의 슬롯 속성에 색깔이 나타나 있습니다.

알파를 0으로 설정하면 어태치먼트를 보이지 않게 할 수 있지만 이는 어태치먼트를 숨기는 비효율적인 방법입니다. 대부분의 게임 툴킷은 보이는 이미지를 그릴 때 0알파의 이미지를 동일한 공을 들여 그립니다. 트리에서 가시성 도트의 체크를 해제하는 것이 더욱 효율적입니다. 어태치먼트에서 더 많은 정보를 볼 수 있습니다.

드로우 오더

트리의 Draw Order 노드 옆에 있는 키 버튼은 현재 드로우 오더의 키를 설정합니다. 드로우 오더에서 더 많은 정보를 볼 수 있습니다.

이벤트

이벤트 키를 설정하는 키 버튼은 트리의 각 이벤트 옆에 있습니다. 키를 설정하기 전에 이벤트의 속성을 바꿀 수 있습니다. 이벤트에서 더 많은 정보를 볼 수 있습니다.

메쉬

메쉬의 정점 위치의 키를 설정하려면 트리의 메쉬 옆에 있는 키 버튼을 클릭합니다. 메쉬에서 더 많은 정보를 볼 수 있습니다.

IK

IK 제약조건 믹스 키를 설정하고 방향을 굽히려면 트리에서 IK 제약조건 옆의 키 버튼을 클릭합니다. 믹스와 굽힘 방향은 함께 키잉되어야 합니다. IK 제약조건에서 더 많은 정보를 볼 수 있습니다.

플립

트리 아래에 있는 뼈 속성에서 뼈의 플립 방향을 키잉할 수 있습니다. X와 Y 플립은 개별적으로 키잉됩니다.

빠른 작업

키보드에서 KKey Edited의 단축키이며 아직 키잉되지 않은 모든 변경사항에 대한 키를 설정합니다.

도프시트 뷰에서 Auto Key를 켜면 변경사항이 생길 때마다 자동으로 키를 설정합니다. 자동 키에서 더 많은 정보를 볼 수 있습니다.

뼈대가 잘못된 타임라인 위치에서 포즈를 잡았고 아직 키잉이 되지 않았다면 타임라인 위치가 변하면 포즈도 잃게 됩니다. 새 타임라인 위치에서 포즈를 복원하려면 ctrl+Z(Mac에서는 cmd+Z)를 눌러 되돌릴 수 있습니다. 그러나 타임라인 위치가 변경되었을 때 다시 변경사항을 되돌렸다 다시 복구할 때는(ctrl+shift+Z, Mac에서는 cmd+shift+Z), 포즈가 복원되지 않습니다.

런라임 차이

값에 키가 설정되어 있지 않다면 애니메이션은 그 값을 변경하지 않습니다. Spine에서 애니메이션이 적용되기 전에 뼈대는 항상 셋업 포즈로 초기화됩니다. 키가 설정되지 않으면 뼈대는 셋업 포즈의 값을 가지게 된다는 뜻입니다.

런타임에서 프로그래머는 애니메이션을 적용하기 전에 뼈대를 셋업 포즈로 초기화할지를 결정합니다. 키가 설정되어 있지 않을 때 뼈대는 마지막으로 설정된 값을 유지한다는 뜻입니다.

바람직한 예로, 애니메이션이 sword 어태치먼트를 weapon 슬롯에 보이게 하는 경우가 있습니다. 애니메이션이 이어서 재생되더라도 sword 어태치먼트는 여전히 보입니다.

바람직하지 않은 예로, 애니메이션이 근원 뼈를 45도로 회전하는 경우가 있습니다. 다음 애니메이션이 재생되고 근원 뼈는 키잉되지 않기 때문에 근원 뼈는 여전히 45도 회전하게 됩니다. 첫 번째 애니메이션에서 근원 뼈가 0도로 회전을 마칠 경우에도 다른 애니메이션이 재생되어 첫 번째 애니메이션이 일찍 끝나게 되면 동일한 상황이 발생할 수 있습니다.

이 문제에 대한 한 가지 방법은 모든 애니메이션에 대해 모든 값을 프레임 0으로 키잉하는 것입니다. 이는 애니메이션 제작자에게는 번거로운 일입니다. 애니메이션이 적용될 때마다 모든 값이 설정되기 때문에 런타임에서 비효율적이기도 합니다(보통 초당 60번 정도). 키잉된 각 값은 코스트가 작기 때문에 보통 무시할만합니다(어태치먼트 키는 다른 키들보다 약간 큼). 모든 값이 키잉될 때 코스트가 더해지며, 한 번에 화면에 애니메이팅되는 뼈대가 많다면 문제가 될 수도 있습니다.

애니메이션을 적용하기 전에 프로그래머가 뼈대의 뼈를 초기화하는 것이 가장 효율적입니다. 애니메이션이 변경될 때 어태치먼트에 대해서 프로그래머는 슬롯의 일부 또는 전부를 셋업 포즈로 초기화할 수 있습니다.

키잉 알아보기

자, 이제 Spine에서 키잉이 어떻게 작용하는지를 알아볼 시간입니다. 아직 본인만의 뼈대를 구성하지 않았다면 트리의 Animation 노드를 클릭하여 Spine에서 제공하는 예시 프로젝트를 열고 New Animation을 클릭하여 새 애니메이션을 만들 수 있습니다. 애니메이트 모드에서 뼈대를 프레임 0에 포징하고 (K를 눌러) 키를 설정합니다. 그 다음 프레임 30을 클릭하고 뼈대를 다른 모양으로 포징하고 키를 설정합니다. 드래그하여 타임라인을 긁거나 재생을 클릭하면 애니메이션이 움직이는 것을 볼 수 있습니다.

동영상

파트 1:

파트 2:

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