Posted in: Unity, 메서드 & 팁 정리

2D 게임 오브젝트(Sprites) 애니메이션화

2020년 출시되고 있는 대부분의 게임들은 플레이어 게임 오브젝트에 정교한 애니메이션을 넣어 생동감 넘치는 움직임을 볼 수 있습니다. 이번 글에서는 그런 게임들처럼 캐릭터에 생동감을 넣어주는 애니메이션 넣는 방법에 대해 알아봅시다.

게임 오브젝트에 애니메이션을 넣기 위한 조건


우선 우리는 플레이어가 오른쪽으로 움직이는 애니메이션을 만든다고 가정해봅시다. 2D 그래픽 오브젝트인 스프라이트는 총 8개가 사용될 예정이고 현재 첫 번째 스프라이트가 Hierarchy에 생성된 상태입니다.

Unity에서 게임 오브젝트를 애니메이션화하려면 오브젝트에 Animator Component를 연결해야 합니다. 그 다음 Animator Controller 에셋를 추가하고 컨트롤러 에셋은 한 개 이상의 Animation Clip을 가져야 합니다.

반드시 필요한 것기능
Animator Component컨트롤러와 클립을 관리하고 재생시켜 줌
Animator Controller 에셋클립을 생성시키고 무슨 클립을 재생시킬지 조건을 부여할 수 있음
Animation Clip실질적인 애니메이션 기능 역할
출처- 유니티 매뉴얼

앞에서 말했던 3가지는 위 사진처럼 연결되어 재생됩니다. 처음 보면 헷갈리는데 한 번 해보면 원리를 알 수 있습니다. 무엇이든 처음이 어렵죠. 이제 차근차근 함께 알아봅시다.

1) 게임 오브젝트에 Animator Component 연결


애니메이션화하려는 게임 오브젝트를 Hierarchy에서 선택합니다. Inspector 창에서 Add Component를 선택합니다.

animator를 검색하고 추가합시다. 직접 찾아도 되지만 저는 검색이 편해서 검색하는 편입니다.

Animator Component가 추가되었습니다. 위 사진에서 빨간색으로 강조한 부분이 Animator Controller 에셋를 레퍼런스로 가집니다.

이제 Animator Controller를 생성해봅시다.

2) Animator Controller 에셋 생성하여 연결하기


보통 저는 Animations 폴더를 만들어서 애니메이션과 관련된 파일을 따로 관리하는 편입니다. 생각보다 만들어지는 파일이 많거든요.

프로젝트 창 원하는 폴더에서 마우스 오른쪽 클릭 > Create > Animator Controller를 선택하여 애니메이터 컨트롤러를 생성합니다.

생성한 Animator Controller를 연결하기 위해 애니메이션화하려는 게임 오브젝트를 선택합니다. Animator 컴포넌트에 Animator Controller를 연결합시다.

이제 Animator Controller를 통해서 실질적으로 재생될 Animation Clip을 만들어야 합니다.

3) Animation Clip 생성하기


Animation Clip을 생성하고 작업하기 위해 Animator 창과 Animation 창을 열어줍시다. Window > Animation > Animation, Animator를 선택하면 됩니다.

Animator 창에선 Animator Controller를 작업할 수 있고 Animation 창에선 Animation Clip의 애니메이션을 작업할 수 있습니다.

Animator Component가 연결되있는 게임 오브젝트를 Hierarchy에서 선택하면 위 사진과 비슷한 모습이 연출 될겁니다.

이제 Animation Clip을 만들어야 되는데 2번 창에서 빈 공간에 오른쪽 마우스 > Create State > Empty를 선택해서 클립을 만들어도 되고 3번 창에서 Create를 선택해도 됩니다. 결과적으론 똑같지만 과정이 약간 달라집니다.

하지만 새로운 State를 생성하려면 어차피 Animator 창에서 만들어야 하기 때문에 우리는 Animator 창에서 Clip State 생성하는 방법을 알아보겠습니다.

3-1) Animator 창에서 Clip State 생성


Animator 창의 빈 공간에서 오른쪽 마우스 > Create State > Empty를 선택합니다.

그러면 New State가 생성되고 Entry State와 연결되어 있습니다.

화살표 방향을 잘 보면 Entry -> New State로 되어있죠? 애니메이션이 시작되면 Entry State가 가리키는 방향의 State를 처음 실행합니다. 위 사진의 New State는 처음 생성한 Animation State이기 때문에 Entry State가 바로 잇는 것입니다. 두 번째로 State를 생성하면 다른 State와 연결되어 있지 않고 우리가 스스로 연결해야 합니다.

여기서 중요한건 New State의 Inspector입니다. 여러 변수가 있는데 Motion 과 Speed가 실질적인 역할을 한다고 보시면 됩니다. Motion 변수는 Animation 파일을 레퍼런스로 가지는 변수이고 Speed는 해당 애니메이션의 속도입니다.

Motion에 넣을 Animation 파일은 프로젝트 창에서 원하는 위치에 만들면 됩니다.

프로젝트 창에서 오른쪽 마우스 클릭 > Create > Animation을 선택하여 Animation 파일을 만듭시다.

생성한 Animation 파일을 New State의 Motion 변수에 넣어줍시다. 저는 RightMove라는 Animation 파일을 생성하였습니다.

이제 게임이 시작되고 게임 오브젝트 Animator Component에 연결된 Animator Controller를 통해 Entry State에 연결돼있는 New State의 RightMove 애니메이션 파일이 실행될 겁니다.

이제 RightMove 파일을 수정하여 실질적인 애니메이션 파일을 만들어야 합니다.

4) Animation 파일 수정


Animation 파일 <-> Animator Controller의 Motion 변수 <-> Animator Component의 Controller 변수 <-> 게임 오브젝트 모두 연결되어 있다면 Animation 파일을 Animation 창에서 수정할 수 있습니다. 하나라도 빠져있으면 Animation 창에선 아무것도 할 수가 없으니 참고해 주세요.

여담으로 Add Property를 누르면 해당 게임 오브젝트가 연결되어 있는 컴포넌트는 대부분 애니메이션 할 수 있습니다. Scale을 추가하여 늘렸다가 줄였다가 할 수 있는 것이죠. 물론 스크립트도 추가할 수 있고요.

프레임마다 2D 그래픽 오브젝트(스프라이트)를 바꾸기 위해선 왼쪽 위에 있는 빨간 버튼을 선택합니다.

빨간 버튼을 누르면 오른쪽에 숫자바가 빨갛게 변하는데 위 숫자는 프레임을 의미하고 프레임 위치에 스프라이트를 놓으면 애니메이션 파일에 기록된다는 것을 의미합니다.

원하는 프레임 위치에 스프라이트를 놓기 위해선

  1. 빨간색 프레임 바를 클릭하여 원하는 프레임 숫자에 하얀색 커서가 위치하도록 합니다.
  2. 다이아몬드 모양의 키프레임 추가를 선택합니다.
  3. 게임 오브젝트 인스펙터 창에서 Sprite Renderer의 Sprite 변수에 원하는 스프라이트를 대입합니다.

위에 완성된 Animation의 프레임을 설명하자면 0 프레임에 스프라이트 1이 위치했다면 5 프레임까지는 스프라이트 1이 출력됩니다. 그런 식으로 8장을 자연스럽게 표현하는 것이죠. 원하는 애니메이션이 구성되었다면 다시 빨간 버튼을 클릭해서 기록을 종료합니다.

위 사진에선 9개의 키프레임이 생성되어 있는데 각 스프라이트마다 출력되는 프레임을 맞추기 위함입니다.

Animation 창에서 플레이 버튼을 누르면 Scene 창에서 확인할 수 있습니다. 잘 나오는군요.

하지만 여기서 생기는 의문점이 있습니다. 캐릭터는 한 방향으로만 움직이지 않죠. 여러 방향으로 움직이는 게임이라면 각 상황에 맞춰 해당 방향의 애니메이션을 보여줘야 합니다.

애니메이션이 추가될 때마다 Animator Controller를 새로 만들어야 할까요? 글쎄요. 그렇지는 않을 겁니다.

저는 플레이어 게임 오브젝트의 움직임이라면 하나의 컨트롤러에 플레이어 움직임과 관련된 모든 애니메이션 클립을 관리합니다.

5) 애니메이션 파라미터를 통해 게임 상황에 따라 클립을 조절


위 사진은 플레이어 움직임 Animator Controller에 생성되었고 서로 연결되있는 Animation Clip 모습입니다. 그냥 보기에는 엄청 복잡해 보이죠?

처음 Animation Clip을 생성하면 아무 조건없이 Entry와 연결되어 해당 Animation Clip의 Motion을 재생했죠. 하지만 Animation Clip이 2개 이상 생성되면 각 애니메이션 클립끼리 애니메이션 파라미터 조건에 의해 연결되어야 자연스럽게 클립을 재생할 수 있습니다. 애니메이션 파라미터는 위 사진 왼쪽에 보이는 변수들입니다.

자세한 설명은 애니메이션 상태 머신 기초유니티 매뉴얼 애니메이션 파라미터를 참고하면 어떻게 작용하는지 알 수 있습니다. 그리고 골드메탈님이 적어주신 블로그 글을 보면 실제로 만드실 수 있을 것입니다.

저는 플레이어의 조작에 따라 애니메이션 파라미터를 변경하여 상황에 따라 그에 맞는 애니메이션이 재생되게 하였습니다.

여러분들도 복잡한 관계도를 가진 Animator Controller를 사용해야 한다면 스크립트를 통해 제어해야 합니다.

위 사진은 캐릭터를 조작할 때마다 애니메이션 파라미터의 값이 변경되면서 값에 맞는 애니메이션 클립이 실행되는 사진입니다.

긴 글 읽어주셔서 감사합니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다