[압량(Amnyang)] #1. 2D Bone Animation으로 흔들리는 배경 오브젝트 구현하기

 

현재 나는 겨울방학동안 실력 증진을 위한 유니티 게임 개발 프로젝트를 진행 중이다.

나까지 총 기획 1명, 프로그래밍 2명, 아트 1명으로 구성된 대학생들이다.

 

다들 경험이 없는 초보 개발자들이지만, 게임을 만들고 싶어하는 열정이 가득한 사람들이며 각자 자기 분야에 대해 공부를 하면서 실력을 쌓아가고 있는 중이다. 그러던 중, 디자이너 분께 다음과 같은 요구사항을 받았다.

 

혹시 나무에 걸려 있는 천이 바람에 흔들리는 효과를 줄 수 있나요?

 

그래도 유니티 애니메이션(Animation)과 애니메이터(Animator)에 대해서는 어느정도 조금 공부를 해 놓은 상황이었다.

하지만, 어떤 애니메이션 기법으로 구현을 할 지 고민이었다.

 

그래서 유니티 에셋 스토어(Unity Asset Store)에 들어가서 2D 무료 에셋 몇 개를 뜯어봤다.

무료 에셋만 봐서 그런건지, 샘플을 몇 개 안 봐서 그런건지 모르겠지만 전부 "페이지 애니메이션"으로 구현을 해놨었다.

/*  페이지 애니메이션(Page Animation)이란 어떤 움직임에 대해 연속된 그림들을 교체해가며 구현하는 기법  */

 

디자이너 분이 한 분 밖에 안 계셨기 때문에 과도한 작업량을 요구하는 페이지 애니메이션 방법만은 피하고 싶었다.

셰이더(Shader)를 통해 구현하는 방법도 있다고 하는데, 이것까지 공부를 하면 시간이 촉박할 것 같았다.

그래서 공부 중이었던 2D Bone Animation을 통해 한 번 구현해보기로 했다.

 

 

 

1. 스프라이트 뼈대(Bone) 심기 작업

 

디자이너 님께 받은 리소스(Resource)

 

레이어(Layer) 별로 자동 분리 및 조립이 되는 PSB 확장자 파일로 디자이너 님께 요청을 해서 받았다.

Skinning Editor를 통해 먼저 뼈대(Bone) 작업을 해봤다.

 

뼈대 생성 작업

 

바람은 오른쪽에서 왼쪽으로 부는 걸로 설계를 하고, 그에 따라 자연스럽게 천의 밑 쪽이 흔들릴 수 있도록 뼈대를 생성해주었다. 그리고 Auto Geometry를 통해 메쉬(Mesh)를 생성해줬다.

 

메쉬(Mesh) 생성

 

천만 영향을 받을 거니까, 천에 해당하는 레이어만 선택해서 메쉬 생성을 해줬다. 메쉬 개수는 괜찮은 것 같고, 가장자리 부분 메쉬를 좀 더 보듬어줘야할 것 같다.

 

Before

 

After

 

좀 더 굴곡이 있는 부분은 버텍스(Vertex)를 더 생성해서 보완해줬다. 그리고 가중치(Weight) 작업을 진행해줬다. 먼저 Auto Weights를 통해 전체적으로 자동 가중치를 줬다.

 

 

 

색깔 별로 의미하는 바가 무엇이냐면, 해당 색깔의 뼈대가 움직일 때 스프라이트가 영향을 받는 부분이란 뜻이다.

예를 들어, 천에 노란색으로 칠해진 부분은 노란색 뼈대가 움직이면 스프라이트가 찌그러지거나 늘어나도록 영향을 받는다.

 

노란색 뼈대를 움직이기 전

 

노란색 뼈대를 움직인 후

 

 

암만 바람이 불었다고 하더라도, 천이 저 정도까지 찌그러지는 것은 조금 부자연스럽긴 하다. Weight Brush를 통해 원하는 뼈대를 클릭하고 페인트칠하면 해당 뼈대 색깔로 칠해진다. 중심축 색깔인 빨간색으로 칠하면서 뼈대를 회전해보며 테스트를 했다.

 

Weight 조정 후, 노란색 뼈대 움직이기 전

 

Weight 조정 후, 노란색 뼈대 움직인 후

 

이제 노란색 뼈대가 움직이더라도, 그 윗 쪽은 찌그러지지 않는 것을 볼 수 있다. 노란색 천도 똑같이 작업을 진행줬다.

Apply를 누르고 씬(Scene)에 배치했다.

 

 

 

2. 천이 흔들리는 애니메이션 만들기

 

이제 애니메이션을 만들 차례다. 천의 움직임을 다룰 애니메이터를 하나 만들어줬다.

 

 

"천" 게임 오브젝트에 애니메이터 컴포넌트를 부착하고, 방금 만든 애니메이터를 넣어줬다.

"천" 오브젝트에 애니메이터를 부착하면 안 된다. 뼈대들을 움직이는 것이기 때문에 뼈대들(bone_1, bone_8)의 부모 오브젝트에 애니메이터를 달아줘야 한다. 그렇게 해야, 전체 뼈대들에 대한 애니메이션을 만들 수가 있다.

 

본인은 "무당집 입구"에 애니메이터를 달았다.

 

"무당집 입구"에 대한 애니메이션을 생성해줬다. 천의 움직임이므로 fabric이라고 이름을 지었다.

 

애니메이션 클립을 생성해서 저장해준다.

 

애니메이션 클립을 녹화하면서, 자연스럽게 뼈대들을 움직여줬다.

 

애니메이션 녹화

 

1초에 60 프레임 샘플을 기준으로, 2초에 걸쳐서 흔들리는 모션을 줘봤다.

/*  뭘 잘못 건드려서 다시 Weight를 주는 노가다를 했다...  */

 

0 프레임일 때

 

60 프레임일 때

 

120 프레임일 때 (0 프레임에 있던 키프레임을 복붙했다.)

 

이렇게 한다면, 바람에 흔들리는 천 만들기 완성이다.

 

바람에 흔들리는 천 애니메이션 효과 완성

 

 

꽤나 고민하고 여러가지 찾아봤던 요구사항이었는데, 그래도 잘 구현할 수 있어서 다행이었다. 아직 공부하는 단계이고, 초보라서 숙련도가 그리 높지 않고 모르는 것도 많다. 차근차근 꾸준히 공부하면서 나아가 봐야겠다.