Spine 데모

Spine은 전통적인 2D 애니메이션의 한계를 뛰어 넘습니다. 아래의 데모에서는 아티스트, 애니메이터 및 프로그래머가 Spine에서 제공하는 향상된 워크플로 및 기능을 활용하여 멋진 게임을 만들 수 있는 몇 가지 방법을 보여줍니다.

아래의 모든 데모는 WebGL의 spine-ts 런타임을 사용하는 라이브 데모입니다. 각 데모의 소스 코드를 살펴보고 데모에서 Spine 런타임을 어떻게 사용했는지 알아보십시오.

Spine과 스프라이트 시트 비교

Spine
All animations, all frame rates
0.18 MB
Sprite sheet
1 second of animation @ 30FPS
3.39 MB = 18x larger

기존의 스프라이트 애니메이션은 애니메이션의 각 프레임별 이미지를 필요로 하므로 대량의 스프라이트 시트가 생성됩니다. 애니메이션을 추가할 때마다 게임의 디스크 공간과 메모리 요구량이 크게 증가하며, 특히 원활한 재생에 필요한 프레임 속도에서 크게 증가합니다. 크기 제한에 맞춰 애니메이션 수를 줄여야 하는 경우 곧 아티스트에게 엄청난 작업량이 되고 완성품은 나빠지게 됩니다.

Spine 애니메이션은 뼈대와 애니메이션 데이터만 저장하고 모든 애니메이션에 재사용되는 각각 이미지의 단일 세트를 결합합니다. 이를 통해 특별한 애니메이션으로 가득 채워서 게임에 생동감을 불어 넣을 수 있습니다. 또한 Spine 애니메이션이 보간되므로 프레임 속도에 관계없이 항상 완벽하고 원활하게 재생이 됩니다.

Spine과 스프라이트 시트 애니메이션의 메모리 및 디스크 공간 요구량을 비교해보십시오.

애니메이션 속도
 

프레임 기반 애니메이션을 이용한 Spine

Spine은 주로 기존의 프레임별 애니메이션의 필요성을 대체하면서 필요한 경우 이미지를 바꿀 수 있습니다(예: 몸통 또는 상하 방향의 회전 운동 날개, 다른 얼굴 표정 또는 총구 플래시에 대한 원근감 변경).

Spine의 슬롯, 부착물 및 그리기 순서 메커니즘을 사용하면 완전히 동적인 Spine 애니메이션에서 프레임별 애니메이션을 쉽게 통합할 수 있습니다. 더 좋은 점은 Spine에서 프레임별 이미지를 처리할 수 있으며, 이 데모에서는 외계인의 터지는 머리의 크기를 조정하여 보여줍니다.

장면 전환 및 레이어링

Smooth
Abrupt

2D 게임에 대해 자주 느끼는 단점은 부드러운 애니메이션의 장면 전환이 부족하다는 것입니다. 3D 게임에서 실행 시에 애니메이션 사이의 장면 전환을 즉석에서 계산할 수 있습니다. 예를 들어 반 걷기 및 반 달리기와 같이 애니메이션을 합칠 수도 있습니다. Spine 없이 2D 게임에서 합치는 것은 불가능하며 일반적으로 장면 전환은 부조화를 이룹니다. 아티스트는 가능한 모든 장면 전환에 대해 프레임을 수동으로 만들 수 있지만, 애니메이션이 재생 중에 중단되는 경우에는 도움이 되지 않습니다.

Spine은 3D 세계의 이점을 2D로 다시 가져옵니다. Spine 런타임은 하나의 애니메이션에서 다음 애니메이션까지 부드럽고 동적으로 장면을 전환하며, 캐릭터가 자연스럽게 보이도록 유동성을 제공합니다. 레이어링을 통해 애니메이션을 다른 레이어 위에 합칠 수 있습니다. 예를 들어 캐릭터가 달리고 있는 중에 총을 쏘는 애니메이션을 재생하거나, 부상을 당한 경우 걷는 것과 다리를 절뚝거리는 애니메이션을 점점 더 많이 합치게 할 수 있습니다.

애니메이션 속도
 

메쉬 변형

단단한 2D 이미지로 구성된 Spine 캐릭터는 이미 위의 데모에서 Spineboy와 같은 탁월한 효과를 제공할 수 있습니다. 캐릭터에게 더 많은 생동감을 주기 위해 Spine은 3D 세계에서 메쉬와 가중치의 형태로 더 많은 트릭을 제공합니다. 메쉬를 사용하면 이미지가 더 이상 딱딱하지 않고 원하는 대로 굽히고 변형할 수 있습니다. 가중치가 뼈대에 메쉬를 바인딩하므로 뼈대가 움직일 때 이미지가 자동으로 변형됩니다.

메쉬는 또한 게임의 성능을 향상시켜 이미지의 투명한 부분을 그리지 않아 채우기 비율 사용을 줄입니다. 이는 특히 모바일 장치에서 중요합니다.

이 데모의 멋진 그림은 Hwadock(일명 dugy)이 제공한 것입니다. Twitter블로그에서 팔로우하십시오.

뼈대 표시
삼각형 표시

스킨

Spine의 스킨 기능은 작업량을 합리적으로 유지하면서 맞춤 설정 및 다양성을 제공하는 데 적합합니다. 스킨을 사용하면 애니메이션 작업을 한 번만 수행하면 모든 애니메이션을 재사용하면서 다른 모양을 뼈대에 할당할 수 있습니다. 최고의 유연성을 위해 Spine 런타임은 실행 시에 다른 스킨의 구성 요소를 결합하여 가능한 모든 맞춤 설정의 요구 사항을 충족시킵니다.

스킨을 통해 플레이어는 아바타에 새로운 외모, 옷, 무기 및 기타 액세서리를 적용하여 게임 세계에 자신만의 감각을 더할 수도 있습니다. 스킨을 사용하면 애니메이션에서 더 많은 것을 활용할 수 있습니다. 적은 노력으로 다양성을 크게 높이기 위해 적, 아이템 및 기타 게임 개체를 그림과 결합하고 연결시킵니다.

이 데모의 그림은 Unity의 2D Anim Heroes 캐릭터 팩에서 찾을 수 있습니다.

랜덤 스킨

역 운동학

역 운동학에 대한 Spine의 지원은 다른 방법으로 애니메이션화하기가 어렵거나 불가능할 수 있는 사실적이고 역동적인 움직임을 가능하게 합니다. 또한 고급 리깅을 가능하게 하며, 적은 뼈대로 복잡한 포즈를 쉽게 제어할 수 있습니다.

Spine은 베이킹이나 플로팅을 사용하지 않기 때문에 역 운동학(IK)은 실행 시에 정말 탁월합니다. 실행 시에 뼈대를 동적으로 배치함으로써 역 운동학(IK) 제한은 적을 겨냥하거나 발이 지형의 경사면과 융기를 따라가는 등 환경에 쉽게 반응할 수 있게 합니다. 이 데모에서 Spineboy는 애니메이션을 재생하는 동시에 사용자 제어 호버 보드에서 균형을 유지하게 됩니다.

사용해보십시오! Spineboy가 동적인 포즈를 취하도록 하려면 빨간색 원을 여기저기로 드래그하십시오. 사격 및 점프 버튼과 조준 체크 박스는 유휴 애니메이션 위에 애니메이션을 레이어합니다.

조준
뼈대 표시

추가 애니메이션 블렌딩

별도의 트랙에서 애니메이션을 재생할 때 일반적으로 낮은 트랙의 포즈는 높은 트랙에 의해 재정의됩니다. 추가 트랙을 사용하면 해당 포즈가 낮은 트랙의 결과에 추가됩니다. 이를 통해 50% 행복, 20% 분노, 30% 흥분한 것처럼 다양한 얼굴 표정과 같은 효과를 다르게 하여 여러 가지의 독립적인 애니메이션 포즈를 블렌딩할 수 있습니다.

이 데모의 올빼미에는 각 방향에 하나씩 4개의 애니메이션이 있습니다. 이러한 각 애니메이션의 독립적인 포즈는 캔버스의 중심을 기준으로 한 마우스 커서의 위치에 따라 함께 블렌딩됩니다.

경로 제약 조건

종종 캐릭터의 일부가 열린 경로 또는 닫힌 경로를 따라갑니다. 이 동작을 수동으로 입력하는 대신 Spine의 경로 제약 조건을 사용하여 뼈대가 자동으로 경로를 따라 이동하도록 할 수 있습니다. 합성 Bézier 경로는 경로를 바꾸고 모양을 만들 수 있는 상호 연결된 점들의 집합으로 구성됩니다. 경로 자체는 움직일 수 있고 뼈대에 가중치가 부여될 수도 있으므로 뼈대가 이동하면 경로가 자동으로 변형됩니다.

이 데모에서 바인 메쉬는 경로에 제약을 받는 뼈대에 바인딩됩니다. 메쉬의 정점은 많을수록 더 부드럽게 휘어집니다.

경로 제약 조건은 실행 시에도 많은 효과를 나타낼 수 있습니다. 빨간색 손잡이를 움직여 경로를 동적으로 수정하고 바인이 매끄럽게 따라가는지 관찰하십시오!

뼈대 및 경로 표시

경로 제약 조건은 강력한 리깅을 가능하게 합니다. 이 데모에서 Stretchyman이 보여줍니다. 팔과 다리의 경우, 메시는 팔다리의 단순한 경로를 따라가도록 제한된 많은 작은 뼈대에 가중치가 부여됩니다. 경로에서 그때 팔다리를 제어하기 위해 움직일 수 있는 뼈대에 가중치가 부여됩니다. 이 설정을 사용하면 단지 몇 개의 뼈대로 수많은 뼈대를 제어할 수 있습니다. 이것은 애니메이션 효과를 더 쉽게 만들 뿐만 아니라 런타임 시 동적으로 포즈를 취할 수 있도록 몇 개의 뼈대만 조정하면 됩니다.

빨간색 손잡이를 움직여 Stretchyman을 춤추게 만드십시오!

뼈대 및 경로 표시

클리핑

Spineboy가 포털에서 나오는 이 예제에서와 같이 애니메이션의 일부가 부분적으로 숨겨져 있어야 하는 경우가 있습니다. 이 경우 클리핑은 다각형 영역으로 렌더링을 한정함으로써 편리합니다. 미리 정의된 애니메이션 적용 가능한 영역 내부의 뼈대 부분만 표시됩니다. 이렇게 하면 창, 조명 효과 등과 같이 다른 방법으로는 불가능한 많은 효과를 얻을 수 있습니다. 또한 클리핑만이 스켈레톤의 부분 집합에 효과를 미칠 수 있습니다. 예를 들어, 캐릭터가 엑스레이를 통과하는 애니메이션.

삼각형 표시

변환 제약 조건

맞물려 돌아가는 많은 이미지와 복잡한 스켈레톤을 애니메이션으로 만드는 것은 따분할 수 있습니다. Spine의 변환 제약 조건을 이용하여 더 강력한 리깅을 잠금 해제함으로써 이러한 귀찮은 것들을 제거합니다. 뼈대를 다른 뼈대의 애니메이션으로 변환시키는 것을 제한함으로써, 뼈대 중 한 개의 애니메이션만 만들면 다른 뼈대는 자동으로 조절됩니다. 외견상으로는 단순한 것처럼 보이지만 고급 리깅을 사용하여 이 기능을 최대한 활용할 수 있으며, 포즈를 취하면 스켈레톤이 어떻게 움직이는지를 자동화할 수 있습니다.

변환 제약 조건은 이 데모의 탱크와 같은 기계류에 대해서도 효과가 있습니다. 각각의 개별 바퀴의 회전을 입력하는 대신, 다른 바퀴가 변환 제약 조건을 통해 따라가면서 하나의 바퀴가 움직이게 됩니다. 오프세팅 및 믹싱에서 제한된 구성 요소에 개성을 다시 추가할 수 있습니다.

탱크의 트레드는 경로 제약 조건을 이용하여 순환되며 경로가 없으면 움직일 수 없습니다. 경로는 바퀴에 가중치가 부여되므로 바퀴가 위아래로 움직이면서 경로가 자동으로 휘어집니다.

뼈대 및 경로 표시

이 데모에서는 두 개의 작은 바퀴의 회전이 큰 바퀴의 회전에 의해 제한됩니다. 또한 큰 바퀴의 이동은 두 개의 작은 바퀴 사이에 있도록 제한되어 있습니다.

회전 오프셋
 
이동 믹스