PNG 단일 이미지 분할 및 Spine 애니메이션 제작: 분할, 리깅, 대기/승리 동작 (Spine 4.2)

본 기사는 영어 원문 'Turn a PNG or JPG into a Spine animation'의 한국어 번역본입니다. 번역에는 AI를 사용했으며, 프롬프트는 실제로 전송한 영문을 그대로 게재했습니다.

Spine으로 캐릭터를 움직이려면 보통 파트별로 레이어를 나눈 소스(PSD 등)가 필요합니다. 하지만 손에 있는 것은 구매/의뢰/생성한 단일 이미지 1장인 경우가 많습니다.

저는 자작 도구 Riggy를 사용하여, 레이어가 없는 PNG 단일 이미지를 파트로 분할하고, 리그를 구성하며, 대기(idle) 및 승리(win) 애니메이션을 적용하여 Spine 4.2로 출력하는 과정까지 진행해 보았습니다. 예시는 슬롯 게임 마스코트 로봇입니다. 주요 프롬프트는 그대로 게재하고, 중간에 수정한 부분도 정리했습니다.

완성된 리그는 공식 Spine Web Player에서 구동할 수 있습니다: [데모 링크]. 머리, 좌우 상완 및 전완, 양 다리가 각각의 본(bone)으로 움직이며, 팔은 팔꿈치에서 굽혀집니다.

1024×1024 크기의 PNG 단일 이미지입니다. 레이어는 없습니다.

새 프로젝트에 이미지를 드롭하면 Riggy가 이를 단일 이미지로 판단하고 파트 분할을 제안합니다. 버튼을 누르면 의뢰서 작성 내용이 채팅창에 나타나므로, 이어서 내용을 작성했습니다. 어떤 그림인지, 어디가 움직여야 하는지, 관절은 어디인지를 전달합니다.

Cut this picture into parts: it is a lucky robot, a slot-game mascot. Later it needs an idle loop and a win celebration where it raises both arms and waves, bending at the elbows, and does a small hop. Cut each arm at the gold elbow ring into an upper arm with the shoulder ball and a forearm with the hand; keep each leg whole with its boot; the antenna stays with the head. Each box should take in its whole part, joint included.

AI는 그림을 보고 파트 이름 목록과 'Cut' 버튼 위의 견적을 반환합니다. 이 시점에서는 아직 아무것도 잘라내지 않았습니다.

이번에는 계획의 틀이 벗어나 있었습니다 (전완 박스에 손의 대부분이 포함되지 않았고, 머리 박스는 머리보다 훨씬 넓었습니다). 그래서 필자가 이미지에 그리드를 겹쳐 각 파트를 측정하고, 그 값을 수치로 채팅창에 전달했습니다 (이미지 크기에 대한 천분율).

The boxes miss the parts: the forearm boxes leave out most of the forearm and the hand, and the head box is much wider than the head. The elbow is the small gold ring below the shoulder pad; the big gold cuff is the wrist and goes with the forearm. Replace the plan with exactly these boxes (thousandths of the picture: left, top, right, bottom): head 283, 44, 713, 464; torso 361, 430, 640, 737; left_upper_arm 288, 439, 418, 605; left_forearm 151, 542, 352, 767; right_upper_arm 582, 439, 712, 605; right_forearm 648, 542, 849, 767; left_leg 303, 674, 469, 913; right_leg 527, 674, 695, 913.

버튼을 누르자 이미지가 분할로 전송됩니다. 이번에는 한 번에 약 2분이 걸렸습니다. 인접한 파트가 관절에서 겹치도록 가려진 부분을 그려 넣으라는 지시를 받았습니다. 이 경우, 어깨 패드 아래의 어깨, 몸통 아래 숨겨진 다리 뿌리 부분, 헬멧 링 아래의 목입니다. 돌아온 파트는 파트별로 하나의 본을 가진 초기 리그에 조립됩니다. 결과는 원본 그림과 비교하고 움직여서 확인해 보세요.

여기서 보여드린 최종 분할은 1달러 미만이었습니다. 그 이전의 분할, 플랜 작성, 애니메이션 의뢰는 별도 요금이 부과됩니다. 버튼을 누르면 견적이 나오고, 최종 비용은 돌아온 파츠 수에 따라 결정됩니다.

Now rig it and make two animations. Put each shoulder joint in the centre of its gold shoulder pad, each elbow at the small gold ring, each hip at the top of the leg under the body, and the neck at the gold collar under the helmet. idle: a calm 2-second loop, the body bobs gently, the head tilts a little and the arms sway slightly. win: a 1.6-second celebration, both arms swing up so the hands are above the shoulders and wave, bending at the elbows, the head tilts side to side and the robot does a small hop, ending in the rest pose so it loops.

뼈(Bone) 배치와 두 개의 애니메이션은 여기서 완성할 수 있었습니다. 목, 팔꿈치, 허리는 올바르게 연결되었지만, 어깨는 문제가 있었습니다. 원인은 의뢰서 자체에 있습니다. 어깨 패드는 관절이 아닙니다. 뼈를 패드 중앙에 놓으면, win
에서 팔과 함께 패드가 바깥으로 흔들리면서 그 아래에 빈 공간이 생깁니다. 그래서 한 줄 더 수정했습니다.

The shoulder joints are still outside the body: each arm bone starts in the middle of the gold pad, so in win the arm turns from the wrong place and an empty gap opens under the arm. Fix the shoulders. 1) Move each shoulder joint, keeping everything in place, inside the torso outline at its top corner, where the pad meets the body: x -102, y 524 for left_upper_arm and x 101, y 524 for right_upper_arm. 2) Then move each whole arm 8 px closer to the body: left_upper_arm 8 px right, right_upper_arm 8 px left, the forearms follow. 3) In win raise the upper arms less, about 55° from rest instead of 94°, and bend the forearms about 35° more so the hands still reach the height of the helmet. Check the top of win: the pads stay on the torso corners and no background shows between the pad and the body.

팔꿈치와 손 흔드는 동작은 몇 줄의 짧은 지시로 수정했습니다 (전완을 상완보다 앞쪽에 그려 팔꿈치 링으로 관절을 가리고, 구부림을 작게 하고 손이 헬멧 옆에 오도록). 더 세밀한 부분은 애니메이션의 특정 순간을 골라 마우스로 뼈를 돌리면 됩니다. 마우스 수정은 무료입니다.

로봇은 처음에 시도했던 그림이 아닙니다. 먼저 아기 너구리 도둑을 시도했는데, 분할이 각각 다른 형태로 실패했습니다. 첫 번째는 얼굴이 일그러지고 머리 옆에 불필요한 볼이 생겼습니다. 두 번째는 직선 테두리를 가진 사각형 파츠가 되었습니다. 그래서 필자가 그리드(Grid)로 각 파츠를 측정하여 딱 맞는 틀을 제공하자, 정지 포즈는 깨끗해졌습니다.

그런데 움직이게 하니 문제가 생겼습니다. 팔을 팔꿈치에서 분리하고, 틀이 어깨와 팔꿈치에서 정확히 끝났기 때문에, 파츠가 틀의 테두리를 따라 직선으로 잘려 돌아왔습니다. win

손을 들자, 그 직선의 가장자리와 몸통에 남아있는 팔 조각이 보입니다. 팔을 여백과 함께 통째로 자르니 개선되었지만, 가장자리 전체의 털과 가슴 앞에서 가로지르는 팔 때문에 어깨에 이음매가 남았습니다. 그래서 그림을 바꿨습니다.

효과적이었던 점:

공식 Spine 샘플 같은 그림. 선명한 윤곽선, 둥근 관절, 몸에서 분리된 사지와 프레임은 파츠 전체를 관절과 여백까지 포함합니다.-
사지는 몸통 뒤쪽에 그립니다. 사지와 몸의 경계가 몸통 아래에 가려집니다. -
본(Bone)은 관절부터 시작합니다. 어깨라면 몸의 윤곽 안쪽입니다.

내보내기 전에, 파츠를 보고 모든 애니메이션을 재생해 보세요. 파츠에 문제가 있으면 분할 전 버전으로 돌아가서 채팅에서 플랜의 프레임을 목록으로 받거나 수정하여 다시 분할하세요. 분할은 다시 할 때마다 비용이 발생합니다.

숨겨진 부분은 AI가 그립니다. 그림의 세부 사항이 바뀔 수 있으니, 파츠와 움직임을 확인해 주세요. -
깔끔하게 잘리는 그림과 그렇지 않은 그림이 있습니다. 윤곽선이 선명하고 사지가 몸에서 떨어져 있으면 쉽습니다. 긴 털이나 몸 앞에서 가로지르는 팔은 관절을 잘 봐야 합니다. -
그림 전체를 한 번에 분할합니다. 파츠 하나만 다시 하려면, 되돌려서 그림 전체를 다시 분할해야 합니다. 실패한 분할은 무료이지만, 플랜 요청은 유료입니다. -
배경은 단색이거나 투명합니다. 아무것도 없는 배경은 버려지고, 그려진 배경은 가장 아래 배경 파츠로 남습니다. -
긴 변은 짧은 변의 3배까지입니다. 시도해 본 것은 손그림 스타일의 그림이었고, 도트 그림에서의 분할은 아직 시도하지 않았습니다. -
Web 앱에서만 가능합니다. 터미널 채팅에서는 분할할 수 없습니다.

내보내기는 표준 Spine 4.2 JSON과 아틀라스, 페이지 이미지입니다. Spine 4.2의 Import Data에서 내보낸 images 폴더 전체를 가져오거나, 그대로 게임(Phaser 4, PixiJS 8, Unity)에 로드할 수 있습니다. Spine 런타임으로 게임을 출시하려면, 스켈레톤이 누가 만들었는지와 관계없이, 빌드 시점에 Esoteric Software의 Spine 라이선스가 필요합니다.

레이어 분리된 PSD가 이미 있다면, 분할은 필요 없습니다. 거기서 시작할 수 있습니다(몬스터 전투 애니메이션 세트 예시).

손에 있는 캐릭터 그림 1장으로 시험해 보고 싶은 분은 Riggy에 등록하면 바로 샘플 프로젝트에서 작업할 수 있습니다.