VRChat 아바타 Expression ON/OFF 토글 기능 만들기
VCC를 사용해 간단한 토글 기능 만들어보기를 하겠다.
아바타 모델을 unity asset store에서 무료로 제공되는 Lowpoly Medieval Plague Doctor로 하겠다.
이 에셋에서 제공되는 prefab들을 이용해 아바타 주변에 사물들이 나타나는 토글을 만들것이다.
현재 캐릭터만 scene에 들어가있는 모습이고,
1. 꽃 prefab를 토글로 넣을 것이다.
2. environments에 있는 꽃, 버섯, 풀, 바위, 나무를 토글하는 기능을 만들 것이다.(이것으로 옷장 기능 구현 가능)
1. 꽃 토글 기능 만들기
작업 순서:
1.1. Expression 메뉴 에셋과 파라미터 에셋을 만들고 Avatar Descriptor에 연결하기
1.2. FX컨트롤러 만들어 Avatar Descriptor에 연결하기
1.3. 토글할 오브젝트를 캐릭터 하위에 넣고 확인하기
1.4. parameter에셋에 parameter 추가하기
1.5. menu에셋에 control추가 & 설정
1.6. 애니메이션 찍기
1.7. FX animator controller에 Layers추가후 설정 & Parameters추가후 설정
1.8. 업로드 후 vrchat에서 확인
1.1. Expression 메뉴 에셋과 파라미터 에셋을 만들고 Avatar Descriptor에 연결하기
내 이전 글 https://owwowo.tistory.com/226에서 4.6 Expressions부분을 따라하면 된다.
1.2. FX컨트롤러 만들어 Avatar Descriptor에 연결하기
FX 컨트롤러를 만들 폴더에 들어가서 마우스 우클릭 > Create > animator controller를 하면 된다.
컨트롤러 이름은 FX나 캐릭터이름_FX로 적절히 바꾸자.
그 후에 컨트롤러를 VRC Avatar Descriptor의 Playable Layers의 FX칸에 드래그하여 넣는다.
1.3. 토글할 오브젝트를 캐릭터 하위에 넣고 확인하기
토글할 prefab을 부모 노드에 드래그한다.
이렇게 파란 줄이 생기게 놓는 것이 아니다. 이렇게 되면 오브젝트가 Global좌표로 지정돼서 캐릭터옆에 오브젝트가 생기지 않는다.
이렇게 부모 노드 배경 색이 약간 흰색으로 바뀔 때 놓는것이다. 이렇게 해야 부모 노드의 자식으로서 Local좌표로 지정돼서 캐릭터 옆에 오브젝트가 놓인다.
캐릭터를 움직여서 캐릭터와 같이 잘 움직이는지 확인해보자.
캐릭터를 한칸 움직여도 꽃과 같이 움직이는 상황. 이렇게 되어야 한다.
캐릭터를 한칸 움직였지만 꽃은 가만히 있는 상황. 이렇게 되면 안된다.
1.4. parameter에셋에 parameter 추가하기
1번에서 만든 parameter 에셋을 클릭하여 inspector창을 본다.
Add버튼을 눌러 Name은 Flower, Type는 Bool로 설정한다.
1.5. menu에셋에 control추가 & 설정
1번에서 만든 menu에셋을 클릭하여 inspector창을 본다.
Add Control버튼을 눌러 Name은 Flower, Type는 Toggle을 선택 후 Parameter도 Flower를 선택한다.
이 토글 버튼은 vrchat에서 Flower값을 true, false로 토글하는 역할이다. vrchat내에서 debug창을 보면 확인 가능하다.
1.6. 애니메이션 찍기
이 애니메이션이 어떤 역할을 하냐면, 오브젝트를 키고 끄는 내용을 기록한다.
이 애니메이션을 FX 컨트롤러에 사용할 것이다.
그 전에, 나는 기본적으로 꽃을 안보이게 하고 토글하면 꽃을 보이게 할것이므로 꽃은 꺼놓자.
오브젝트를 클릭하고 inspector에서 체크를 해제하면 된다.
애니메이션 창이 없다면 Window > Animation > Animation을 열어 창을 추가하자.
애니메이션 창을 띄우고 Hierarchy에서 캐릭터를 클릭하면 Animation창에 Create버튼이 생긴다. 클릭하여 적절한 이름으로 적절한 폴더에 넣자. 나는 Anim이라는 폴더를 만들어서 flowerOn라고 이름을 붙였다.
그러면 빨간 버튼이 활성화되는데, 누른다.
꽃을 Hierarchy에서 클릭 후 inspector에서 체크 후에 record 종료하면 된다.
그리고 record버튼 옆에 preview를 누르면 캐릭터가 원래대로 돌아온다.
이 애니메이션은 PT_Poppy_02(꽃)이라는 Game Object의 상태를 1로 만들어주는 것이다.
1이면 보이게, 0이면 안보이게 만들어주는 것이다.
애니메이션 옆에 생긴 컨트롤러는 삭제한다. 우리는 애니메이션을 FX컨트롤러에서 사용할 것이다.
1.7. FX animator controller에 Layers추가후 설정 & Parameters추가후 설정
2번에서 만든 FX 컨트롤러를 클릭, inspector에서 Open한다.
Parameters에 들어가서 +버튼을 눌러 Bool로 추가한다. 이름은 Flower. 이 변수 이름과 타입은 4번에서 만든 parameter에셋에서 만든 변수 이름과 타입이 똑같아야 한다.
Layers에서 새로운 레이어를 추가한다. 이름은 flower로 하겠다. 레이어 이름은 자신이 알아보기 편하게 하면 된다.
그리고 톱니바퀴를 눌러 Weight를 1로 만든다. 1로 만들지 않으면 작동하지 않는다고 한다.
오른쪽 화면에 우클릭 > Create State > Empty를 만들어 DefaultOff로 명명하고
아까 찍은 flowerOn애니메이션을 드래그해 화면에 올린다.
그 후 Default Off에서 우클릭 > make transition을 눌러 flowerOn을 누른다.
flowerOn 우클릭 > make transition을 눌러 Exit으로 연결한다.
1번 화살표를 눌러 Transition Duration을 0으로 하고 Conditions에 Flower true 조건을 단다.
Condition은 Flower값이 true가 됐을 때, 해당 화살표가 일어난다는 뜻이다. 기본적으로 vrchat에서 bool변수를 만들면 false상태이고 체크박스를 체크해야 true상태이다.
2번 화살표를 눌러 Transition Duration을 0으로 하고 Conditions에 Flower false 조건을 단다.
1.8. 업로드 후 vrchat에서 확인
업로드 후 vrchat을 들어가서 확인해보자.
꽃 토글 기능을 만들었다!
2. 꽃, 버섯, 풀, 바위, 나무를 토글하는 기능 만들기 (이 목록을 옷들로 바꾸면 옷장 기능이다)
작업 순서:
2.1. Expression 메뉴 에셋과 파라미터 에셋을 만들고 Avatar Descriptor에 연결하기
2.2. FX컨트롤러 만들어 Avatar Descriptor에 연결하기
2.3. 토글할 오브젝트를 캐릭터 하위에 넣고 확인하기
2.4. parameter에셋에 parameter 추가하기
2.5. menu에셋에 control추가 & 설정
2.6. 애니메이션 찍기
2.7. FX animator controller에 Layers추가후 설정 & Parameters추가후 설정
2.8. 업로드 후 vrchat에서 확인
2.1, 2.2는 1.1, 1.2와 똑같다.
2.3. 토글할 오브젝트를 캐릭터 하위에 넣고 확인하기
캐릭터 최상위 노드에서 우클릭 > Create Empty로 자식 노드를 하나 만든 후, 이름을 Environments로 해준다.
그리고 Project Assets의 Environments폴더에서 꽃, 버섯, 식물, 돌, 나무를 Environments의 자식으로 넣는다.
(아까 1번에서 넣었던 꽃이 있다면 삭제해준다)
2.4. parameter에셋에 parameter 추가하기
이번에는 한번에 하나의 기물만 보이게 할것이다.
꽃 토글 후 버섯을 토글하면, 꽃이 보이던게 안보이게 한 후 버섯만 보이게 한다는 뜻이다.
그러려면 environments의 type을 int로 해야한다.
아무것도 없는 상태를 0, 꽃이 1, 버섯이 2, 식물이 3, 돌이 4, 나무가 5라고 정의한다.
(아까 1번에서 만들었던 Flower변수가 있다면 삭제해준다)
2.5. menu에셋에 control추가 & 설정
5개의 Control를 추가해서 각각 Flower, MushRoom, Grass, Rock, Tree이름을 넣고 Type는 전부 Toggle로 한다. Parameter는 전부 environments선택 후 Value를 Flower부터 Tree까지 순서대로 1~5를 넣는다.
2.6. 애니메이션 찍기
1.6처럼 따라해 animation을 만들어 녹화한다.
(1번에서 만든 flowerOn이 있다면 삭제한다)
이 때, 꽃은 키고 나머지 4개는 끄는 작업을 해야한다.
만약 다른 4개중 하나가 켜져있는 상태에서 꽃 토글을 한다면, 켜져있는 것을 끄고 꽃을 켜야하기 때문에 그렇다.
꽃 오브젝트Active만 1이고 나머지 4개가 0이면 맞게 한것이다.
그 후에 해당 애니메이션을 4번 복붙하고 적절한 이름으로 바꾼다.
그리고 애니메이션마다 키고 끌것의 값을 바꿔준다.
2.7. FX animator controller에 Layers추가후 설정 & Parameters추가후 설정
FX 컨트롤러를 열어 parameter에 environments변수를 Int형으로 추가한다.
Layers에 environments를 추가하고 Weight를 1로 한다.
그리고 Layer에 allEnvOff라는 Empty한 state를 추가 후, 5가지 애니메이션들을 추가해준다.
Any State에서 우클릭 > Make Transition으로 5가지 애니메이션 상태들을 연결해주고,
5가지 애니메이션 상태에서 Exit로 연결해준다.
이 때, 화살표를 클릭해서 Durations를 모두 0으로 한다.
그리고 Conditions에 environments, Equals, 숫자를 추가한다. 숫자는 그림에 적어놓았다.
Any State에서 애니메이션 스테이트로 갈 때 1~5, 애니메이션 스테이트에서 Exit로 갈 때는 모두 0이다.
2.8. 업로드 후 vrchat에서 확인
Hierarchy의 Environments에서 5가지 오브젝트들을 모두 안보이게 끈 다음 업로드 하면 된다.
잘 작동한다.