[모바일, 2D] 유니티 기초3 - 캐릭터 애니메이션 만들기

이번에는 캐릭터를 넣고 움직이게 하는 애니메이션을 만들기로 한다.

기초2편 씬전환에 이어지는 내용이다.

 

SampleScene 에서 시작한다.

Project창의 Assets폴더 안에 Animations와 Sprites폴더를 만들어준다.

Player.png

0.00MB

 

 

예제로 사용할 캐릭터 사진파일이고, 대충 찍은거라서 퀄리티가 낮지만 그냥 하자.

이 그림파일은 16x16사이즈의 젤리 캐릭터인데 이걸로 하면 장점은 도트그래픽을 다루는 방법도 알 수 있다!?

스프라이트 폴더 안에 올려놓은 Player사진을 다운받아서 넣는다.

스프라이트란 단순하게 게임에서 사용하는 이미지들을 말한다고 생각하면 된다.

나중에 Atlas라는 개념도 다룰 수 있으면 다룰텐데, 이런 스프라이트들을 큰 이미지 하나로 묶은것을 말한다.

이렇게 하면 리소스를 줄일 수 있는 장점이 있다.(Game창의 Stats를 누르면 나오는 Batches가 줄어든다)

유니티에서도 아틀라스를 만들 수 있게 지원을 해주기 때문에 기회가 되면 포스팅하도록 한다.

 

이제 방금 넣은 캐릭터 스프라이트를 선택하고 인스펙터 창을 보자.

일단 위 사진처럼 똑같이 만들어준다.

뭔가 많지만 간단하게 Sprite Mode는 싱글이면 한장 통짜로 사용하는거고, 멀티플이면 이 한 장을 쪼개서 사용한다는 뜻이다. 사진을 보면 알겠지만 4개로 쪼개져있으니 멀티플로 선택한다.

 

Pixels Per Unit은 이름대로 유닛당 픽셀이다. 위 사진은 Scene창을 보면 나눠져있는 격자를 볼 수 있는데, 이 네모 한칸 한칸이 유닛이다.

즉 유닛 한 칸에 들어갈 픽셀 수이다.

사진의 캐릭터는 16x16으로 찍었다고 했다. 그러니까 저기를 16으로 설정하면 저 한 칸에 캐릭터가 딱 들어맞는다.

이걸 잘 설정하면 나중에 타일 형식으로 배경같은걸 찍을 때 좌표 잡기가 매우 편해진다.

 

그 밑의 Advanced부분의 3개 설정한건 픽셀 그림은 엄청 작은 사이즈라서 그냥 사용하면 깨져서 보이게 된다.

그래서 깨지지않게 필터도 끄고 압축도 안하도록 설정한거라고 보면 된다.

 

이후 오른쪽 아래 Apply를 누르고 중간쯤의 Sprite Editor를 누른다.

 

그럼 위 사진같은 창이 뜬다. 지금 사진이 통짜로 되어있기에 4개로 쪼개줘야하는데, 16x16이니까 그 사이즈대로 잘라준다.

사진처럼 들어가서 Grid By Cell Size로 선택한다. (사실 그림을 잘 나눠놓으면 오토매틱으로 자르면 편하다.)

 

Grid By Cell Size로 선택하고 Pixel Size의 x와 y를 16으로 한다. 왜냐면 16x16으로 찍었으니까

Offset은 자르기 시작하는 위치인데 그냥 좌상단 끝에서부터 자르면 되니까 0, 0으로 둔다.

Padding은 자른 칸 사이의 간격을 의미한다. 위의 2개와 아래2개는 떨어져있는 것 처럼 보이지만 아래로 내려가게 찍은거니까 0, 0으로 설정하면 된다.

이후 Slice를 누르면

 

위처럼 된다. 참고로 사진이 잘 안보일 때가 있는데, 그럴때는 Apply오른쪽의 빨강 초록 파랑 네모를 누르면 투명부분은 검정색, 색깔이 있는 부분은 하얀색으로 나와서 실루엣이 잘 보인다.

이제 우측 상단의 Apply를 누르고 창을 닫고 나온다.

 

이제 Sprite폴더에 아까 넣은 사진을 펼칠 수 있는데, 이렇게 4개로 잘 잘려있다.

 

잘린 4개 이미지 전부 선택해서 하이어라키창으로 드래그한다.

 

그러면 위처럼 뜨는데, 아까 만들어놓은 Animations 폴더에 찾아가서 거기에 저장한다.

이름은 Charactor_Idle이라고 했다. 가만히 대기상태를 보통 Idle상태라고 한다.

 

위처럼 Animations폴더 안에 2개가 생겼으면 잘 된거다.

각각 선택해서 인스펙터를 보면 세모모양은 애니메이션 클립, 네모모양은 애니메이터 컨트롤러다.

각각 애니메이션, 애니메이터라고 부르겠다.

 

애니메이션은 어떤 오브젝트(예를들어 캐릭터)가 취할 수 있는 각각의 동작에 대한 애니메이션 하나하나를 뜻한다.

방금은 대기상태의 애니메이션인 Charactor_Idle 애니메이션을 만든 것이다. 나중에는 움직이는 애니메이션이나 공격, 점프같은것도 만들 수 있겠다.

애니메이터는 어떤 오브젝트 하나가 가질 수 있는 여러개의 애니메이션들을 관리한다.

그래서 한 오브젝트에 대한 움직임 표현은 보통 애니메이터 1개, 애니메이션 여러개로 만든다.

 

경험을 토대로 한 가지 첨언을 하자면, 게임을 만들다 보면 애니메이션이 필요한 오브젝트들이 상당히 많아지게 된다.

그러면 애니메이터와 애니메이션 또한 엄청 많아지게 되는데, 그렇기에 개인적으로는 애니메이션과 애니메이터를 따로 폴더로 구분해서 넣었었지만 지금은 규모가 작기에 이렇게 만들기로 했다.

그러니까 이름 짓는것도 알아보기 쉽게 잘 지어줘야 한다. 특히 프로젝트를 누군가와 같이 할 때 이름 짓는 방식이나 코딩 스타일을 어느정도 통일하는것이 매우매우매우 중요하다. 안그러면 나중에 진짜 헷갈린다.

 

이 애니메이션과 애니메이터를 쉽게 조작하기 위해 Window -> Animation 안의 Animation과 Animator를 각각 열어준다.

 

나는 위 사진처럼 배치를 해 두었다.

참고로 애니메이터 창은 q툴같은걸로 움직이는게 아니라 마우스 스크롤버튼을 누른채 드래그해서 화면을 움직이고 스크롤을 돌려서 확대 축소한다.

 

위 사진처럼 대강 정리하고 나면 중앙 상단의 재생버튼을 눌러서 캐릭터가 어떻게 움직이는지 확인한다.

 

뭔가 움직이긴 하지만 가라앉았다가 뚝뚝 끊겨서 올라오는게 되게 부자연스럽다.

이유는? 4장의 사진으로 애니메이션을 만들었는데, 사진들이 내려가는것만 있고 올라오는건 없기 때문이다.

그래서 내려오는 거 반대로 올라오는 것도 애니메이션에 넣어주면 자연스러워진다.

(만약 캐릭터가 한 번 움직이고 만다면 조금 전에 만들었던 프로젝트창의 Charactor_Idle을 눌러서 인스펙터의 Loop Time을 체크해 반복하게 만들면 된다.)

 

아까 만들었던 Charactor_Idle애니메이션을 더블클릭하면 방금 배치했던 애니메이션 창에 위처럼 나온다.

시간대로 조절하면 힘드니까 지금은 프레임단위로 바꿔보자.

애니메이션 창의 오른쪽 끝의 점 3개를 눌러서 Seconds를 Frames로 바꿔준다.

 

1, 2, 3, 4번 순서대로 스프라이트가 바뀌면서 애니메이션이 재생되는데, 이 스프라이트들은 점점 내려가는 모양새다.

그러니까 1, 2, 3, 4, 3, 2로 넣어주면 된다.

그러면 순환하면서 1 2 3 4 3 2 1 2 3 4 3 2 1 ~~~ 이렇게 될거다.

위 사진처럼 작은 마름모를 눌러서 컨트롤c, v로 복사 붙여넣기 하고 다시 재생해보자.

 

젤리가 내려갔다 올라오는게 자연스러워졌다.

사실 몰캉몰캉 움직이게 하고 싶었는데 실력이 없어서 땅으로 들어가는 것 같지만 그냥 하자

 

근데 움직이는게 너무 빠르니까 속도를 조정해 보자.

1프레임에 한 스프라이트를 넣었는데, 2프레임당 한 스프라이트가 들어가게 위 사진처럼 각 마름모를 드래그해서 옮겨준다.

그러면 속도도 알맞고 애니메이션도 자연스러워졌다.

 

물론 이렇게 안하고 다른 방법으로도 속도를 조절할 수 있지만 지금은 이렇게 하자.

 

* 캐릭터 인스펙터 참고사항

 

하이어라키 창에 올라와있는 젤리캐릭터를 선택해서 인스펙터를 보자.

 

Transform컴포넌트는 오브젝트라면 기본적으로 가지고 있는 것이다. 저번 포스팅에서 설명했듯이 캔버스 안의 UI가 아니기 때문에 Rect Transform이 아니다.

위치나 회전, 크기를 조절할 수 있다.

 

Sprite Renderer컴포넌트는 지금 젤리캐릭터처럼 스프라이트가 적용된 오브젝트들의 스프라이트를 관리할 수 있는 컴포넌트다. 뭔가 많지만 나중에 스프라이트를 자세히 다루는 포스팅에서 더 확인하도록 하자.

 

Animator컴포넌트는 방금 우리가 만든것처럼 애니메이션이 적용된 오브젝트에 들어가는 컴포넌트다.

 

이처럼 어떤 오브젝트에 원하는 기능의 컴포넌트를 넣고 원하는대로 작동하게 만드는 것이 개발하면서 가장 중요하다. 그러니까 원하는 기능을 만들 때 인스펙터에 들어있는 내용들을 잘 선택하고 활용하는 것이 좋다.