[유니티] 9강 스프라이트 애니메이션

이전 시간에는 캐릭터의 이동을 다뤄봤습니다. 캐릭터가 대기를 하거나 캐릭터가 이동을 할때 상황에 맞게 스프라이이트가 선택적으로 그려질수 있도록 해보겠습니다.

 

1. 이미지 슬라이스, 단일 이미지 처리하는 방법

일정한 크기로 붙어져 있는 스프라이트를 준비했습니다.

우선 대기 동작을 슬라이스 해보겠습니다.

이미지 파일을 선택 => Inspector에 있는 Sprite Mode를 Multiple 변경 => Apply 클릭 => Sprite Editor 클릭

Sprite Editor에서 상단의 Slice 메뉴를 열어서, Grid By Cell Count를 선택하고 이미지가 횡으로 2개가 있으니 2값을 입력하고, 오른쪽에 Apply를 누르고 나가면 됩니다.

이제 이미지 파일 옆 왼쪽으로 보는 화살표를 클릭하면 Slice된 각각의 이미지가 선택이 가능해졌습니다.

Hierachy에서 Hero를 선택해서 Inspector가 나오도록 한다음, 방금 슬라이스한 이미지를 아래 그림처럼 넣습니다.

보통은 마우스로 이미지 드래그 & 드롭으로 넣을겁니다.

이제 캐릭터 이미지가 보입니다.

2. 스프라이트 애니메이션

1) Add Component > Animator 추가

추가하고 나면 Animator Controller를 등록하는 곳이 보입니다.

2) [마우스 우클릭]이나 Project +버튼을 눌러서 Animator Controller를 누릅니다.

3) 생성된 Animator Controller이름을 똑같은 이름으로 Hero로 명명했고, Hero객체를 선택한 다음 Animator에서 Controller를 방금 만든것을 지정합니다.

1) 2) 3)을 통해서, 이제 Hierachy에 있는 Hero는 Hero(Animator Controller)에 따라 애니메이션 처리 됩니다.

 

Animator Controller는 Animation을 하나하나 연결해주는 역할입니다.

이제 Animation 을 하나씩 만들어 보겠습니다.

HeroWait(대기동작), HeroWalkDown(아래걷기동작), HeroWalkUp(위로걷기동작)을 만들었습니다.

3개의 애니메이션은 끝이 나는게 아니라 계속 반복되는 동작이라서, 각각 Loop Time을 체크합니다.

방금 만든 Animation 3개를 Animator뷰에 드래그 & 드롭을 해서 넣습니다.

이번에는 Animation뷰를 호출했습니다. 창 모드로 떠서 타이틀바를 누르고 Animator뷰 옆에 옮겨서 넣었습니다.

대기 동작은 Index 0-1 옮겼습니다.

아래걷기, 위로걷기 동작은 0-1-0-2 로 옮겼습니다.

방금 Animator Controller에 포함된 HeroWait, HeroWalkDown, HeroWalkUp에 스프라이트를 넣었습니다.

 

HeroWait에서 HeroWalkDown이 일어나도록 해보겠습니다.

먼저 Trigger로 toWalkDown을 만듭니다.

Transition을 만들어서 HeroWalkDown을 가리키도록 합니다.

트랜지션을 선택하고, 왼쪽에 Has Exit Time을 해제하고 Conditions에 +를 눌러 toWalkDown를 등록합니다.

반대로, HeroWalkDown에서 트랜지션을 만들어 HeroWait을 가리키며 Conditions에 toWait을 등록합니다.

그렇게 완성한 Animator Controller입니다.

이제 코드로 갑니다.

캐릭터의 이동과 애니메이션을 완성해봤습니다.

 

과제 : 현재 캐릭터가 왼쪽을 보고 있습니다. 만약 오른쪽으로 누르면 캐릭터를 오른쪽으로 보고 싶다면,

상황에 따라 둘 중 하나를 하면 되겠습니다. 이제 4방향에 대해서 모두 표현이 가능하겠습니다.

transform.Rotate(new Vector3(0, 180, 0));

transform.localScale = new Vector3(-1, 1, 1);

시간이 되면, 완성해보는게 좋겠습니다.

 

다음 강의에서는 캐릭터의 상태를 문자열로 보이도록 해보겠습니다.

-끗-