레이어 분리된 PSD 1장으로 게임 몬스터의 전투 애니메이션 세트 만들기 (대기/공격/피격/사망)
요약
AI의 도움을 받아 레이어가 분리된 PSD 원본 이미지로 게임 몬스터의 전투 애니메이션 세트를 제작하는 과정을 설명합니다. AI 도구 Riggy를 활용하여 프롬프트만으로 리그와 대기, 공격, 피격, 사망 등 네 가지 애니메이션을 빠르게 완성할 수 있었습니다. 이 과정에서 레이어 배열 순서나 명확한 이름 지정 같은 기본적인 원칙들이 여전히 중요함을 강조하며, 개발 워크플로우에 AI를 통합하는 방법을 제시합니다.
핵심 포인트
- AI 도구(Riggy)와 프롬프트만으로 몬스터 리그 및 애니메이션 세트 제작 가능
- 레이어 분리 PSD 사용 시 레이어 순서와 명명 규칙 준수 필수
- 공격/피격 이벤트 발생 타이밍을 활용하여 게임 로직 구현 용이
- AI가 판단하는 '인간형' 등 기본 원칙 이해 필요
본 기사는 영어 원문 'A game monster's combat set in Spine'의 일본어 번역본입니다. 번역에는 AI를 사용했으며, 프롬프트는 실제로 보낸 영문 그대로 첨부했습니다.
RPG용 용암 살라만더를 레이어 분리된 PSD 1장으로 Spine 4.2 스켈레톤을 만들고, 전투 애니메이션 4가지(대기 idle, 공격 attack, 피격 hurt, 사망 death)를 추가했습니다. 리깅과 애니메이션은 제가 만든 도구 Riggy의 채팅 기능을 통해 AI에게 제작시켰습니다. 첫 번째 프롬프트 하나만으로 3분도 채 되지 않아 리그와 네 가지 애니메이션이 모두 완성되었습니다. 공격은 한 번에 OK였고, 피격은 수정 한 번 만에 OK였습니다. 나머지는 주로 사망 애니메이션을 마무리하는 과정에서 짧은 프롬프트와 마우스로 미세 조정하며 완성했습니다.
본 기사에서는 보낸 프롬프트를 그대로 제시하고, 그때마다 무엇이 잘못되었는지, 어떻게 고쳤는지를 순서대로 작성합니다. 도중에 언급된 '파츠의 부모 본(parent bone)', '그리기 순서', '지면 기준' 등의 함정은 AI를 사용하지 않고 Spine으로 만들 때도 동일하게 적용됩니다.
완성된 리그는 공식 Spine Web Player에서 구동할 수 있습니다: 데모. 공격 시에는 히트 순간에 hit 이벤트를 발생시키므로, 게임 측에서는 그 타이밍에 대미지 판정이 가능합니다.
파츠별로 레이어를 나눈 PSD를 사용했습니다. 효과적이었던 두 가지 점은 다음과 같습니다.
- 레이어를 그리기 순서대로 배열하기. 상위 레이어가 전경(앞)으로 그려집니다. 가로 방향 캐릭터라면, 앞쪽 팔은 몸통보다 위, 뒤쪽 팔은 몸통보다 아래에 위치해야 합니다. - 이해하기 쉬운 이름 붙이기.
head,jaw,torso,arm_front_upper,thigh_back등... AI는 이름을 읽고 관절의 위치를 결정합니다.
살라만더는 본(bone)이 없는 16개 레이어로 불러왔습니다.
This is a lava salamander warrior for an RPG, facing right, holding a stone club in the front hand. Rig it and make four animations; parts that touch must stay overlapped in every frame. idle - 2 s loop: heavy breathing, the head bobs slightly on the neck, the tail sways a little. attack - about 1 s: the club arm stays almost in place and lifts only a little; the work is in the wrist - the club cocks back and snaps forward; the torso leans into the blow and the legs bend slightly. Event 'hit' at the impact. hurt - about 0.5 s: a small recoil from a blow to the chest, then a light wobble of arms and legs that settles. death - about 1.5 s, starts from the rest pose: he staggers, the knees give way one after the other, he falls backwards in phases - not as a stiff board and not as a sack; the feet stay planted, the club slips out of the hand.
모델은 첫 번째 본을 배치하기 전에 소재의 종류를 '인간형'으로 판단하고, 그 종류에 맞는 레시피(인간형 관절은 어디에 놓을지, 공격은 어떻게 구성할지, 사망은 정지 포즈에서 시작하는지 등)를 읽어 들인 후, 본 19개와 네 가지 애니메이션을 한 번에 만들었습니다. 머리는 입 주변이 아닌 목에서 회전하고, 공격은 팔을 크게 휘두르지 않고 손목으로 휘둘렀습니다.
이후에는 애니메이션을 프레임 단위로 확인하며 수정했습니다.
피격 시 곤봉의 팔이 너무 크게 흔들렸고. 사망 시 비틀거리는 동안 몸 전체가 왼쪽으로 미끄러졌으며, 마지막에는 바닥 아래로 가라앉았고, 곤봉은 공중으로 날아갔습니다.
대기(idle)와 공격(attack)은 괜찮습니다. 두 가지를 수정해주세요. 사망(death): 비틀거릴 때 몸 전체가 왼쪽으로 미끄러지고, 마지막에는 땅 아래로 가라앉습니다. 다리와 등이 y=0 아래로 들어가고, 곤봉은 떨어지는 대신 공중으로 날아갑니다. 그는 바닥선 위에 등을 대고 누워야 하며(ON the ground line), 아무것도 y=0 아래에 없어야 하고, 발은 원래 서 있던 곳에 있어야 합니다. 곤봉은 떨어져서 그의 옆 땅바닥에 놓여야 합니다. 답변하기 전에 사망 프레임을 확인해주세요. 피격(hurt): 타격 시 곤봉 팔이 너무 심하게 움찔거립니다. 몇 도 정도로 유지하고, 반동은 몸통에서 나와야 합니다.
훨씬 좋아졌습니다. 공격(attack)과 피격(hurt)은 승인되었으니 건드리지 마세요. 작은 조정만 필요합니다. 유휴(idle): 현재는 몸 전체가 하나의 큰 조각처럼 흔들립니다. 양팔에 약간의 독립적인 흔들림(어깨에서 23도, 숨을 쉴 때 살짝 뒤로)과 골반/허벅지에 독립적인 흔들림을 추가하여 살아있는 느낌이 나게 해주세요. 사망(death): 작은 수정만 하고 나머지는 유지하세요: (1) 0.50.7초에 양 발이 땅에서 떨어지고 곤봉 팔이 위로 구부러져 곤봉이 머리 옆에 오도록 합니다 - 몸체가 기울어질 때까지는 발을 바닥에 붙이고, 곤봉 팔은 옆으로 낮게 유지하세요; (2) 1.0초부터 끝까지 곤봉이 곧게 공중에 고정되어 있습니다 - 눕혀서 1.5초에는 손 옆 바닥에 평평하게 놓이도록 하세요; (3) 1.3~1.5초에 등 쪽 팔과 꼬리가 지면 아래로 매달려 있습니다 - 이들을 들어 올려 땅에 닿게 만드세요. y=0보다 낮은 곳은 없어야 합니다.
공격 시 몸통이 앞으로 쓰러지는데, 허리 천(loincloth)은 그 자리에 남아 허리에서 벗어나 있었습니다. 이는 허리 천이 허리(hip) 본에 매달려 있고, 몸통이 그것 위로 구부러져 있었기 때문입니다. 본 트리(bone tree)에서 loincloth를 torso로 드래그하는 것만으로 해결됩니다. 캔버스 상에서는 파츠가 움직이지 않으며, 이후에는 네 개의 모든 파츠가 몸통에 붙게 됩니다. 무료로 몇 초 만에 끝납니다.
스파인(Spine) 일반 교훈: 몸통에 그려진 벨트나 옷은 허리가 아닌 몸통 본에 부착하거나, 몸통 관절을 벨트 높이에 위치시키세요.
왼쪽의 굵은 팔은 몬스터의 '앞쪽 팔'인데, 레이어가 몸통 아래에 있었기 때문에 피격 시 몸 뒤로 미끄러져 있었습니다. 사망 애니메이션에서는 곤봉 팔이 관절에서 분리되고, 곤봉이 주먹에서 빠져나왔습니다.
다음 라운드에서 작은 수정 사항들이 있습니다. (1) 드로우 순서: 그림 왼쪽의 큰 팔(arm_back_upper + arm_back_lower)은 사실 그의 가까운 쪽 팔입니다. 원래 아트에서는 몸통, 뒤쪽 허벅지, 샅바 앞에 위치했지만, 지금은 몸통 뒤로 가 있어 'hurt' 애니메이션에서 매우 눈에 띕니다. 이 두 부분을 모두 몸통 위, thigh_back 및 샅바(여전히 턱과 머리 아래)로 옮기세요. (2) 사망 애니메이션 1.01.5초: 곤봉 팔이 분해됩니다 - 주먹에서 전완이 떨어지고 전완에서 어깨가 떨어지며, 곤봉이 주먹에서 미끄러져 나와 손잡이가 손과 분리됩니다. 이 사슬은 연결된 상태를 유지하세요: 관절에서만 회전하고, arm_front_upper/arm_front_lower/hand_front/club에는 이동(translate)을 적용하지 마세요; 그가 곤봉을 주먹에 넣은 채로 땅에 착지하게 하고, 곤봉이 바닥에 평평하게 놓이도록 하세요. (3) 사망 애니메이션 1.151.5초: 가까운 쪽 팔의 전완(발톱이 있는 부분)이 오른쪽 공중으로 수평하게 튀어나옵니다 - 이것을 몸통을 따라 배치하세요. (4) 마지막에 가까운 쪽 팔과 꼬리가 여전히 바닥선보다 약간 아래로 처져 있습니다 - 이들을 바닥선 위로 들어 올리세요. 'attack', 'hurt', 'idle'은 승인되었으니, 움직임은 변경하지 마세요.
진행 상황이 좋습니다: 드로우 순서는 현재 맞고, 곤봉 팔은 주먹과 함께 한 조각으로 유지됩니다 - 둘 다 유지하세요. 사망 애니메이션에서 마지막까지(약 1.1초부터) 두 가지가 남아 있습니다: (1) 가까운 쪽 팔(arm_back_upper + arm_back_lower)이 잘못된 방향으로 돌아갔습니다 - 이제 그의 머리 너머 왼쪽을 가리키고 일부는 바닥 아래로 들어갑니다. 반대 방향으로 돌리세요: 등이 누워 있고 머리가 왼쪽에 있는 상태에서, 가까운 쪽 팔은 옆구리를 따라 발 쪽(오른쪽)을 향해 놓여 땅에 기대야 합니다. 어깨의 -138도는 잘못된 방향입니다; 휴식 자세에서 +40도~+60도 정도가 적당할 것입니다. (2) 배와 하체 몸통이 마지막 포즈에서 바닥선보다 약 40px 아래로 처집니다 - 전체 몸(낙하 이동, fall translate)을 들어 올려 가장 낮은 지점이 y=0에 오도록 하세요. 다른 것은 아무것도 변경하지 마세요.
짧은 프롬프트로 팔은 몸통을 따라 누워 있고, 몸은 바닥 위에 놓였습니다.
death는 거의 다 왔고, 이제 떨어지는 다리와 마지막 포즈(약 0.9-1.5초)만 남았습니다: (1) 클럽 쪽 다리(thigh_front, shin_front, foot_front): 허벅지를 다른 다리를 향해 약간 내리고, 마치 다리가 서로 가까워지도록 합니다; foot_front는 스스로 비틀어지지 않게 - 전체적으로 신(shin)에 대해 대략적인 휴식 각도(offset near 0)를 유지해야 합니다. (2) 다른 쪽 다리(thigh_back + shin_back)는 공중에 들린 채로 끝납니다 - 애니메이션이 끝날 때쯤에는 몸통에 대한 자연스러운 이완 포즈, 첫 번째 다리 옆에 놓일 수 있도록 내려와야 합니다. 나머지 모든 것은 그대로 둡니다.
마지막 포즈에서 다리가 아직 약간 어긋나 있었기 때문에(한쪽은 공중에, 한쪽은 바닥 아래), Motion 모드에서 death의 1.15・1.25・1.4・1.5초 순간을 클릭하여 허벅지를 마우스로 돌려 마무리했습니다. 그 애니메이션의 그 순간 키만 수정하는 작업이라 무료입니다.
글 리뷰에서 2가지 점을 발견했습니다. 사망이 정지 포즈에서 시작하지 않았습니다(0초 시점에서 뒤쪽 허벅지가 이미 20° 회전하고 있습니다). 원인은 저희가 마지막 순간에 한 마우스 수정 때문이었는데, 그 허벅지의 타임라인은 처음과 끝 값이 같았기 때문에 루프로 간주되어 첫 프레임에도 수정이 복사되었습니다(루프하지 않는 애니메이션에서는 이렇게 되지 않도록 수정했습니다). 또 하나는 바닥을 캔버스 하단에서 측정했지만, 이 몬스터의 발은 그보다 약 70px 위에 서 있었습니다.
Last fixes in death, nothing else changes: (1) frame 0 must be exactly the rest pose - right now thigh_back starts already rotated by about +20 degrees at 0 s; make its death track start at 0 offset and keep its end pose as it is now. (2) at 0.2-0.9 s the knees bend but the hips stay where they are, so both feet lift about 70 px off the ground - lower the body together with the knee bend so the feet stay on y=0 until he tips over. (3) at 1.5 s the tail and the near upper arm (arm_back_upper) still dip about 20 px below the ground line - lift them just enough to rest on y=0.
프레임 0은 정지 포즈로 돌아왔습니다. 하지만 (2)는 저희의 실수였습니다: 발이 원래 떠있지 않았기 때문에, 몸을 내리자 발이 바닥에 파묻혔습니다. 정지 포즈의 발밑 라인을 지면으로 삼아 Motion 모드에서 수동으로 수정했습니다(파묻힘을 제거하고 착지 시 몸의 높이를 결정하며, 착지 순간부터 꼬리와 앞쪽 팔을 누워 있게 했습니다). 이제 발은 넘어질 때까지 바닥에 붙어 있다가, 착지할 때 가볍게 튀어 오르며 서있었을 때와 같은 라인으로 누워 있습니다.
Spine 일반적인 교훈: 바닥은 이미지의 하단이 아니라, 정지 포즈에서 발이 놓여 있는 라인입니다. 넘어지는 애니메이션의 최종 프레임은 이 라인에서 확인해야 합니다.
- 움직임의 이름뿐만 아니라, 그 움직임을 설명해야 합니다. '공격을 만들어줘'라고 하면 모든 판단을 모델에 맡기게 되고, 모델은 스스로 생각합니다. 길이, 어느 부분이 움직이고 어디가 멈출지, 어디서 시작해서 어떤 순서인지, 무엇과 비슷한지를 적어야 합니다. 위의 공격 프롬프트는 한 번에 사용할 수 있는 것이 되었습니다. '거친 숨소리(heavy breathing)', '단계적으로 뒤로 넘어짐 — 딱딱한 판처럼도 아니고 자루처럼도 아님'처럼 느낌까지 쓸 수 있습니다.
- 레이어의 순서와 이름을 정리합니다. 수정해야 할 두 가지(앞쪽 팔이 몸 뒤, 손목 사이의 틈)는 애니메이션 문제가 아니라 그림 자체의 문제였습니다.
- OK가 된 것을 전달합니다. '공격과 피격은 승인되었으니 건드리지 마세요(attack and hurt are approved, don't touch them)'라고 하면 어떤 애니메이션을 건드리면 안 되는지 모델에 전달됩니다. 다만 리그 자체의 변경(파츠의 부모, 드로잉 순서)는 모든 애니메이션에 영향을 미치므로, 그러한 수정 후에는 다시 한번 확인해야 합니다.
- 초와 방향을 말합니다. '1.3–1.5초에 꼬리가 지면 라인 아래로 늘어진다(At 1.3–1.5 s the tail hangs below the ground line)'는 한 번에 고쳐지지만, '사망이 이상하다'는 여러 번의 왕복을 거칩니다.
- 작은 것은 마우스로 합니다. 부모 본(parent bone) 교체나 특정 순간의 포즈 조정은 몇 초 만에 끝나고 비용도 들지 않습니다.
작업 시작은 표준 Spine 4.2 JSON과 아틀라스이므로, Spine 에디터에서 수동으로 마무리할 수도 있고 그대로 게임에 불러올 수도 있습니다. Spine 런타임으로 게임을 출시하려면 스켈레톤을 누가 만들었는지와 관계없이 Esoteric Software의 Spine 라이선스가 필요합니다.
지금은 레이어 분리된 PSD부터 시작해야 하지만, 캐릭터 이미지 한 장을 올바른 순서/이름이 지정된 레이어로 나누고 숨겨진 부분까지 그려주는 툴을 만들고 있습니다. 이미지 한 장에서 움직이는 리그까지 포토샵을 열지 않고 할 수 있도록 하는 것이 목표입니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Qiita AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기