7.오브젝트에 생명을! 애니메이션
오늘 다룰 것은 아바타 제작의 꽃이라고 할 수 있는 애니메이션이다.
애니메이션, 우리가 다룰 Unity의 애니메이션이란 쉽게 말해서 오브젝트의 각 요소가 어떻게 변화하는지이다. 예를 들어 한 오브젝트를 (0,0,0)에서 (0,0,10)으로 이동시키거나 3초 뒤에 비활성화해서 안 보이게 한다거나. 즉, 오브젝트의 모든 변화는 애니메이션이라고 할 수 있다.
오브젝트의 요소를 변화시키는 일은 C# 스크립트를 통해서도 제어할 수 있다. 다만 이전에도 언급했듯이 VRChat에선 C# 스크립트를 거부하고 있기 때문에 애니메이션을 통해 오브젝트를 제어하는 것이 일반적이다. 애니메이션이 오브젝트를 제어할 수 있는 유일한 수단이기 때문에 만약 자신이 아바타에 기믹을 넣기 위해 알고리즘이 필요하다면 그 또한 애니메이션을 통해 제어할 수 있다.
Unity에서 애니메이션을 사용하기 위해서는 2가지 파일을 사용해야 한다. anim(Animation) 파일과 controller(Animation Controller) 파일이다. 위에서 했던 말을 한 번 더 정리하자면 anim 파일에는 오브젝트가 어떻게 변화하는지에 대한 정보가 저장되어 있고 controller 파일에는 만든 anim 파일이 어떤 알고리즘에 의해서 작동할지에 대한 정보가 있다.
Animation Controller를 생성하는 것으로 controller 파일을 만들 수 있고 Animation을 생성하는 것으로 anim 파일을 생성할 수 있다.
본 강좌에서는 anim파일을 애니메이션 파일이라 부를 것이고 controller 파일을 컨트롤러 파일이라 부를 것이다.
-애니메이션과 애니메이션 컨트롤러(Animation & Animation Controller)
애니메이션 파일과 컨트롤러 파일의 차이를 알아보자.
*3장에서 배운 Animation탭과 Animator탭을 기억하는가? 오늘 강좌에선 그 두 탭이 가장 많이 보일테니 아직 창을 꺼내지 않았다면 반드시 꺼내두도록 하자. 앞으로의 아바타 제작에 있어서도 가장 많이 건드리는 것은 그 2개의 탭일테니 말이다.
위의 사진이 컨트롤러 파일에 있는 정보들이다.
왼쪽에는 레이어(Layer)를 선택하는 창이 있고 오른쪽에는 해당 레이어가 어떻게 구성되는지를 보여주는데 이 안에 있는 블럭 같이 보이는 요소들을 통틀어서 노드(Node)라 부르고 주황색과 회색 블럭에 한해 애니메이션 클립(Animation Clip)이라 부를 것이다. 또한 애니메이션 클립과 클립 사이를 연결하는 화살표가 있는데 이 화살표는 트랜지션(Transition)이라고 부르는 것으로 애니메이션 알고리즘을 형성하고 있는 것이라 보면 된다.(자세한 것은 Animaton 항목에서 다루겠다.)
애니메이션 클립에 들어가는 정보 중 가장 중요한 것은 바로 애니메이션 파일이다. 즉, 컨트롤러 파일 안에는 다수의 애니메이션 파일이 존재해서 애니메이션이 실행되는 알고리즘이 존재하는 것이다.
그렇다면 애니메이션 파일 안에는 어떤 정보가 들어있는 것인가?
위의 영상에서도 볼 수 있듯이 애니메이션 파일이 가진 정보는 오브젝트가 언제, 무슨 요소를 어떻게 변화시키는지에 대한 정보가 담겨있다.
위의 영상에서는
0프레임에서는 x = 0 위치에 있다가
30 프레임까지 x = 5 위치에 도달하고
60프레임(1초)까지 x = 0 위치로 돌아오도록
설계한 애니메이션이 실행되었다.
- Animator탭
Animation탭을 다루려면 먼저 애니메이션 파일을 제어해야하고 그 애니메이션 파일을 제어하는 것이 컨트롤러 파일과 컨트롤러 파일을 수정하는 Animator탭이다.
컨트롤러 파일을 더블 클릭하는 것으로 바로 Animator탭으로 넘어가서 컨트롤러 파일을 수정할 수 있다.
처음 만들어진 컨트롤러 파일은 위와 같이 구성되어있으며 각 역할은 다음과 같다.
Layers : 레이어를 관리하는 창이다. 마치 포토샵의 레이어처럼 각 레이어의 애니메이션끼리 중첩하거나 가산할 수 있게 만들어주고 한 컨트롤러 파일 안에 많은 애니메이션 알고리즘을 만들 수 있도록 해준다.
Parameters : 변수(파라미터)를 관리하는 창이다. 여기서 만들어진 변수들은 애니메이션 알고리즘을 만드는데 사용된다.
변수의 자료형(종류) :
- Int(Integer) : 정수 변수. 불연속적인 값이 필요한 때에 쓰인다.
- Float : 실수 변수. 소수점이 표시되는 값으로 연속적인 값이 필요한 때에 쓰인다.
- Bool : 불 변수. True와 False 만을 값으로 가지는 변수로 2가지 형태의 변수만 필요할 때에 쓰인다.
- Triger : 불 변수...지만 C# 스크립트를 이용해서만 제어하는 변수라는 점이 Bool변수와 다른 점이다. C# 스크립트를 사용할 수 없는 VRChat 아바타에서는 사용하지 못하는 변수이다.
주의 : 정수 변수는 용량이 매우 큰 변수로 만약 자신이 많은 수의 정수 변수를 사용한다면 몇 가지 정수 변수를 불 변수로 대체할 수 없는지 세심히 생각해보자. 정수 변수를 줄이는 것만으로도 아바타 용량을 상당히 줄일 수 있다.
※수의 연속과 불연속※
정말 수학 얘기는 가능하면 하고 싶지 않았지만 원리를 파고든다는 이 강좌의 특성상 이 부분에서는 수학을 사용할 수 밖에 없게 되었으니 일단 진정하고 읽어주길 바란다. 만약 자신이 수학에 자신이 있거나 이미 이 얘기가 무슨 소리인지 알고 있다면 넘어가도 된다.
한국기준 고등학교 교육과정에서 수의 연속과 불연속을 배우는 것은 미적분의 일부를 배우는 수학2를 배울 때 부터일 것이다. 수의 연속에 대한 정의는 다음과 같다.
집합안의 모든 점에서 좌극한, 우극한, 함숫값이 모두 존재하면서 값이 같은 상태
글로는 이해하기 쉽지 않으니 그림을 가져와 보겠다.
붉게 표시된 것이 수직선상에서 표시할 수 있는 해당 집합의 모든 수를 표시한 것이다. 정수 집합과 실수 집합의 차이가 보이는가?
정수 집합은 붉은 점이 뜨문뜨문 있다. 0, 1, 2, 3, 4, 5...이런식으로 말이다. 아직 고등수학을 배우지 않은 이들은 이렇게 질문할 수 있다. 1, 2, 3, 4, 5면 연속된 수가 아닌가? 그럼 실수 집합을 봐보자.
실수 집합은 점이 아니라 아예 선으로 표시되어 있다. 이 선은 단순 선이 아니라 무수한 점이 선처럼 보이는 것이다. 이것이 의미하는 것은. 1, 2, 3, 4, 5 만이 아니라 0.001, 0.002, ..., 0.099, 0.1...이런식으로 가령 0과 1 사이라 하더라도 유리수와 무리수를 포함한 모든 수를 포함하는 것. 그것이 바로 [수가 연속되다]의 정의인 것이다.
다시 애니메이션 변수 얘기로 돌아와서 정수와 실수는 위와 같은 특징을 가지고 있기 때문에 그 용도가 확실하게 구별되어 있다.
정수는 확실하게 정해진 수의 정보가 필요할 때 사용하고
실수는 확실하게 어떤 수의 정보가 필요한 것은 아니지만 기준이 되는 수를 기점으로 그 기점을 초과했는지 또는 미만인지 판정하기 위해 쓰인다.
위의 두 사진은 실제로 Animator탭에서 트랜지션을 이용해 애니메이션의 알고리즘을 구성하는 부분이다.
정수 변수의 경우에는 비교 방법이 Greater(초과), Less(미만), Equals(같다), NotEqual(같지 않다)로 4가지 방법이 존재한다.
그러나 실수 변수의 경우에는 비교 방법이 Greater와 Less만이 존재한다.
그 이유는 실수 변수를 이용하는 경우에 해당 변수가 하나의 값으로 고정되어있을 가능성이 거의 없기 때문에 비교군과 같은 지 또는 같지 않은 지를 판독할 상황 자체가 그다지 없기 때문이다.
Float 변수를 이용하는 VRChat 아바타 변수의 가장 대표적인 예가 VR 컨트롤러의 트리거가 얼마나 눌렸는지를 보여주는 변수이다. 트리거를 원하는 만큼 정확히 누를 수 있는 초인이 아니라면 트리거를 얼마나 눌렀는지는 적당한 값보다 큰지 안 큰지를 비교하는 것만으로도 충분하다. 해당 변수는 추후에 한 번 사용해 볼 것이다.
이 정수와 실수의 연속성의 차이는 실제로 아바타를 제작할 때, 매우 유용하게 쓰인다. 그러니 꼭 기억해 두기를 바란다.
그래프 창 : 레이어를 구성하는 창이다. 이 창을 통해 애니메이션들을 집어넣고 애니메이션이 실행될 알고리즘을 만들어낸다. 마우스 휠을 누르면서 움직이면 화면을 움직일 수 있고 휠을 올리거나 내리면 확대, 축소도 가능하다.
- Any State 노드 : 어떤 상황에서도 트랜지션에 해당하는 조건이 만족되었을 경우 해당 트랜지션과 연결된 애니메이션을 강제로 실행한다.
- Entry 노드 : 컨트롤러 파일이 기동됨과 동시에 실행될 애니메이션과 연결한다. Entry와 연결된 애니메이션 클립과 트랜지션은 주황색으로 표시된다. 또한 주황색 트랜지션은 수정할 수 없다.
- Exit 노드 : 이전 애니메이션 클립과 연결된 트랜지션의 조건이 만족되었을 경우 해당 레이어를 종료한다. 단, Any State 노드에 해당하는 조건이 만족되었을 경우 다시 애니메이션이 실행된다.
-Animation탭
Animator탭을 배웠으니 이번엔 Animation 탭을 배워보자
Animation탭 역시 애니메이션 파일을 더블 클릭하면 바로 열린다...만! Animator와는 결정적으로 다른점, 그것은 바로 수정이 불가능하다는 것이다.
애니메이션 파일을 수정하기 위해서는 2가지 조건이 충족되어 있어야 한다.
- 수정할 애니메이션 파일이 컨트롤러 파일에 적용되어 있어야 한다.
- 해당 컨트롤러 파일이 애니메이션으로 움직일 오브젝트의 Animator 컴포넌트에 적용되어 있어야 한다.
따라서 본 챕터에서는 Animation탭을 설명하기 전에 잠시 컨트롤러 파일을 적용하는 방법을 알려주겠다.
1. 우선 컨트롤러 파일을 생성하고 필요한 만큼의 애니메이션 파일을 준비한다.
2. 애니메이션을 적용할 오브젝트를 생성하고 Inspector 창에서 Animator 컴포넌트를 만들어준다. 그 후, 컨트롤러 파일을 Controller 항목에 드래그 & 드랍하면 컨트롤러 파일을 적용한 것이다.
3. Animator 컴포넌트가 적용되어 있는 오브젝트를 클릭한 상태로 Animator창에 들어가면 해당 오브젝트에 적용되어 있는 컨트롤러 파일을 수정할 수 있다. Animator탭에 들어왔다면 그래프 창에 쓰고 싶은 애니메이션 파일을 집어넣자. 처음 집어넣는 애니메이션 파일이라면 바로 Entry 노드와 연결되며 주황색 클립으로 생성된다. 이것으로 애니메이션 파일을 수정할 준비가 되었다.
4. 이제 컨트롤러가 적용된 오브젝트를 클릭하고 Animation탭으로 가보면 해당 오브젝트에 적용된 컨트롤러 파일 안에 있는 애니메이션 파일을 수정할 수 있게 된다!
이제야 애니메이션 파일을 수정할 수 있게 되었으니 Animation탭에 대해서 설명하겠다.
프로퍼티 목록 : 애니메이션에 적용된 프로퍼티를 보여준다.
*프로퍼티(Property) : 프로퍼티란 간단히 얘기해서 애니메이션을 적용할 오브젝트의 컴포넌트 항목이라 보면 된다.
타임라인 : 애니메이션이 언제 어느 타이밍에 작동될지를 보여주는 그래프. 숫자가 써있는 부분을 클릭하면 커서를 움직일 수 있다. 타임라인 영역 안에서 휠을 올리거나 내리는 것으로 확대, 축소가 가능하다.
키 프레임 : 타임라인에 존재하는 다이아몬드 모양 표시. 해당 줄의 프로퍼티가 어느 시간에는 어느 값에 도달해야하는 지에 대한 정보를 가지고 있다. 가장 위에 있는 키 프레임은 프로퍼티 전체를 선택할 수 있는 키 프레임이다.
타임라인 설정 : Seconds는 초, Frames는 프레임수로 타임라인을 나타낸다. Set Sample Rate에 마우스를 가져다 대면 1초를 몇 프레임으로 할 지 설정할 수 있다. 기본값은 60.
*주의 : Set Sample Rate 설정을 변경해 보면 알겠지만 타임라인에 적혀 있는 숫자는 단순 초가 아니다! 무슨 말이냐 하면 0:01이 1초를 의미하는 것이 아니라는 것이다. 타임라인을 잘 보면 0:60이 1:00로 표기 되어 있고 Set Sample Rate 설정을 바꾸면 0:30이 1:00이 되거나 한다. 즉, 타임라인의 숫자는 초가 아닌 프레임 수다. 단, 설정이 Seconds로 되어 있다면 :을 기준으로 왼쪽 숫자는 초가 맞다. 예를 들어 1:00은 1초가 맞다. 그럼 0:01은 뭘까? 기본적으로는 1프레임이며 굳이 초로 얘기하자면 1/[Set Sample Rate에서 설정한 값]초이다. 설정에 따라 1/60초가 될 수도 있고 1/30초가 될 수도 있는 것이다. 알다시피 프레임수는 높을 수록 부드러운 애니메이션이 만들어지니 자신이 만들 애니메이션을 잘 생각해서 설정하는 것이 좋다.
애니메이션 도구(왼쪽부터 차례로 설명) :
- Preview : 만든 애니메이션을 미리보기 하는 기능이다. 녹화, 재생, 애니메이션 수정 때에는 자동으로 켜진다.
- 녹화 : 해당 기능이 활성화 되어있을 때는 커서가 위치해 있는 곳에서 키 프레임이 생성되거나 수정된다.
- 가장 앞으로 : 0:00 프레임 위치로 커서를 옮긴다.
- 앞 키 프레임으로 : 현재 커서가 위치한 곳에서 바로 앞에 있는 키 프레임으로 커서의 위치를 옮긴다.
- 재생 : 애니메이션을 커서가 위치한 곳에서부터 재생한다.
- 뒤 키 프레임으로 : 현재 커서가 위치한 곳에서 바로 뒤에 있는 키 프레임으로 커서의 위치를 옮긴다.
- 가장 뒤로 : 커서를 가장 마지막 키 프레임이 위치한 곳으로 옮긴다.
- 숫자 입력란 : 입력한 프레임 위치로 커서를 이동시킨다.
- 애니메이션 선택란 : 수정할 애니메이션을 선택한다.
- 필터 : 해당 애니메이션이 두 개 이상의 오브젝트를 움직일 경우 Hierarchy탭에서 선택한 오브젝트의 프로퍼티만을 보여주도록 필터링한다.
- 키 프레임 추가 : 커서의 위치에 선택한 프로퍼티의 키 프레임을 추가한다. 아무 프로퍼티를 추가하지 않았다면 모든 프로퍼티의 키 프레임을 추가한다.
- 애니메이션 이벤트 추가 : 해당 기능을 사용하기 위해서는 C# 스크립트를 사용해야하기 때문에 VRChat 아바타에서는 사용할 수 없는 기능이다.
-오브젝트 활성화 / 비활성화 애니메이션 만들기
이제 기능들을 배웠으니 한 번 간단한 애니메이션을 만들어 볼 것이다.
이번 챕터에서 만들 애니메이션은 [오브젝트를 활성화 / 비활성화] 하는 애니메이션으로 VRChat 아바타 애니메이션에서 가장 많이 쓰이는 기능이라고 할 수 있다. 자신이 대단한 기능이 있는 아바타를 만들고 싶은 것이 아니라고 한다면 기본적으로는 이 기능만으로도 충분히 아바타를 만들 수 있다.
우선 애니메이션을 제작하기 전에 필요한 리소스를 생각해보자.
- 애니메이션을 제어할 컨트롤러 파일
- 비활성화하는 애니메이션 파일
- 활성화하는 애니메이션 파일
- Animator 컴포넌트가 적용될 부모 오브젝트
- 애니메이션이 적용될 자식 오브젝트
여기서 4번과 5번에 대해 의문을 가지는 사람이 있을 것이다. 저렇게 오브젝트를 2개나 쓰는 이유는 의외로 단순하다. 우리가 만들 애니메이션은 활성화 / 비활성화 애니메이션이다. 즉, Animator 컴포넌트를 가지고 있는 오브젝트가 비활성화 되면 Animator 컴포넌트까지 비활성화 된다. 실제로 애니메이션을 만들 때에 해보면 알겠지만 현재 수정하는 컨트롤러 파일이 적용되어 있는 Animator 컴포넌트를 가지고 있는 오브젝트는 이를 막기 위해 활성화, 비활성화 프로퍼티를 만드는 것이 불가능하다!
이는 아바타 제작때에도 동일하게 적용되므로 주의바란다.
위에서 언급한 것들을 모두 만들어 주었다. 이름은 자신이 알아볼 수 있도록 정하는 것이 매우 중요하다. 지금이야 파일이 2, 3개에서 끝나지만 아바타 제작시에는 말 그대로 수많은 애니메이션, 오브젝트와 씨름해야할 것이기 때문이다.
자 이제 애니메이션 알고리즘을 정하기 위해 Animator탭으로 가보자.
위에서 언급했듯이 가장 먼저 집어넣는 애니메이션이 처음 실행되는 애니메이션이 되므로 애니메이션 파일을 집어넣는 순서에 유의해야 한다.
이번에 만들 애니메이션은 기본적으로는 Child_Object가 꺼져있는 상태를 베이스로 할 것이기에 Off 애니메이션을 먼저 넣었다.
Animator탭의 Parameters탭에서 +버튼을 누르면 변수를 추가할 수 있다. 오늘 만들 애니메이션 알고리즘은 복잡한 알고리즘이 아니므로 Bool 변수면 충분하다. 파라미터의 이름도 실제로 아바타 제작을 할 때는 잘 정하도록 하자. 넣을 기능이 많아질수록 많아지는 것이 변수, 즉, 파라미터이다.
원하는 노드를 클릭하고 우클릭(그냥 커서를 노드에 가져다 대고 우클릭해도 된다)하면 [Make Transition] 항목이 나오고 클릭하는 순간 해당 노드에서 흰색 선이 나올 것이다. 이것을 원하는 곳에 집어 넣는다. 일단 필자는 위와 같이 구성했다.
*주의 : 트랜지션 구성, 즉, 알고리즘에 정답은 없다. 같은 기능을 하더라도 다른 구성방법도 많다는 뜻이다. 가령 예를 들어 이번 강좌에서는 위의 방법 뿐 아니라
이렇게 구성해도 똑같은 기능을 만들 수 있다. 그러니 알고리즘에 대해서는 스스로 잘 연구해 봐야 할 것이다.
트랜지션을 클릭하면 Inspector탭에 위와 같은 화면이 나온다. 일단 다른 곳은 다 제쳐두고 Conditions 부분만 보도록 하자. 이 부분에서 변수를 설정해 해당 조건에서 발동하도록 설정할 수 있다.
필자는 Off 애니메이션을 실행하기 위해서는 New Bool 변수가 False, On 애니메이션을 실행하기 위해서는 True 값일 때 발동되도록 설정했다.
이제 애니메이션을 만들어보자!
애니메이션을 만들기에 앞서 오브젝트 활성화 / 비활성화가 무엇인지 알아보자.
아주 간단하다. 오브젝트를 선택했을 때 나오는 Inspector탭의 가장 상단에서 저 체크박스를 체크하면 활성화이고 체크를 풀면 비활성화 상태가 된다. 비활성화 상태의 오브젝트는 Scene창에서 안보이게 된다.
위의 영상과 같이 Animation탭의 녹화 버튼을 사용하면 아주 손쉽게 애니메이션을 만드는 것이 가능하다.
자 이제 한 번 애니메이션을 실행해보도록 하자.
원하는 기능이 제대로 만들어 진 것을 확인할 수 있다.
놀랍지 않은가? 애니메이션 만들기가 이렇게 쉽다니! 이것만 알아도 당신은 VRChat에서 필요한 대부분의 애니메이션을 만들 수 있다.
자, 이렇게 해서 오늘은 애니메이션 제작에 대해서 알아봤다. 좀 길긴 했지만 많은 것을 알 수 있는 강좌가 되었으면 한다.
이렇게 7장까지 해서 아바타를 만들기 위한 기본 설명을 마친다. 다음 강좌부턴 본격적으로 VRChat을 이용해서 강좌를 진행할 것이다!
TRY!
애니메이션이 할 수 있는 일은 정말이지 무궁무진하다. 오브젝트를 옮겨보기도 하고 스케일도 바꿔보고 0프레임에서만 움직이는게 아니라 시간이 걸리는 애니메이션도 한 번 만들어 보자!
'VRChat > VRChat 아바타 강좌' 카테고리의 다른 글
| 9. 애니메이션 고급편 (5) | 2024.03.06 |
|---|---|
| 8. VRChat 아바타 업로드의 기초 (1) | 2023.12.22 |
| 6. 질감의 조정자, 메트리얼 (1) | 2023.12.21 |
| 5. 3D모델 기초 (1) | 2023.12.20 |
| 4. 많이 사용하는 파일 (1) | 2023.12.20 |