Spine 버전: 3.7+
태그:

전문가용, 메쉬, 가중치, 경로 제약조건, 변형 제약조건, 클리핑, 틴트 블랙

탱크

탱크 프로젝트는 경로변형 제약조건을 이용하여 탱크 트레드 및 바퀴와 같은 기계 구성 요소를 쉽고 빠르게 애니메이션화할 수 있는 방법을 보여줍니다. 또한 탱크 예제에서는 Spine의 틴트 블랙 기능을 사용하여 크지만 비용이 많이 들지 않는 폭발 효과를 만들어 냅니다.

탱크 트레드

설정

tank-root 뼈에는 같은 이름의 경로 어태치먼트를 포함하고 있는 슬롯 treads-path가 들어 있습니다. 이 경로 어태치먼트는 treads-path 경로 제약조건의 타겟입니다.

경로 제약조건은 tread~tread36 뼈를 구현합니다. 이 설정을 통해 당사는 경로 제약조건의 위치 값 키만 설정함으로써 애니메이션 프로세스 동안 경로를 따라 트레드를 움직이게 할 수 있습니다.

당사는 믹스를 제외하고 모든 경로 제약조건의 속성에 대해 기본값을 사용했습니다. 회전탄젠트 대신 체인으로 설정되어 트레드 뼈가 경로를 따라 올바르게 회전하도록 합니다.

경로 자체에는 번호 뼈의 가중치가 부여되며, 이 뼈는 treads 경로가 선택되면 가중치 보기에서 볼 수 있습니다.

이러한 뼈 중 하나를 변형하여 경로를 변형할 수 있습니다. 아래의 GIF에서 tread-gravity1 뼈는 Y축으로 움직이며 그에 맞춰 경로가 변형됩니다.

각 트레드의 일부는 바퀴 앞에 그려지는 반면, 동일한 트레드의 다른 부분은 바퀴 뒤에 그려집니다. 하나의 트레드에 대한 슬롯 및 어태치먼트 설정은 다음과 같습니다.

tread 슬롯이 바퀴 앞에 그려지는 반면, 슬롯 tread-inside1tread-inside2는 바퀴 뒤에 그려집니다. 이는 스켈레톤의 드로우 오더에 포함된 모든 슬롯의 위치에 의해 정의됩니다.

애니메이션

애니메이트 모드에서 드라이브 애니메이션을 재생하면, 당사는 바퀴의 회전에 따라 트레드가 움직이는 것을 볼 수 있습니다. 이는 도프 시트에서 볼 수 있듯이 경로 제약조건의 위치 속성 키를 설정함으로써 이루어집니다.

탱크가 바위 위로 지나갈 때 트레드 체인이 변형되어 자연스럽게 바위의 모양을 따라가게 됩니다. 이는 경로에 가중치가 부여되는 뼈의 변형 키를 설정함으로써 이루어집니다.

바퀴

바퀴 테두리의 윗부분은 바퀴 안쪽의 윗부분에 그림자를 드리웁니다. 바퀴가 회전하는 동안에도 이 효과를 얻기 위해 그림자 부분은 실제 바퀴와 분리됩니다. 이는 바퀴 중 하나에 대한 설정입니다.

wheel-mid-root1에는 wheel-mid-overlay 슬롯을 포함하고 있으며, 이 슬롯에는 바퀴의 그림자 부분을 나타내는 어태치먼트가 들어있습니다. 슬롯의 블렌딩 모드곱하기로 설정되어 슬롯이 실제 바퀴의 맨 위에 그려질 때 원하는 그림자 효과를 얻게 됩니다.

실제 바퀴는 wheel-mid-root1 뼈의 자식인 wheel-mid1 뼈에 들어있습니다. wheel-mid-root1 뼈는 이동만 되며 그림자가 회전되지 않게 합니다. 바퀴를 회전시키기 위해 wheel-mid1 뼈가 회전됩니다.

wheel-mid1 뼈를 선택하여 회전 시키면 나머지 하단의 바퀴도 회전하게 됩니다. 이는 변형 제약조건을 통해 이루어집니다.

변형 제약조건인 wheel-mid1-transformwheel-mid1 뼈의 회전에 따라 뼈 wheel-mid2wheel-mid4를 회전시킵니다. 이런 방식으로 당사는 wheel-mid1 뼈의 회전에 대해서만 키를 설정해야 하는 반면, 변형 제약조건은 다른 뼈가 그 뒤를 따라가도록 합니다.

바퀴 회전을 덜 균일하게 보이도록 하기 위해 당사는 변형 제약조건의 회전 오프셋을 93으로 설정합니다. 다른 바퀴는 wheel-mid1과 같은 속도로 회전해야 하기 때문에 회전 믹스는 100으로 설정됩니다.

이 변형 제약조건은 다른 바퀴도 구현할 수 있습니다. 하지만 이는 모든 바퀴가 똑같이 회전하는 균일한 모양으로 이어지게 할 것입니다. 대신 당사는 변형 제약조건 wheel-mid2-transformwheel-mid3-transform에서 볼 수 있듯이, 다른 회전 오프셋 값으로 몇 가지 추가 변형 제약조건을 설정했습니다.

다른 두 세트의 바퀴인 wheel-small-*wheel-big-*에는 작은 바퀴가 큰 바퀴보다 더 빨리 회전해야 한다는 점을 고려하여 비슷한 설정을 합니다.

폭발 효과

탱크 프로젝트에는 발사 애니메이션이 포함되어 있습니다.

기존의 프레임별 애니메이션으로 이와 같은 효과를 만들어 내려면 많은 양의 텍스처 메모리를 차지하게 되어, 특히 모바일 게임의 경우 사용을 금지합니다. 폭발에 대한 전체 각 프레임을 나타내기 위해 여러 개의 큰 이미지를 사용하는 대신, 당사는 다양한 smoke* 뼈에 복제되는 smoke-puff01-bg, smoke-puff01-fg, smoke-puff02-fg, smoke-puff03-fgsmoke-puff04-fg라는 다섯 개의 작은 이미지를 사용합니다.

이러한 이미지는 Spine의 틴트 블랙 기능을 사용할 수 있도록 하는 그레이스케일입니다. 도프 시트에서 발사 애니메이션을 스크러빙하는 동안 smoke-puff1-fg 슬롯에 대한 슬롯 가시성과 색상의 변화를 아래에서 볼 수 있습니다.

연기 퍼프의 모양은 다른 형태의 어태치먼트에 대한 가시성 키를 설정함으로써 변경되며, 기존의 프레임별 애니메이션에서 기본적으로 믹스됩니다. 틴트 블랙 기능은 퍼프의 색상을 변경하는 데 사용됩니다.

도프 시트에서 타임라인을 천천히 스크러빙하면 점점 더 많은 연기 퍼프가 나옵니다. 연기 퍼프의 설정은 smoke-puff1-fg에 사용된 것과 비슷하며 이동, 회전, 크기 조정 및 타이밍의 변화에 따라 실감 나는 폭발 효과를 만들어 냅니다.

smoke-glow 뼈에는 메쉬 어태치먼트와 블렌딩가산으로 설정한 슬롯이 있어서 폭발 효과를 좀 더 강렬하게 나타내며, 이 뼈는 구름의 가장 뜨거운 부분을 밝게 하는 데 도움이 됩니다.