DateWithJRR
르르와 연애중, 르르와 연애중 2, 챠니와 두근두근, 세구와 연애중 컨텐츠에 사용된 트리거 샘플입니다.
간단한 '링크 재생 UI', '선택지 버튼이 있는 자리' 기능이 구현돼있습니다.
비디오 플레이어로 USharpVideo를 사용했습니다. 때문에 해당 에셋을 먼저 프로젝트에 임포트해야합니다.
Unity Menu 에서 Window -> Package Manager 를 눌러 Package Manager 창을 엽니다.
프로젝트에 설치된 Package 중 WRChat - Woodon 을 찾습니다.
Sample 탭을 누르고, 르르와 연애중 샘플을 찾습니다.
Import를 눌러 샘플을 프로젝트에 임포트합니다.
설치된 파일 중 DateWithJRR 프리팹을 찾아 씬에 배치합니다.
오브젝트는 Hierarchy 우측 상단의 검색 기능을 이용하면 쉽게 찾을 수 있습니다.
위 UI들에 들어갈 이미지를 설정할 수 있습니다.
씬에 배치된 DateWithJRR 프리팹에서 오브젝트 하나를 찾습니다.
DateWithJRR/Trigger/DateWithJRR_Manager/QuizDatas.
QuizDatas의 자식 오브젝트로 존재하는 QuizData [1], QuizData [2], QuizData [3] 은 각각 문제 1번, 문제 2번, 문제 3번 데이터를 의미합니다.
추가로 사용할 문제 수 만큼 QuizData 오브젝트를 복제합니다.
기존 QuizData를 수정해도 됩니다.
QuizData는 QuizDatas 오브젝트의 자식 오브젝트로 존재해야 합니다.
QuizDatas의 자식 오브젝트 차례대로 1번 문제, 2번 문제, ... 가 됩니다.
문제 수는 제한이 없습니다.
Tip
복제한 QuizData 오브젝트들의 이름을 QuizData [1], QuizData [2], ... 같은 네이밍 규칙으로 적용하고 싶다면. 원하는 만큼 오브젝트를 복제한 이후, QuizDatas 컴포넌트 중 Game Object Name Changer를 우클릭, 나타나는 메뉴 중 맨 아래 ChangeChildsName을 눌러보세요.
QuizData 에는 여러 가지 옵션이 있습니다.
그 중 Sprite와 Sprites, 두 가지 옵션만 보면 됩니다.
Sprite는 스크린에 띄워질 문제지 UI를 설정하는 옵션입니다.
Sprites는 Overlay Canvas로 띄워질 세부 지문 UI를 설정하는 옵션입니다.
Sprites는 샘플 기준 1개 ~ 5개까지 설정할 수 있습니다.
(5개 초과 혹은 0개만 설정하더라도 문제는 없습니다. 5개를 초과하는 경우 실제로 반영되지는 않습니다.)
씬에 배치된 DateWithJRR 프리팹에서 오브젝트 하나를 찾습니다.
DateWithJRR/Mesh/WVideoPlayer/WVideoPlayerController/VideoDatas.
VideoDatas의 자식 오브젝트로 존재하는 VideoData [1], VideoData [1-1], VideoData [1-2], ... VideoData [2], ... 는 각각 '문제 1번 질문 영상', '문제 1번의 1번째 선택지 영상', '문제 1번의 2번째 선택지 영상', '문제 2번 질문 영상' 데이터를 의미합니다.
추가로 사용할 문제와 해당 문제의 선택지 수 만큼 VideoData 오브젝트를 복제합니다.
기존 VideoData를 수정해도 됩니다.
VideoData는 VideoDatas 오브젝트의 자식 오브젝트로 존재해야 합니다.
VideoData의 자식 오브젝트 순서는 UI에 영상 재생 버튼들이 배치되는 순서에 영향을 미칩니다.
영상 데이터 수 자체에 제한은 없지만, 영상 재생 UI에 표현될 수 있는 영상 재생 버튼의 수에는 제한이 있습니다. (96개)
96개보다 더 많은 수의 영상을 넣고 싶다면 여기를 참고하세요.
VideoData 에는 여러 가지 옵션이 있습니다.
그 중 Name와 VRC Url, 두 가지 옵션만 보면 됩니다.
Name는 영상 재생 버튼 UI에 적혀질 텍스트를 설정하는 옵션입니다.
예를 들어, 1번 질문 영상이라면 1, 3번 질문 2번째 선택지 영상이라면 3-2 이렇게 적을 수 있습니다.
VRC Url는 재생할 영상의 링크를 설정하는 옵션입니다.
Tip
만약 개인 서버에 영상을 올리실 계획이시라면, VideoDatas 오브젝트의 DateWithJRR_EditorTime 스크립트를 확인해보세요. 해당 스크립트는 VideoData 오브젝트의 오브젝트 이름을 가져와 분석하고, 이를 바탕으로 VideoData의 Name 옵션과 VRC Url 옵션을 설정하는 기능을 가지고 있습니다.
일일이 Name 옵션을 설정하고, 영상 링크를 VRC URL에 옮겨적어야 하는 수고를 조금이나마 덜어줍니다.
관심이 있으시다면..
VideoData들의 네이밍 규칙을 앞서 소개한 것과 조금 달리,
VideoData [01-00] (질문), VideoData [03-02] 같은 네이밍으로 설정하세요.
개인 서버에 올릴 영상 파일들을 다음과 같은 규칙으로 업로드 해보세요.
{서버 주소}/{문제 번호}/{문제 번호}_{선택지 번호}{확장자}
이후 VideoDatas 오브젝트의 DateWithJRR_EditorTime 스크립트에서 옵션을 설정합니다.
Uri Prefix에 서버 주소를, Extension에 영상 확장자를 적어주세요.
DateWithJRR_EditorTime 스크립트를 우클릭하고 나오는 메뉴에서, 맨 아래 Update Data 버튼을 클릭하세요.
씬에 배치된 DateWithJRR 프리팹에서 오브젝트 하나를 찾습니다.
DateWithJRR/Trigger/DateWithJRR_Manager/QuizSeats.
QuizSeats 자식 오브젝트로 존재하는 DWJ_Seat [1], DWJ_Seat [2], DWJ_Seat [3], ... 은 각각 자리 1번, 자리 2번, 자리 3번을 의미합니다.
기본적으로 6개 존재합니다.
추가로 사용할 자리 수 만큼 DWJ_Seat 오브젝트를 복제합니다.
DWJ_Seat는 QuizSeats 오브젝트의 자식 오브젝트로 존재해야 합니다.
자리 수는 제한이 없습니다.
Tip
복제한 DWJ_Seat 오브젝트들의 이름을 DWJ_Seat [1], DWJ_Seat [2], ... 같은 네이밍 규칙으로 적용하고 싶다면. 원하는 만큼 오브젝트를 복제한 이후, QuizSeats 컴포넌트 중 Game Object Name Changer를 우클릭, 나타나는 메뉴 중 맨 아래 ChangeChildsName을 눌러보세요.
DWJ_Seat를 월드 내 원하는 곳으로 옮기세요.
DWJ_Seat 에는 여러 자식 오브젝트가 있습니다.
그 중 Buttons와 [WSCanvas] SeatScreen, [WSCanvas] ExpectedAnswer 세 가지 오브젝트만 보면 됩니다.
Tip
DWJ_Seat 오브젝트는 프리팹입니다. 만약 모든 DWJ_Seat에 대해 수정 사항을 적용하고 싶다면, DWJ_Seat 프리팹을 열어 수정해주세요. 배치된 모든 DWJ_Seat에 반영됩니다.
Buttons는 자리마다 배치되는 버튼 오브젝트입니다.
Buttons의 자식 오브젝트로 존재하는 [Button] SelectAnswer 가 버튼입니다.
기본적으로 Mesh Renderer가 비활성화 돼 있으며, 이 상태로 오브젝트 자체가 토글 됩니다.
Buttons와 [Button] SelectAnswer를 월드 내 원하는 곳으로 옮기세요.
Warning
[Button] SelectAnswer [1]는 누르면 1번 선택지가, [Button] SelectAnswer [2]는 누르면 2번 선택지가 선택되도록 설정되어 있습니다. 각 버튼 오브젝트에서 Send Evnet On Interact 컴포넌트의 Callbacks 옵션의 첫 번째 요소를 확인해보세요. 'SelectAnswer + 선택지 숫자'로 적혀있어야 의도대로 동작합니다.
[WSCanvas] SeatScreen과 [WSCanvas] ExpectedAnswer는 각각 자리에서 보이는 자리 스크린, 진행자 입장에서 보는 자리 스크린입니다.
만약 스크린에 보이는 텍스트의 색을 바꾸고 싶다면,
각 스크린의 [Text] ExpectedAnswerText 오브젝트에서 TextMeshPro - Text (UI) 컴포넌트의 Vertex Color 옵션을 수정하세요.
[WSCanvas] SeatScreen과 [WSCanvas] ExpectedAnswer를 월드 내 원하는 곳으로 옮기세요.
씬에 배치된 DateWithJRR 프리팹에서 오브젝트 하나를 찾습니다.
DateWithJRR/[WCameraManager]/VirtualCameras.
VirtualCameras 자식 오브젝트로 존재하는 [WCameraData] [1], [WCameraData] [2], [WCameraData] [3], ... 은 각각 1번 카메라, 2번 카메라, 3번 카메라를 의미합니다.
기본적으로 '1: 모든 패널을 비춤', '2: 진행자 기준 왼쪽 3명', '3: 진행자 기준 오른쪽 3명' 카메라가 설정되어 있습니다.
추가로 사용할 카메라 수 만큼 [WCameraData] 오브젝트를 복제합니다.
기존 [WCameraData]를 수정해도 됩니다.
[WCameraData] 오브젝트를 복제하는 경우, 단축키 설정을 바꿔줘야 합니다.
복제한 [WCameraData] 오브젝트의 WCameraData 컴포넌트의 Key Code 옵션에서 원하는 키를 설정합니다.
[WCameraData]는 VirtualCameras 오브젝트의 자식 오브젝트로 존재해야 합니다.
카메라 수는 제한이 없습니다.
Tip
복제한 [WCameraData] 오브젝트들의 이름을 [WCameraData] [1], [WCameraData] [2], ... 같은 네이밍 규칙으로 적용하고 싶다면.
원하는 만큼 오브젝트를 복제한 이후, VirtualCameras 컴포넌트 중 Game Object Name Changer를 우클릭, 나타나는 메뉴 중 맨 아래 ChangeChildsName을 눌러보세요.
각 [WCameraData]를 월드 내 원하는 곳으로 옮기세요.
Tip
현재 Scene View의 시점을 [WCameraData] 카메라로 비추고 싶다면 참고하세요. 특정 오브젝트를 Hierachy에서 선택한 후, Scene View에서 원하는 시점을 바라보고 Ctrl + Shift + F를 누르면 해당 오브젝트가 Scene View 시점으로 회전합니다. 물론 [WCameraData]의 CinemachineVirtualCamera 컴포넌트의 Lens.Vertical FOV 값에 따라서 조금씩 차이가 있을 수 있습니다. 또한 Unity Editor에서 보이는 카메라 화면은 VRChat 인 게임에서 달라보이기도 합니다. 프로젝트가 어느정도 준비 됐다면, 빌드 테스트를 통해 카메라가 어떤지 확인해보세요.
씬에 배치된 DateWithJRR 프리팹에서 오브젝트를 찾습니다.
DateWithJRR/[TP] Spawn to Main.
(주연시 맵 기준, 스폰에서 메인 룸으로 향하는 텔레포트)
DateWithJRR/[TP] Main to Staff.
(주연시 맵 기준, 메인 룸에서 스태프 룸으로 향하는 텔레포트)
버튼 / 콜라이더와 텔레포트 위치를 월드 내 원하는 곳으로 옮기세요.
버튼 / 콜라이더 : TP 오브젝트/[Pivot]/[TeleportTo] Mesh
텔레포트 위치 : TP 오브젝트/[Pos] TP Pos
풀 스크린 토글 단축키
DateWithJRR/Trigger/DateWithJRR_Manager/Fullscreen/[Key] Fullscreen Toggle
[Key] Fullscreen Toggle 오브젝트에서 Send Event On Key Input 컴포넌트의 Key Code를 원하는 키로 설정하세요.
카메라에 관한 단축키 설정은 여기를 참고하세요.
씬에 배치된 DateWithJRR 프리팹에서 오브젝트를 찾습니다.
DateWithJRR/Trigger/DateWithJRR_Manager/Hider/[SpriteList] Hider.
각 스크린에 표시될 대기 화면 UI를 설정할 수 있습니다.
[SpriteList] Hider 오브젝트에서 Sprite List 컴포넌트의 Sprites 옵션의 첫 번째 항목을 원하는 대기화면 UI로 설정하세요.
DateWithJRR/Trigger/DateWithJRR_Manager/Credit/[SpriteList] Credit.
각 스크린에 표시될 크레딧 UI를 설정할 수 있습니다.
[SpriteList] Credit 오브젝트에서 Sprite List 컴포넌트의 Sprites 옵션의 첫 번째 항목을 원하는 대기화면 UI로 설정하세요.
기능 조작 / 오퍼레이터를 기준으로 설명합니다.
[TP] Main to Staff 텔레포트 버튼 등을 이용해 스태프 룸으로 진입합니다.
왼쪽부터 설명합니다.
선택한 플레이어는 세부 지문 UI가 보이지 않게 됩니다.
그 외 기능은 없습니다.
주연시 1 컨텐츠 진행 당시, 주르르님 화면에서는 OBS를 통해 투표 기능 UI을 따로 띄웠었습니다.
투표 UI와 세부 지문 UI가 겹쳐보이지 않도록 하기 위해 필요했던 기능입니다.
미리 설정해둔 영상 링크들을 버튼을 눌러 재생할 수 있는 기능입니다.
UI 상단에 위치한 USharpVideo와 연결되어 있습니다.
각 자리에 선택지 선택 버튼을 활성화 할지 여부를 결정하는 기능입니다.
대기 UI 버튼: 각 자리의 선택지 선택 버튼을 비활성화하고, 선택한 선택지도 초기화합니다.
선택 UI 버튼: 각 자리의 선택지 선택 버튼을 활성화합니다.
위쪽 노란 텍스트: 현재 선택된 문제 번호를 표시합니다. 컨텐츠 진행 도중 메모로 사용하기 좋습니다.
< << > >> 버튼: 문제 번호를 설정합니다.
아래쪽 노란 텍스트: 현재 선택된 선택지 번호를 표시합니다. 0은 표시하고 있지 않음을 의미합니다.
1 ~ 5 버튼: 각 선택지 번호를 선택하는 버튼입니다. 선택 시 해당 선택지의 세부 지문이 UI로 표시됩니다.
X 버튼: 세부 지문 UI를 끄는 버튼입니다.
-
풀스크린 ON: 모든 플레이어가 강제로 풀 스크린을 키도록 합니다. -
풀스크린 OFF: 모든 플레이어가 강제로 풀 스크린을 끄도록 합니다.
참고: 위 두 기능은 Udon Network Event를 이용합니다.
즉, 월드를 나갔다 들어오면 상태가 저장되지 않습니다.
-
스크린 UI 토글: 스크린의 UI를 토글합니다. 스크린 UI가 비활성화 됐다면, 영상 화면이 나옵니다. -
스크린 대기 화면 토글: 스크린의 대기화면 UI를 토글합니다. 대기화면 UI가 비활성화 됐다면, 문제지 UI가 나옵니다.-
스크린 대기 화면 토글은스크린 UI 토글에 종속적입니다.스크린 대기 화면 토글이 켜져있더라도스크린 UI 토글가 꺼져있으면 보이지 않습니다.
-
-
크레딧 토글: 스크린의 크레딧 UI를 토글합니다. 스크린 UI에서 가장 위에 표시됩니다.-
크레딧 토글은스크린 UI 토글에 종속적입니다.크레딧 토글이 켜져있더라도스크린 UI 토글가 꺼져있으면 보이지 않습니다.
-
참고: 위 기능들은 WBool ([UdonSynced] bool)을 이용합니다.
즉, 월드를 나갔다 들어와도 상태가 저장됩니다.
-
F1 키로 토글텍스트: 풀스크린을 로컬로 토글 가능하다는 것을 알려줍니다.- 텍스트 그대로, 키보드
F1키로 사용 가능합니다. - 단축키 변경은 여기를 참고하세요.
- 텍스트 그대로, 키보드
이 글에서 언급된 모든 UI 관련 옵션은 Sprite 타입 입니다.
UI/이미지/텍스쳐 옵션 중 Texture Type을 Sprite (2D and UI)로 설정하고 다시 시도해주세요.
씬에 배치된 DateWithJRR 프리팹에서 오브젝트 하나를 찾습니다.
DateWithJRR/Mesh/[WSCanvas] Staff/[Block] Staff/[UIWVideoPlayerController].
해당 오브젝트의 Transform 컴포넌트에서 Height을 조정합니다.
이후 DateWithJRR/Mesh/[WSCanvas] Staff/[Block] Staff/[UIWVideoPlayerController]/VideoButtons의 자식 오브젝트로 존재하는 [Button] VideoButton ~ 오브젝트들 중 아무 것이나 선택하여, 필요한 만큼 복제합니다.
과거 VRChat 비디오 플레이어에서 Youtube 영상을 틀면 화질이 좋지 않게 나오는 문제가 있었습니다.
주연시 1 컨텐츠 진행 당시, 화질 문제로 인해 개인 서버에 영상을 업로드하고 재생했습니다.
개인 서버에서 영상을 재생하면 좋은 화질로 재생할 수 있었지만,
VRChat 플레이어 개인마다 로딩 속도에 큰 차이가 있는 것 같습니다.
개인 서버를 사용한 주연시 1, 주연시 2, 고연시 모두 딜레이가 조금씩 생겼습니다.
최근 들어서는 USharpVideo를 Stream 모드로 설정하고 Youtube 영상을 틀면,
나름 꽤 좋은 화질로 재생되는 것을 확인할 수 있습니다.
챠니와 두근두근 컨텐츠에서는 컨텐츠 당일 급히 Youtube로 영상을 재업로드하여 사용했습니다.
영상 앞뒤로 검은 빈 화면을 몇 초씩 추가하여, 혹시 모를 딜레이도 대비했습니다.
영상 앞뒤로 진행 상 마가 좀 뜨긴했지만, 결론적으로 개인 서버를 사용했을 때보다 좀 더 안정적으로 진행할 수 있었습니다.
컨텐츠 당일 VRChat / Youtube / 개인 서버 상태에 따라 차이가 있을 수 있습니다.
250305 - 카모뜨린.
Unity 2022.3.22f1, Woodon v0.1.13