[기술블로그] 좁은 시야를 보완하기 위한 indicator 구현

프로젝트 :  '편경'이라는 전통 타악기를 이용한 리듬게임 구현

 

배경 : 편경은 크기가 크면서도 연주하는 채인 각퇴는 길지 않아 VR상에서 편경 객체가 아주 크게 느껴지고 시야가 넓지 않아, 다음 연주할 음을 보여주는 애니메이션이 시야 밖에 위치하게 되어 연주에 불편함이 있었다. 이를 극복하기 위해 사용자가 애니메이션이 나타나는 곳을 보고 있지 않을 때 경고를 주는 기능을 추가하기로 하였다.

 

목표 : 사용자의 시야 밖에서 이벤트가 발생하면 화살표를 이용하여 알려주기.

 

먼저, 단순하고 직관적인 푸른 화살표 이미지를 만들었다. 다운받아도 되지만 피피티에서 기본 도형 화살표를 그린 후 색을 고르고 png파일로 저장하였다.

 

 

1. hierarchy상 적절한 위치에 화살표 넣기

 

 

-화살표는 브이알 세계에서 절대적인 위치를 갖는 것이 아니라 사람의 머리인 헤드셋의 위치를 따라가야 한다. 그러므로 hierarchy상 카메라에서 가운데 눈의 자식 객체로 두개의 화살표(왼,오)를 넣어주었다.

 

-png는 이미지이므로, 3D 공간에 그리기 위해서는 캔버스가 필요하다. tmp_SI (sight indicator)라는 캔버스를 만들어주었다.

 

-화살표는 z값 로테이션을 주면 하나의 이미지로 왼쪽 오른쪽 화살표를 만들 수 있다.

 

2. indicator를 보여주는 함수 작성

public Transform head;


public void indicatorL(){
        if(head.localRotation.y<-0.1){//왼쪽으로 가야 할 때
            left.SetActive(true);
        }
        else
            left.SetActive(false);   
    }
    
public void indicatorR(){
        if(head.transform.localRotation.y>0.1){//오른쪽으로 가야 할 때
            right.SetActive(true);
        }
        else
            right.SetActive(false);
    }
    
public void indicatorOff(){
        left.SetActive(false);
        right.SetActive(false);
    }

-head 필드에는 헤드셋의 transform값, right에는 오른쪽 화살표 이미지, left에는 왼쪽 화살표 이미지를 넣었다. (스크립트를 넣은 객체의 inspector창에 드래그앤드롭)

 

-직접 헤드셋을 들고 왼쪽 오른쪽으로 움직여봐서, 왼쪽이 보이지 않을 만큼 헤드셋을 돌렸을 때 transform의 값이 -0.1 이하라는 것을 확인했다. 그러므로 이 값보다 작은 transform.localRotation.y값을 갖는다면 화살표를 보이도록 setActive(true)를 해주고 아닐 경우 false를 해준다. 오른쪽도 동일하게 구현하였다.

 

head: 헤드셋의 transform값

right: 오른쪽 화살표 이미지

left: 왼쪽 화살표 이미지

 

3. indicator가 필요한 시점에 따라 호출해주는 조건 작성

 if((AnsManager.CurrentAns>=12||AnsManager.CurrentAns<=3)&&AnsManager.CurrentAns!=16)
      indicatorL();
else if(AnsManager.CurrentAns!=16)
      indicatorR();
else
      indicatorOff();

-편경의 돌 위치 상 왼쪽에 있는 돌이 현재 연주해야하는 정답일 경우에는 indicatorL() 오른쪽일 경우에는 indicatorR()을 호출하였다. 이후 이미지를 보이게 할지 말지는 현재 연주해야 하는 돌이 사용자의 시야에 있는지를 indicatorL, indicatorR 함수 내부에서 확인해서 결정하였다. 

 

CurrentAns: 현재 연주해야하는 정답음

 

4. 애니메이션을 추가하여 고개를 돌리도록 유도하기

 

 

-애니메이션에는 position 값, 그 중에도 x값만 사용하여 좌우로 움직이는 화살표를 만들었다. 

 

-초기 상황에 position.x 값을 10, 0:15 까지 0으로 가도록 하고, 0:30 까지 다시 10으로 돌아오도록 하였다.

 

애니메이션이 적용된 모습

 

 

-마지막으로, 이름 옆의 체크박스를 해제해주어 setActive(false)의 상태로 만들어준다. 이렇게 해야 초기 화면에 화살표가 노출되지 않고 필요에 의해 호출될 때만 나타난다.

 

 

 

 

다음과 같이 완성하였다.

 

 

 

 

전체 코드:

https://github.com/imHyejinPark/OMGPG