회전하는 다이아몬드 튜토리얼

June 15th, 2020

이 블로그 게시물에서는 변형 키 없이 가중치와 뼈만 사용하여 회전하는 다이아몬드 애니메이션을 만듭니다. 이 고급 튜토리얼에서는 Spine Professional을 사용해야 합니다.

이러한 회전 효과를 얻기 위해 스켈레톤에서는 정점을 복사하고 붙여넣기하여 원근 회전의 사용, 가중치가 부여된 메쉬 및 정확한 메쉬 정점 배치를 결합합니다.

설정

프로젝트를 다운로드하여 따라 하고 여기서 최종 결과를 확인할 수 있습니다.

다이아몬드 만들기를 시작하려면 Spine에서 3가지의 주요 모형을 가져와야 합니다. 즉, 앞쪽에서 볼 때 위쪽 top, 위쪽 정사각형 면 upper-side, 및 아래쪽 삼각형 면 lower-side입니다. 나중에 이미지를 세분화하여 색상 그라데이션을 추가하고 별도의 반짝임 이미지를 추가하지만 시작할 때 이러한 것들을 간단하게 하기 위해 새 Spine 프로젝트만 만들고 그림과 같이 이 3가지의 모형만 가져옵니다.

이 이미지를 Spine으로 가져온 후 뼈를 만들어 이미지를 제어할 수 있습니다.

이 스켈레톤의 최종 구조는 실제로 간단하며 5개의 뼈만 있으면 기능을 합니다. 목표는 첫 두 단면인 다이아몬드의 윗부분과 중간 부분에 대해 원근법에 의하여 회전하는 구조를 만드는 것입니다. 각 단면에 2개의 뼈를 사용하여 목표를 달성할 수 있으며, 그리고 아래쪽에 세 번째 단면이 있는데 이것은 다이아몬드의 끝부분을 제어하는 데 사용됩니다.

원근법에 의한 회전

첫 번째 단계는 풍차 예제 프로젝트의 풍차 날개와 같이 원근법에 의하여 회전하는 단면을 만드는 것입니다. 이를 위해 서로 겹쳐지는 두 개의 뼈(둘 중 하나는 자식 뼈)를 만든 다음 6각형 이미지 어태치먼트가 포함된 top이라는 슬롯을 자식 뼈의 부모로 하여 뼈가 이미지의 정 중앙에 오도록 합니다. top 어태치먼트를 선택하여 이렇게 되도록 하고 부모 축을 선택한 상태에서 두 변환 값을 모두 0으로 변경할 수 있습니다.

부모 뼈는 구조의 크기 조정을 담당하는 뼈이므로 top-scale이라고 부릅니다. 자식 뼈는 회전을 담당하므로 뼈의 이름은 top-rotation이 됩니다.

그런 다음 애니메이트 모드로 전환하고 top-rotation 뼈를 사용하여 360° 회전하는 애니메이션을 만듭니다. 이를 위해 회전 값이 0°, 120°, 240°, 마지막으로 다시 0°인 등거리 키 프레임 4개를 설정하여 애니메이션을 반복합니다.

이제 회전 애니메이션을 만드는 것이 중요합니다. 그 이유는 부모 뼈를 크기 조정한 후에 크기 조정에 의해 비틀어진 후 회전 키 프레임의 값이 변경되기 때문입니다. 크기 조정 후 회전이 완료되면 위의 값을 사용해도 원하는 결과가 나오지 않습니다.

회전이 준비되면 설정 모드로 돌아가서 top-scale 뼈를 수직으로만 크기를 조정합니다. 이 예제에서 크기 조정 값은 1과 0.3으로 설정되지만, 이 값을 변경하여 다른 원근감을 얻을 수 있습니다. 이 작업이 애니메이트 모드에서 완료되면 초기 GIF에서와 같이 시야각 변경 또는 크기 변경도 시뮬레이션할 수 있습니다.

이제부터 top-scale만 복제하여 자식도 복제되도록 해보겠습니다. 바로 아래에 복사본을 놓고 두 뼈의 이름을 middle-scale와 middle-rotation으로 바꾼 다음, 크기가 다이아몬드의 맨 위의 단면처럼 보이도록 top-rotation의 크기를 균등하게 약간 줄입니다.

새로운 가운데 단면은 최종 다이아몬드에서 보이지는 않을 것입니다. 하지만 다음 단계의 기초가 될 것입니다.

정확한 정점 배치

이제 원근법에 의하여 회전하는 두 개의 단면이 있으므로 참고용으로 사용하여 모서리의 정점 위치를 복사하고 면 이미지에 붙여 넣어 다이아몬드의 각 면을 배치할 것입니다. 그리고 면 이미지는 해당 위치와 정확하게 일치하도록 합니다.

이렇게 하려면 먼저 모든 영역 어태치먼트를 메쉬로 전환한 다음, 각 정점이 모서리에 배치되도록 각 이미지에 대해 가능한 가장 타이트한 메쉬를 만듭니다. 이는 다이아몬드 면 사이의 갭을 방지하는데 중요합니다. 메쉬 추적 기능을 사용하면 이 단계를 매우 빠르게 완료할 수 있습니다.

선명도를 위해 어태치먼트에 일시적으로 다른 색상이 적용되었습니다. 결과는 아래 결과와 비슷해야 합니다.

모든 메쉬가 준비되면 다양한 정점을 일치시켜 한 번에 한 조각씩 다이아몬드의 면을 만들 수 있습니다. ctrl(Mac의 경우 cmd)을 눌러 위쪽 육각형 이미지의 아래쪽 가운데 정점 2개를 선택하고 월드 축을 선택한 상태에서 ctrl+C(Mac의 경우 cmd+C)를 눌러 두 정점의 위치를 복사합니다. 다음으로 이전 두 개의 정점을 선택하는 데 사용된 것과 동일한 선택 방향을 따라 upper-side 메쉬에서 두 개의 위쪽 정점을 선택한 다음 ctrl+V(Mac의 경우 cmd+V)를 눌러 정점 위치를 붙여 넣습니다.

아래쪽 두 개의 정점에 대한 과정을 반복합니다. 이번에는 가운데 육각형 이미지의 아래쪽 두 개의 가운데 정점을 선택하고 두 개의 정점 위치를 복사한 다음, upper-side 메쉬의 아래쪽 두 개의 정점에 붙여 넣습니다.

정점이 이전에 설정한 뼈의 회전을 따르도록 하려면 메쉬를 top-rotation과 middle-rotation 뼈에 바인딩한 다음 메쉬의 가중치를 변경하여 맨 위의 6각형 이미지에 닿는 위쪽의 두 개 정점이 설정되도록 하고 top-rotation 뼈에 의해 100%의 영향을 받도록 합니다. 반면에 가장 아래쪽의 두 정점은 middle-rotation 뼈에 의해 100%의 영향을 받아야 합니다.

lower-side라는 아래쪽의 삼각형 면은 위쪽의 두 개 정점에 대해 동일한 취급이 이루어지는 반면 아래쪽 정점의 경우 lower-point라는 새 뼈를 만들고 수동으로 아래쪽 정점을 새 뼈의 중심에 오도록 맞출 수 있습니다.

lower-side 메쉬는 그때 위쪽의 두 개 정점에 100%의 영향을 미치는 middle-rotation 뼈와 아래쪽의 정점에 100%의 영향을 미치는 lower-point 뼈에 바인딩될 수 있습니다.

이로써 다이아몬드의 첫 조각이 준비되었으며 앞에서 만든 애니메이션을 재생하면 다음과 같은 결과가 나타납니다.

새 면 추가

다이아몬드에 또 다른 조각을 추가하려면 두 개의 upper-side와 lower-side 메쉬를 복제하고 애니메이트 모드로 전환한 다음 타임라인에서 프레임을 선택하여 추가할 면이 선명하게 보이도록 합니다. 그런 다음 맨 위의 육각형에서 정점을 선택하고 복제된 면에 정점의 위치를 붙여 넣는 과정을 반복합니다.

메쉬가 이미 필요한 뼈에 바인딩되었으므로 이번에는 바인딩 업데이트를 눌러 메쉬의 기존 바인딩 위치를 삭제하고 현재 위치로 바꿉니다. 하지만 애니메이트 모드에서 정점 위치를 수정하면 변형 키가 Auto key로 추가됩니다. 바인딩을 업데이트한 후 해당 변형 키를 삭제하여 정확한 메쉬 위치를 복원합니다.

모든 다이아몬드 면이 제자리에 위치하고 정확하게 가중될 때까지 두 메쉬를 복제하고 각 새 면을 정확한 정점에 바인딩하는 과정을 반복합니다. 이후 가운데 육각형 이미지는 더 이상 필요하지 않으므로 삭제할 수 있습니다.

드로우 오더 및 색상

다음 단계는 회전 애니메이션 중에 드로우 오더를 조정하는 것으로 구성됩니다. 드로우 오더를 변경하기에 가장 좋은 때는 앞으로 나올 새 면이 드러날 때입니다. 때로는 키 프레임에서 이러한 현상이 발생할 수 있으며, 때로는 shift를 누르고 타임라인을 드래그하여 드로우 오더 키 프레임을 정수가 아닌 프레임에 놓으면 정확한 순간을 보다 쉽게 캡처할 수 있습니다.

슬롯 색상을 이용하여 애니메이션 중에 동일한 슬롯에 대해 다른 색상을 선택하여 반짝이는 효과를 만들 수 있습니다. 예를 들어 같은 면이 분홍색에서 보라색으로, 녹색으로 바뀔 수 있습니다. 이것은 여러분의 예술적 감각에 맡기겠습니다!

플레이스 홀더 색상과 단순한 텍스쳐를 보다 상세한 텍스쳐와 애니메이션 슬롯 색상으로 바꿀 수도 있습니다. 이미지는 이미지 폴더에서 직접 다시 칠하고 바꿀 수 있습니다. Spine에서는 프로젝트를 자동으로 업데이트하여 새 이미지를 사용합니다.

글로우 이미지 추가

이제 회전하는 다이아몬드가 완성되었지만, 여기서와 같이 면이 뷰어를 향할 때 켜지는 추가 모드를 사용하여 반짝거림과 같은 더 많은 디테일 또는 글로우 이미지를 추가하고 추가 반짝임을 시뮬레이션할 수 있습니다. 글로우는 다이아몬드의 스케일링 뼈에도 가중될 수 있으며 추가하기로 결정한 크기 변화를 따르도록 합니다.

번갈아 나오는 크기 및 원근감

top-scale과 middle-scale 뼈를 크기 조정하고 해당 뼈와 lower-point 뼈를 변형하여 다른 크기를 얻을 수 있습니다. 애니메이션 중에 이 작업을 수행하면 아래 예와 같이 스핀의 기울기를 시뮬레이션할 수 있습니다.

결론

이 고급 기법은 평평한 표면을 가진 모든 기하학적 개체에 적용할 수 있으므로 회전하는 큐브, 피라미드 또는 병, 꽃병, 램프, 궤, 선물 상자, 별, 서적 등도 만들 수 있습니다. 여러분이 만든 작품을 보고 싶어 하므로 #madewithspine을 사용하여 여러분의 작품에 태그를 붙이는 것을 잊지 마세요! Spine forum에서 여러분의 의견을 말씀해 주세요.