본문 바로가기
2D 디자인

[Spine] 스파인 기초 튜토리얼 3편 - 스파인 캐릭터 숨쉬기(Idle) 애니메이션 만들기

by J-Chi 2022. 9. 11.

 

캐릭터 숨쉬기 애니메이션
캐릭터 숨쉬기 애니메이션
기초튜토리얼3.zip
0.09MB

스파인 기초 튜토리얼 캐릭터 숨쉬기(Idle) 애니메이션 만들기를 포스팅하겠습니다. 기초 튜토리얼 1, 2편을 먼저 숙지하시고 보시면 더욱 이해하기 좋습니다.

스파인 기초 튜토리얼 1편 - 포토샵 캐릭터를 스파인에 불러오기
스파인 기초 튜토리얼 2편 - 스파인 캐릭터 리깅

애니메이션을 만들기 위해서는 포트 뷰의 좌측 상단에 있는 설정/애니메이션 아이콘을 클릭해 애니메이션 모드로 진입해야 합니다. 애니메이션 모드는 설정 모드보다 많은 기능이 있고 뼈 생성 및 이미지 폴더 변경 같은 기능은 사용할 수 없습니다. 그리고 애니메이션 모드에서 변형 도구를 이용하여 뼈나 어테치먼트를 변형해도 설정 모드의 세팅 값은 변하지 않으니 편하게 애니메이션 작업을 진행하면 됩니다.

튜토리얼 캐릭터는 단순하기 때문에 많은 내용을 담지는 못하지만 애니메이션 모드를 이해하는 데는 도움이 되니 직접 애니메이션을 만들고 확인해 보세요.


 

숨쉬기(Idle) 애니메이션


게임 캐릭터 애니메이션을 만들 경우 Idle 애니메이션은 필수적으로 만들어야 합니다. 캐릭터가 멈춰 있는 동안 Idle 애니메이션을 출력해야 캐릭터가 살아 있는 것처럼 보이기 때문이죠. 보통 Idle 애니메이션은 숨 쉬는 모션에 캐릭터 특징을 부각시켜 간단하게 애니메이션을 만들게 됩니다. 튜토리얼 캐릭터를 이용하여 간단한 숨쉬기 애니메이션을 만들어 보겠습니다.

 

1. Body 뼈를 선택하고 변형 도구 이동을 선택(단축키 V)합니다. 도프시트 숫자 0에 이동 값을 저장하기 위해 변형 도구 이동에 있는 열쇠 모양을 누르거나 키보드 L 키를 눌러 도프시트에 키를 저장합니다.

 

Body 뼈에 이동 값 저장
Body 뼈에 이동 값 저장

 

2. 1번 항목과 동일하게 도프시트 숫자 80에 마우스 왼쪽 클릭을 하고 L 키를 눌러 도프시트에 이동 키값을 지정합니다. 아래 사진의 노란색 2번 항목입니다.

 

처음과 끝에 동일한 키값을 넣으면 애니메이션이 반복될 때 자연스럽게 연결이 됩니다.

 

Body 뼈에 나머지 값 저장
Body 뼈에 나머지 값 저장

 

3. 도프시트 숫자 40에 마우스 왼쪽 클릭을 하고 Body 뼈의 초록색 화살표를 눌러 아래로 조금 이동시킵니다. 위 사진의 빨간색 3번 항목입니다. 이때 자동 키가 활성화 되어 있다면 도프시트에 자동으로 이동 값이 입력됩니다. (위 그림의 주황색 자동 키 활성화 여부 확인)

 

4. 양쪽 다리뼈인 Leg_L와 Leg_R을 동시에 선택하고 변형 도구 크기 조정을 선택(단축키 X)합니다. 이후 1~2번 항목과 동일하게 진행하여 도프시트에 키값을 입력합니다.

 

다리뼈에 크기조절 값 저장
다리뼈에 크기 조정 값 저장

5. 양쪽 다리뼈를 선택한 상태에서 도프시트 숫자 40으로 이동한 후 크기 조정이 선택된 상태에서 뼈의 빨간색 부분을 root 뼈의 위치 정도까지 줄여 줍니다. Root 뼈가 해당하는 위치가 지면이라고 생각하며 애니메이션을 만듭니다.

 

다리뼈 나머지 값 저장
다리뼈 나머지 값 저장


 

여기까지 진행했다면 캐릭터가 root 뼈를 기준으로 상하 운동하는 애니메이션이 만들 수 있습니다. 다채로운 애니메이션을 만들기 위해 다음 항목에서 얼굴과 팔, 꼬리를 조금씩 변형하여 Idle 애니메이션을 마무리하도록 하겠습니다.

 

숨쉬기 기본 단계 완성
숨쉬기 기본 단계 완성


 

6. 꼬리뼈인 Tail 뼈를 선택하고 변형 도구 회전을 선택(단축키 C)합니다. 이후 1 ~2번 항목과 동일하게 아래 사진과 같이 회전 키값을 입력합니다.

 

꼬리뼈의 회전 값을 저장
꼬리뼈의 회전 값 저장

 

7. 도프시트 숫자 40에 포인트를 두고 Tail 뼈가 클릭 된 상태에서 프리뷰의 빈공간을 마우스 왼쪽 클릭하여 위 사진과 같이 아래로 조금 내려 줍니다.

 

8. 얼굴 뼈인 face 뼈를 선택하고 이동값을 1~3번 항목과 동일하게 조금 아래로 이동시켜 줍니다. 얼굴이 몸의 움직임과 조금 다르게 애니메이션 되는 걸 확인 할 수 있습니다.

 

얼굴 뼈에 이동 값을 저장
얼굴 뼈에 이동 값 저장

 

9. 마지막으로 양쪽 팔을 6 ~7번 항목과 동일하게 회전 값을 도프시트에 입력합니다. 이때 왼쪽 팔과 오른쪽 팔의 움직임을 반대 방향으로 저장해 어색하지 않게 합니다.

 

팔 뼈에 회전값을 저장
팔 뼈에 회전값 저장


 

여기까지 캐릭터 숨쉬기(Idle) 애니메이션을 만들어 보았습니다. 캐릭터가 단순하고 메쉬나 제약조건이 들어있지 않아서 다양한 효과를 주진 못하지만 스파인을 이해하고 입문하는 분들에게는 반드시 도움이 될 것입니다. 손에 익을 때까지 직접 리깅을 하고 애니메이션 작업을 해보시는게 좋습니다.

 

다음 튜토리얼은 [Spine] 스파인 기초 튜토리얼 4편 - 스파인 캐릭터 걷기(Walk) 애니메이션 만들기를 포스팅하도록 하겠습니다.

 

 

 

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

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

jinpoc.tistory.com


 

댓글