[6기 신촌 류보원] 체감형 게임 - GUI #1

안녕하세요 신촌 멤버십 22기 류보원입니다.

이번에는 오큘러스 리프트의 화면에 적합한 GUI를 구현하는 법에 대해 알아보겠습니다.

오큘러스 리프트를 이용한 게임을 구현할때의 GUI는 일반적인 게임의 GUI와는 조금 다르게 생각할 필요가 있습니다. 그 이유는 시야각과 해상도의 차이 때문입니다. 

일반 PC게임의 경우 사용자의 디스플레이는 대부분 1920 x 1080의 와이드를 사용하기 때문에 화면 좌상단 혹은 하단 구석에 적당히 GUI 레이아웃을 배치하면 됩니다.

하지만, 오큘러스 리프트의 경우 1280 x 800 (640 x 800 per eye : DK1), (960 x 1080 per eye : DK2)의 해상도로 다소 낮은 해상도를 가지고 있습니다. 또한 실제 사람의 눈과 비슷한 시야각을 구현한다고는 하지만 대각선 110º / 수형 90º의 시야각으로 가장자리를 보기 위해서는  고개를 돌려 가장자리를 보는 것이 아니라 가장자리로 눈을 돌려서 봐야 하기 때문에, 일반적인 GUI 구성은 오큘러스 리프트에 적합하지 않습니다.

따라서 개발자의 생각보다 훨씬 좁은, 뷰의 가운데 부분만을 이용해서 게임의 요소와 GUI 레이아웃을 함께 표현하는 것이 효율적인 방법이라고 알려져 있습니다.

또한 HMD 장비의 특성을 살려 GUI 레이아웃을 마치 증강현실처럼 느껴지도록 표현한다면, 더욱 효과적인 체감형 게임을 구현할 수 있다고 생각합니다.

증강현실의 한 장면

---

그럼 지금부터 증강현실 같은(?) GUI 레이아웃을 구성해 보도록 하겠습니다.

우선 지난 번에 구성한 scene을 불러와 보겠습니다.

실행을 시켜보면...

너무 밋밋하니 간단하게 Skybox를 적용해 보겠습니다.

Assets/Import Package/Skyboxes를 선택하고 Import를 눌러줍니다.

임포트가 되면 Project 탭에서 Standard Assets에 Skyboxes 폴더가 추가된것을 확인 할 수 있습니다.

해당 폴더에서 Material들을 선택하면 Inspector에서 Skybox의 각 면을 확인 할 수 있습니다.

원하는 Material을 선택한 후, Edit/Render Settings에서 Skybox Material에 드래그 앤 드랍으로 넣어 주면, 적용이 된것을 바로 확인 할 수 있습니다.

화면이 조금 화사해 졌네요, 여기서 스페이스를 한번 눌러보면,

튜토리얼로 구현되어 있는 메뉴가 나타납니다.

일반적으로 유니티에서 사용하는 GUIText나 GUITexture를 이용해 GUI 레이아웃을 구성하려면, 위와같이 양쪽 눈에 GUI가 나타나지 않습니다.

(둘 중 한쪽 카메라에만 GUI 레이아웃을 구성하거나, 위 그림과 같이 양쪽에 나타나게 하기 위해서는 직접 계산하여 두 개의 카메라에 동시에 그려줘야 함)

하지만 OVR Package에는 API를 제공하고 있으니 이부분을 확인하면 쉽게 사용이 가능하고, 필요에 따라 수정도 할 수 있습니다.

이 부분의 개발을 위해서는 스크립트를 먼저 봐야합니다.

Project 탭에서 OVR/Scripts/OVRMainMenu.cs 를 엽니다.

소스를 살펴보면 아래와 같은 부분을 볼 수 있습니다.

GuiHelper 객체를 통해 각각의 메뉴를 그리고 있습니다.

선언부를 보면,

따라서, 커스터 마이징을 위해서는 OVRGUI 클래스를 살펴봐야 합니다.

위처럼 메인메뉴를 구성하는데 사용했던 StereoBox를 그리는 메서드가 구현이 되어있습니다.

그 외에도 아래 처럼 텍스처를 그리는 메서드나, 해상도를 조절하기 위한 부분 등이 구현이 되어있습니다.

이처럼 StereoBox나 Texture를 그리는 메서드를 응용하면, 그럴싸한 GUI 레이아웃을 구성할 수 있습니다.

---

다음 포스팅에서는 이 메서드들을 응용해서 게임에 필요한 GUI 레이아웃을 직접 구현해 보도록 하겠습니다.

감사합니다.