캐치 드로잉

게시 2024/10/19 업데이트 2024/10/24

By Mascari4615

13 분읽는 시간

캐치 드로잉

뭘까용! - 캐치드로잉 합방

나 분명 미술 전공인데…?

이걸 어케 맞췈ㅋㅋㅋㅋㅋㅋ - 이세돌 그림 퀴즈 합방

10초 안에 맞혀보세요

📀 머리말

이세계아이돌 징버거님의 ‘그림 맞추기’ 컨텐츠입니다.

각 참가자가 주어진 주제어를 조작으로 나눠진 캔버스에 그리고,
이를 하나로 합쳐진 그림을 보고 정답자가 정답을 맞추는 컨텐츠입니다.

24년 12월 10일 방송이 진행됐습니다.
이세계아이돌 전원과 왁굳님, 소피아님, 불곰님, 젠투님께서 참가자로 참여했습니다.

왁파고님께서 진행을 맡아주셨습니다.

💿 참여 / 담당

본 컨텐츠는 VRChat 게임 내에서 진행되었습니다.

해당 컨텐츠에 사용된 VRChat World 내 기능 프로그래밍을 담당했습니다.
또한 방송 진행을 위한 오퍼레이팅, 기능 조작을 담당했습니다.

VRChat 내에서 펜으로 그림을 그릴 수 있도록 해주는 QvPen 에셋을 활용하여 그림 기능 구현
각 조각별로 나눠진 그림을 카메라로 찍고, RenderTexture로 뽑아, 하나의 완성된 그림으로 합치는 기능 구현
카메라 시스템
- 에디터 타임에 카메라 구도를 미리 설정
- CinemachineVirtualCamera.Priority를 조정하여 구도 전환

💿 사용한 툴

Unity 2022.3.22f1
U# (C# + VRChat SDK)
Woodon

아트 작업자가 작업한 유니티 프로젝트를 먼저 전달받고, 해당 프로젝트에 기능을 구현하였습니다.
Discord를 통해 팀원과 소통했습니다.

📀 시작

24년 09월 28일에 작업 제의 연락을 받았습니다.

이세계아이돌 분들의 컨텐츠 작업을 그동안 많이 해왔지만, 유일하게 징버거님 컨텐츠는 작업해본적이 없었습니다. 첫 징버거님 컨텐츠 작업이 될 수 있을 것 같아 기쁜 마음으로 제작에 참여했습니다.

📀 과정

💿 CatchDrawingManager, CatchDrawingSeat

5대5 팀 대전이고, 각 플레이어가 각 자리에서 그림을 그릴 수 있어야 한다.

먼저 플레이어의 자리 하나를 표현하는 CatchDrawingSeat을 만들었고,
이 자리들을 한 번에 관리해줄 CatchDrawingManager를 만들었다.

CatchDrawingSeat

플레이어가 그림을 그리는 공간의 기능을 구현한다.
기획 상 필요한 기능은 다음과 같다.

플레이어 등록
펜
스크린 (그림을 그릴 캔버스)
- 제시어
- 어디를 그려야 하는지 파트
그리기 완료 상태
그림 초기화 기능

먼저 각 자리마다 플레이어를 등록하고 저장할 수 있어야 한다. 또한 해당 플레이어가 그림을 모두 그렸는지 여부를 표현하는 그리기 완료 상태를 가지고 있어야 한다.

기획 상 그림을 그리는 동안에는 각 플레이어가 서로의 목소리를 들을 수 없어야 한다. 이때, 그림을 먼저 완성한 사람들끼리는 다시 목소리를 들 수 있어야 한다. 때문에 단순히 그림 그리는 시간에 모든 플레이어를 뮤트시키면 안되고, 각 플레이어에 대해서 보이스 세팅을 해줘야 한다. 각 자리의 플레이어를 특정하기 위해 각 자리에 플레이어를 등록하는 기능이 필요하고, 그림이 완료된 상태에 따라 뮤트 여부가 달라지므로 이 또한 알 수 있어야 한다.

펜은 여러 가지 에셋들 중 QvPen 에셋을 사용했다.
크게 이유는 없고, 당장 프로젝트에 임포트 되어 있는 펜 에셋이 QvPen이라 사용했다.
이는 언제든지 교체 가능하다.

스크린은 단순히 판때기만 있으면 될 것 같지만, 기획 상 그려진 그림을 텍스쳐로 뽑을 수 있어야 한다. 그림을 각 플레이어에게 할당된 파트로 나누고, 해당 그림을 하나로 합치는 기능을 구현하기 위해서다.

이는 Camera.TargetTexture를 이용해 구현했다. 스크린 위에 카메라를 두고, 이 카메라가 렌더링하는 텍스쳐를 이용하는 것이다. 이전에 티바로살래나의 @@게임 컨텐츠를 만들 때 QvPenSketchBook 모듈을 만들어둬서, 이를 활용했다. 간단한 기능이지만 MUdons에 포함되어 있으니 참고해도 좋을 것 같다.

완료 버튼을 누르면 더 이상 그림을 그릴 수 없어야 한다. 카메라를 끄는 것으로 임시 구현한다.

또한 완료 버튼을 누르면 완료 했다는 표시가 떠야 한다.

CatchDrawingManager

각 자리를 컨트롤하는 기능을 구현한다.

필요한 기능은 다음과 같다.

각 자리 그림 초기화
타이머 컨트롤
각 파트 별로 그림 공개
점수 관리 시스템
정답 맞치기 5초안에 5점
- 추가점수 1점
- 못맞추면 상대 팀에게 기회가
  - 상대 팀이 맞추면 3점
  - 동점이면 각팀 아티스트 2명과 정답자 1명을 뽑아 추가 라운드
  - 이거는 선착순
모든 팀원이 제한 시간보다 완성 버튼을 빠르게 눌렀을 경우 보너스 점수를 얻을 수 있다는 표시라던가 이펙트
그림 공개 (각 팀별로)
- 분할선은 그대로
끼어들기 버튼은 인터렉션 활성화 시
버튼을 누르면 누른 팀의 불이 들어오게
그림 그린 사람의 이름도 메인 스크린 위쪽에 뜨게 할 건데 따로 공개 버튼

💿 UI Mask

그림을 나눠서 그리기 위해서 UI Mask를 이용했다.

각 자리에 있는 카메라를 파트 별로 만들어서 찍어도 되지만, 카메라를 여러 대 만들어야 하고, 기존 QvPenSketchbook 모듈을 재사용하기 어렵다. 기능도 복잡해진다. 대신 UI Mask를 이용해 기존 모듈을 그대로 활용할 수 있도록 한다.

원래 기획 상으로는 십자, 대각선 두 가지가 있었는데, 일단 십자만 구현한다.

📀 구현

MUdons 기반 작업.
UdonData 사용.

💿 UI 마스킹

분할된 그림 파트를 하나로 합쳐 보여주는 기능 구현

완료하면 더 못그리게 (펜 숨기기, 초기화 버튼 비활성화)
완료 시 어떤 표시를 띄워야 할지
추가 점수 획득 가능 시 어떤 표시를 띄워야 할지

📀 기록

💿 기획

버거님도 플레이어로 참가
문제 및 갯수 : 미정
팀 : 2팀
팀원 : 5명 (그리는 사람 4명, 맞추는 사람 1명)
팀 내에서 그림 그리는 사람과 정답을 맞추는 사람은 매 라운드 바뀔 수도 있습니다
점수제
- 정답 시 +1점
  - 팀원 모두가 제한 시간보다 빨리 그렸다면 추가 +1점
- 끼어들기 성공 시 +1점

맵 - 요소

펜 (색깔별로)
가림막 (플레이어 단상 사이)
플레이어 단상
- 화면
  - 제시어
  - 그림판
    - 2개로 분할
      - 가로
      - 세로
      - 대각선 1 (좌측상단에서 우측하단)
      - 대각선 2 (우측상단에서 좌측하단)
  - 완성 버튼

상 - 그림 그리는 시간

양팀 모두 동시에 진행
제한 시간 있음 ()
플레이어 단상
- 가림막 ON
- 화면 ON (가림UI 끄는식으로?)
그림판 분할
- 매라운드 랜덤
- 플레이어에게 각각 한쪽씩 분배하여 보여줍니다 (= 그림 그리는 사람 4명)
보이스 차단 ON
- 같은 팀도 안들리게

중 - 대기 (완성 버튼 누른 후, 제한시간 종료)

더 이상 그림을 그릴 수 없음
보이스 차단 OFF
- 개인
모두가 볼 수 있게 완성 표시가 떠야 합니다
- (불이 들어오게 할지 문구만 뜰지는 맵이 나와봐야 정해질 거 같습니다)
한 팀의 모든 팀원이 제한 시간보다 완성 버튼을 빠르게 눌렀을 경우 보너스 점수가 있어서 보너스 점수를 얻을 수 있다는 그런 표시라던가 이펙트가 추가로 있으면 좋을 거 같습니다

하 - 정답 맞추는 시간

한 팀씩 순서대로 그림을 공개합니다
- 메인 스크린에
- 분할 그림 파트들을 하나로 합쳐서 공개
  - 분할선 그대로
    - 그린 사람 이름 공개 예정
      - 토글 버튼 따로
- 각 팀별로 공개 버튼 따로
해당 팀의 맞추는 플레이어가 정답을 못 맞출 경우
끼어들기
- 다른 팀에서 맞출 수 있도록 끼어들기 버튼이 필요합니다
- 인터렉션 활성화 시 누를 수 있도록
- ~~선착순~~
  - ~~먼저 누른 사람 불 들어오게~~

📀Post, 🫐Project

Project VRChat