래토피아 개발일지 #4 - 애니메이션

Cassel
2022-07-01
조회수 368


안녕하세요! <래토피아>를 개발 중인 카셀입니다.

어느덧 여름이 다가오고 긴 장마가 시작되었네요.

<래토피아>에도 여름과 장마 시스템을 적용할 날을 바라보며,

이번 달도 열심히 개발을 진행하고 있습니다.


이번 화에서는 <래토피아> 애니메이션 제작 과정에 대해 소개하도록 하겠습니다.

적다 보니 길어져서 시민들의 행동과 관련된 내용은 다음에 소개 드리도록 할게요…




캐릭터 애니메이션

<래토피아>는 전작보다 더 캐릭터성을 높이고 싶었기에 애니메이션의 비중을 키웠습니다.

그래서 캐릭터들의 동작을 통해서 게임 분위기를 어떻게 만들어나갈까 많은 고민을 했었지요.


어느 정도의 고증은 지키고 싶었기에 기본적으로 사실적인 동작들을 섬세하게 표현한 애니메이션에,

캐릭터들을 과장되게 찌그러지고 늘리는 스쿼시 앤 스트레치(Squash & Stretch) 기법을 사용하여,

서양 카툰 애니메이션 속 ’쥐’ 캐릭터의 장난스럽고 호기심 많은 성격을 보여주는 쪽으로 방향을 정했지요.


스쿼시 앤 스트레치의 예시


스파인에서는 애니메이션 사이 보간처리가 자동으로 되어,

캐릭터가 부드럽게 늘어났다 줄어드는 애니메이션 제작이 손쉽게 가능했습니다.

추후에는 UI 애니메이션과 다른 오브젝트들의 애니메이션에도 이런 기법들을 적용하여,

게임 전체의 분위기를 활기차고 통통 튀는 분위기로 만들어 나가면 좋을 것 같았죠.



캐릭터 애니메이션은 쥐 캐릭터 하나에 모든 애니메이션을 넣어버리는 방식으로 개발하였습니다.

즉 게임 내 모든 쥐들은 같은 캐릭터이고, 스킨 시스템을 활용하여 외형만 바뀌는 방식이지요.

다양한 실루엣의 쥐들을 만들 수는 없지만, 제작 속도나 관리 면에서는 장점이 있었고,

시뮬레이션 속 캐릭터인 심(Sim)에 적용하기에 적합한 방식이었습니다.


쥐의 모든 애니메이션들이 담겨있는 쥐 프로젝트 파일


하지만 한 개의 스파인 프로젝트에서 쥐들의 모든 애니메이션을 관리하다 보니,

수백 개의 애니메이션들을 잘 정리해 줄 필요가 있었지요.

앞으로 또 얼마나 늘어날지, 지나치게 늘어날 시 문제는 없을지 걱정이 되긴 합니다.




스킨 시스템

한 종류의 쥐만 등장할 수 있다 보니, 다양한 스킨들로 이를 보완해 줄 필요가 있었는데요.

스킨을 추가하는 과정도 녹록지는 않았습니다.


이전에는 머리, 몸통과 같은 이미지들을 여백이 없게 트림(Trim)한 뒤,

머리카락이나 망토를 자연스럽게 흩날리게 할 수 있는 기능인 메쉬(Mesh) 기능을 적용했었습니다.

이는 이미지들을 다각형으로 만들어 자연스럽게 구부릴 수 있는 스파인의 큰 기능 중에 하나였으나,

긴 머리나 짧은 옷처럼 크기와 실루엣이 다른 스킨 이미지들을 새로이 추가하려 하니,

이미지들의 위치와 메쉬를 일일이 다시 설정해줘야 하는 불편함이 있더군요.


이 때문에 스킨을 만드는 과정에서 시간 소요가 꽤 커졌고, 이 공정을 간소화할 필요가 있었습니다.

뭔가 해결 방법이 있을 것 같아서 여러 방법들을 찾아보았는데요.

끝내 이미지들의 크기를 통일 시키는 대신 메쉬 기능을 포기하는 것으로 해결을 하였습니다. 

아쉬움은 컸으나, 아직까지는 메쉬 기능을 광범위하게 쓰고 있지 않았기에 내릴 수 있는 선택이었죠.


앞으로 추가될 수 많은 스킨들을 고려하여 추가가 간편한 방식으로 변경


그래도 여러 시행착오 끝에 다양한 복장들을 간편하게 추가할 수 있게 되었고,

추후에는 유저들이 직접 그린 복장까지 쉽게 적용이 가능할 수도 있겠다는 생각이 들었습니다.




상호작용/건조물 애니메이션 제작

건조물 리소스들이 제작되면서 시민들의 애니메이션도 건조물에 맞춰 제작하였는데요.

시민 캐릭터에게 각 건조물 별 상호작용 애니메이션을 만들어 넣고,

해당 건조물에 다가갈 시 상호작용 애니메이션을 재생시키는 간단한 방법이었죠.


침대와 상호작용하는 애니메이션


초기에는 시민의 뒷모습을 표현하기가 어려웠기에,

시민이 건조물 앞에만 서있는 애니메이션만 제작했는데요.

보다 보니 책상과 같은 건조물에 배치된 특정 오브젝트 뒤로 시민이 돌아가게 만들고 싶어졌습니다.

그래서 여러 오브젝트들이 통합되어 있었던 건조물들의 이미지를 조각내고,

건조물과 시민의 레이어 표시 순서를 변경해 더 다채로운 애니메이션을 시도해 보기 시작했지요.


통이 분리된 양조장 건조물


그러나 스파인으로 건조물의 애니메이션을 제작하고자 하니 시민과 건조물의 호환이 어려웠습니다.

스파인의 이미지 표시 순서를 정하는 드로우 오더(Draw Order) 기능은,

현재 제작 중인 스파인 애니메이션 내에서의 표시 순서에만 관여했기 때문이었지요.

그래서 애니메이션 파일을 시민/시민 앞으로 표시되는 건조물/시민 뒤로 표시되는 건조물들로 분리하여 제작해야 했습니다.


또한 시민이 정해진 타이밍에 건조물 앞으로 갔다가 뒤로 갔다 하는 연출을 적용하려면,

결국 유니티를 통해 시민과 건조물의 표시 순서를 조정해 줘야 했기에,

건조물의 애니메이션은 유니티 애니메이터를 통해 제작을 하는 쪽으로 변경하였고,

스파인으로 제작된 시민의 상호작용 애니메이션과 싱크를 맞춰가며 조정하는 방향으로 작업하였습니다.


프레임과 싱크를 맞춰서 제작한 애니메이션


비록 스파인과 유니티, 두 가지 프로그램을 번갈아가며 작업해야 하는 불편함은 존재했지만,

긴 조정 작업 끝에 나온 결과물은 만족스러웠습니다.

번갈아가면서 하는 작업도 노하우가 쌓이다 보면 불편함이 개선되겠지요.




이펙트 추가

완성된 시민과 건조물의 애니메이션을 보니 새로운 욕심이 나더군요.

좀 더 건조물을 뽐낼 수 있는 먼지나 광원 등 연출들을 추가하면 좋을 것 같았습니다.


그래서 제작된 애니메이션에 맞춰 이펙트를 추가하는 작업을 진행하였습니다.

이펙트는 유니티의 파티클 시스템을 이용하여 광원이나 연기 같은 것을 추가하였고,

파티클로 표현할 수 없는 연출들은 스프라이트 이미지를 직접 그려서 추가하였습니다.


이펙트가 추가된 용광로 건조물


이펙트의 경우 앞으로 추가될 다른 건조물들에서도 재사용이 가능하게, 

파티클이나 스프라이트 이미지를 명암만 들어간 흰색으로 작업해서 확장성을 높여놓았지요.


아직은 개선해야 할 것도 많고 배워가고 있는 단계이지만,

한 걸음 씩 발전되어가는 캐릭터와 건조물들을 보니 성취감과 감동은 더욱 크게 다가오네요.

출시일에는 지금보다 발전되고 매력적인 연출들로 유저에게 기쁨을 줄 수 있길 기대해봅니다.




게임 체험 프로그램

저는 만들고자 하는 게임과 관련된 게임들을 많이 경험해보는 것은 개발에 많은 도움이 된다고 생각합니다.

의견을 주고 받을 때 특정 게임에 대한 비유를 들면 이해하기 쉬워지며,

게임 경험을 토대로 개발중인 게임에 대한 여러 아이디어들이 나올 수도 있지요.


그래서 2주에 한번은 한시간정도 다같이 모여앉아 게임을 체험하는 시간을 새로 만들었습니다.

이를 통해 팀원들의 도시건설 게임, 시뮬레이션 게임에 대한 이해도를 높이고,

새롭고 좋은 아이디어들을 발굴하고자 하였습니다.


게임 체험 프로그램을 통해 체험한 게임들


마땅히 체험할 게임이 없는 경우에는 보드게임 활동을 통해 함께 피로를 풀기도 하면서,

중세에 대한 건조물들이나 직업, 자원 등에 대한 지식을 높이기도 하였죠.


이렇게 경험이 축적되어 갈수록 게임의 디테일을 높일 수 있는 아이디어들이 많이 발굴되고,

게임의 퀄리티도 상승할 것이라 믿고 있기에,

앞으로도 적극적으로 게임을 발굴하여 팀원들과 함께 체험할 계획입니다.




오늘 하루도 긴 글 읽어주셔서 감사드립니다.

다음 화에서는 플레이어 캐릭터인 공주와 시민들의 행동 트리를 소개토록 하겠습니다.

홈페이지 구독 메일에 이메일을 등록해 주시면 최신 소식을 전해드리니 많은 구독 부탁드리며,

22년 하반기도 행복 가득하시길 기원합니다.


또한, 저희가 아직도 UI 디자이너분을 찾고 있는데요,

함께 개발하고자 하시는 UI 디자이너분이 계시다면 연락 주시면 감사하겠습니다!

https://casselgames.notion.site/3bfe510aa2434942ba521c48ba7829f9

10 0