본문 바로가기
2D 디자인

[Spine] 스파인 기초 튜토리얼 4편 - 스파인 캐릭터 걷기(Walk) 애니메이션 만들기

by J-Chi 2022. 9. 12.

 

스파인 걷기 애니메이션
스파인 걷기 애니메이션
기초튜토리얼4.zip
0.09MB

 

스파인 기초 튜토리얼 스파인 캐릭터 걷기(Walk) 애니메이션 만들기를 포스팅하겠습니다. 기초 튜토리얼 1, 2, 3편을 안 보신 스린이 분들에게는 기초 튜토리얼 1편부터 정독 하시는 게 포스팅을 이해하는 데 도움이 됩니다.

[Spine] 스파인 기초 튜토리얼 1편 - 포토샵 캐릭터를 스파인에 불러오기 
[Spine] 스파인 기초 튜토리얼 2편 - 스파인 캐릭터 리깅 
[Spine] 스파인 기초 튜토리얼 3편 - 스파인 캐릭터 숨쉬기(Idle) 애니메이션 만들기 

걷기 애니메이션은 거의 모든 게임에 사용된다고 해도 무방합니다. 튜토리얼 캐릭터는 정면을 보고 있는 상태여서 간단하게 정면 걷기 애니메이션을 만들 테지만 일반적인 2D 게임에서는 좌/우 걷기를 애니메이션을 대부분 사용하고 추가로 애니메이션을 만든다면 앞/뒤 걷기 정도를 사용합니다. 게임사에서 애니메이션에 투자를 많이 한다면 8방향 애니메이션을 만들려고 하겠지만 시간 대비 효율이 없기 때문에 게임 콘텐츠에 집중을 하고 애니메이션은 최소화하는 경우가 많습니다.

그럼 걷기 애니메이션 만들기 튜토리얼을 시작 하겠습니다.


 

걷기(Walk) 애니메이션


 

기초 튜토리얼 3편 숨쉬기(Idle) 애니메이션은 총 80프레임으로(도프시트 숫자 80) 제작하였지만 이번 걷기 애니메이션은 총 30프레임으로 구성하려고 합니다. 걷는 동장은 간결하기 때문에 일반적으로 짧은 프레임으로 구성이 됩니다.

 

※ 걷기 애니메이션 팁 ※

사람이 걸을 때 두 팔과 두 다리는 서로 반대 방향으로 움직며 왼팔과 오른다리 / 오른팔과 왼 다리가 같은 방향으로 이동 합니다. 아래 튜토리얼을 보면 팔과 다리는 서로 반대로 입력 값을 주고 있는걸 확인 할 수 있습니다.

 

1. Body 뼈를 선택하고 이동을 선택(단축키 V)을 활성화 한 후 0, 15, 30 프레임에 이동되지 않은 현재 값을 저장(단축키 L 이나 변형 도구 이동 항목의 열쇠 클릭) 합니다.

 

Body 뼈의 변형 전 이동 값 입력
Body 뼈의 변형 전 이동 값 입력

 

2. Body 뼈의 7 프레임을 선택하고 아래 방향으로 약간(이동 값 21.191 -> 16) 내려 준 후 아래 사진의 노란색으로 표시된 부분을 복사하여 22프레임에 붙여넣기 합니다.

 

Body 뼈의 변형 된 이동 값 입력
Body 뼈의 변형 된 이동 값 입력

 

3. 왼쪽 발의 Leg_L 뼈를 선택하고 크기조정(단축키 X)을 활성화한 후 0과 30프레임에 현재 값을 저장해 줍니다.

 

3~4 번 항목인 Leg_L 뼈의 크기 조정 값 입력
3~4 번 항목인 Leg_L 뼈의 크기 조정 값 입력

 

4. Leg_L 뼈의 15 프레임을 선택하고 뼈의 크기 조정 아이콘에서 빨간색 부분을 클릭하여 위로 조금(크기 조정 값에 0.7을 입력하면 크기가 x축으로 줄어든 걸 확인 할 수 있습니다.) 이동 시켜 줍니다. 위 사진처럼 15 프레임의 크기 조정 값이 0.7 / 1.0 과 비슷한 값으로 표시되면 됩니다.

 

5. 오른쪽 발의 Leg_R 뼈를 선택하고 크기조정을 활성화한 후 15 프레임에 변형하지 않은 현재 값을 저장해 줍니다.

 

5~6번 학목인 Leg_R 뼈의 크기 조정 값 입력
5~6번 학목인 Leg_R 뼈의 크기 조정 값 입력

 

6. 4번 항목과 반대로 Leg_R 뼈의 0과 30 프레임의 크기 값의 x축 값을 조금 줄여 줍니다. 위 사진처럼 0과 30 프레임 값이 0.7 / 1.0 과 비슷한 값으로 표시되면 됩니다.


 

여기까지 문제없이 만들었다면 캐릭터가 root 뼈를 기준으로 걷고 있는 애니메이션을 만들 수 있습니다. 캐릭터가 걷기를 하면 몸통과 발 뿐만 아니라 팔과 얼굴 등이 움직이기 때문에 나머지 항목에서 변형 값을 만들어 걷기 애니메이션을 마무리하도록 하겠습니다.

 

 

걷기 애니메이션 중간 단계
걷기 애니메이션 중간 단계

 


 

7. 얼굴 뼈인 face 뼈를 선택하고 이동을 활성화한 후 1~2번 항목과 동일하게 0, 15, 30 프레임에 이동하지 않은 현재 값을 저장하고 7, 22 프레임에 이동 값을 조금 아래(y 축 값을 198로 입력)로 이동해 줍니다.

 

face 뼈의 이동 값을 입력
face 뼈의 이동 값 입력

 

8. 꼬리 뼈인 Tail 뼈를 선택하고 회전(단축키 C)을 활성화한 후 0과 30프레임에는 현재 값을 15 프레임에는 살짝 이동된 값(회전 값 56 입력)을 저장합니다.

 

Tail 뼈의 회전 값을 입력
Tail 뼈의 회전 값 입력

 

9. 왼쪽 팔인 Arm_L 뼈를 선택하고 회전을 활성화한 후 15 프레임에 이동되지 않은 현재 값을 저장하고 0과 30 프레임에 왼쪽으로 조금(회전 값 225 입력) 회전한 값을 저장합니다.

 

9~10번 항목인 Arm_L 뼈의 회전과 크기 값 입력
9~10번 항목인 Arm_L 뼈의 회전과 크기 값 입력

 

10. 왼쪽 팔 뼈의 크기 조정을 활성화한 후 0과 30 프레임에는 현재 값을, 15 프레임은 x축으로 조금 커진 값(x축 값 1.2 입력)을 저장합니다.

 

11. 오른쪽 팔인 Arm_R 뼈를 선택하고 회전을 활성화 한 9번 항목과 반대인 0과 30 프레임에는 현재 값을 저장하고 15 프레임에는 오른쪽으로 조금(회전 값 315 입력) 회전한 값을 저장합니다.

 

11~12번 항목인 Arm_R 뼈의 회전과 크기 값 입력
11~12번 항목인 Arm_R 뼈의 회전과 크기 값 입력

 

12. 오른쪽 팔 뼈의 크기 조정을 활성화한 후 10번 항목과 반대인 15 프레임에는 현재 값을, 0과 30프레임에는 x축으로 조금 커진 값(x축 값 1.2 입력)을 저장합니다.


 

드디어 캐릭터 걷기(Walk) 애니메이션을 완성하였습니다. 애니메이션을 그냥 보기만 할 때는 별거 없어 보이지만 막상 애니메이션을 만들 때는 어떤 뼈를 어떻게 변형해야 하는지 헷갈리고 애니메이션을 만들고 나면 어색해 보이는 경우가 많습니다. 하지만 캐릭터 애니메이션을 만들어보고 공부한다면 자연스럽고 멋있는 애니메이션을 만들 수 있습니다.

해당 포스팅을 마지막으로 기초 튜토리얼을 마무리하겠습니다. 앞으로는 많은 캐릭터들을 이요하여 메쉬 컨트롤이나 제약조건 같은 조금 더 심화한 내용으로 찾아오겠습니다.

기초 튜토리얼이 쉽더라도 2~3번 반복해서 애니메이션을 만들어 보고 내 것으로 만들어 보시기 바랍니다.


 

댓글