[Unity VR과 Android BLE] #4 Unity 메뉴 만들기

Unity VR앱과 안드로이드 앱을 integration하는 앱을 만들어 봅니다. 또 안드로이드의 BLE 장치 제어를 Unity에서 하는 내용을 다룹니다.

출처: https://medium.com/@narendrapal39/android-add-support-library-for-unity-205b45ca243d

이전글 - [Unity VR과 Android BLE] #3 Unity 안드로이드 및 Oculus 패키지 설정

---

뭔가 만들어 볼 준비가 다 되었으니 이제 Unity 화면에 뭔가를 추가해 보겠습니다. Unity는 게임 만드는 툴로 유명하지만, 여기서는 간단히 VR을 쓰면 나타나는 메뉴를 만들어 보겠습니다. 나중에 게임에도 쓸 수 있겠죠.

SampleScene 이름 변경

Unity를 실행하면 기본적으로 Scene의 이름은 SampleScene입니다. 이걸 변경해 보겠습니다. Hierarchy 뷰에서는 변경이 안되고, Project 뷰에서 파일 이름을 변경하면 됩니다.

설정: Project 뷰 -> Assets -> Scene. SampleScene을 VRScene으로 변경

간단한거지만, 왜 이름이 변경안되지 할 수 있습니다. 왠만한 것은 검색하면 방법이 다 나옵니다.

Camera 변경

Oculus 패키지에 있는 VR용 Camera를 사용할 것이기 때문에, Scene에 기본으로 있는 MainCamera를 삭제하고 다음과 같이 OVRCamera를 Scene에 추가합니다.

설정: Assets -> Oculus -> VR -> Prefabs -> OVRCameraRig를 Hierarchy 뷰에 드래그 앤 드랍

MainCamera를 삭제하고 OVRCameraRig를 추가하면 위 그림 처럼 됩니다. 여기서 CenterEyeAnchor를 주의깊게 봅니다.

Game 뷰 사이즈 변경

우리는 안드로이드 앱을 만들 것이기 때문에 Game 뷰 사이즈를 안드로이드 기기 화면에 맞게 변경합니다. 여기서는 1440x2960으로 합니다.

설정: Game 뷰에서 "!6:10 Landscape" 클릭 -> 하단에 "+" 클릭 -> 화면 크기 입력

Menu 만들기

그럼 이제 화면에 나타날 Menu를 만들어 보겠습니다.

Hierarchy 뷰에서 아래 그림과 같이 Empty GameObject를 만들고 이름을 Menu로 변경합니다. 그리고 Menu의 자식으로 Canvas를 추가합니다.

설정: Hierarchy 뷰에서 오른쪽 클릭 -> Create Empty -> 이름을 Menu로 변경
Menu를 선택하고 오른쪽 클릭 -> UI -> Canvas 클릭

바로 이 Canvas에 버튼의 기능을 하는 UI를 추가할 것입니다. 그런데 이 Canvas는 VR 환경에 쓰일 것이기 때문에 아래와 같이 Render Mode를 World Space로 변경해야 합니다. 그래야지만 3D 방향으로 Canvas의 위치를 변경할 수가 있습니다.

설정: Canvas 선택 -> Inspector 뷰 -> Canvas 탭 -> Render Mode를 World Space로 변경

Canvas의 크기를 적절히 조절해 줍니다. 여기서는 대략 1440x1500으로 했습니다. Canvas는 Menu의 자식이므로 Menu의 위치를 조절하여 카메라로 부터 Canvas의 위치를 조절합니다.

카메라를 클릭하여 카메라 시야와 Canvas의 위치가 적절한지 확인합니다.

카메라의 시야 거리 바운더리에 Canvas가 놓이게 되면, Canvas의 UI가 이상하게 표시됩니다. 따라서 시야 거리 안쪽에 Canvas가 위치하도록 합니다.

Canvas에 Image 버튼 만들기

여기서는 일반 UI 버튼이 아니라 Image 버튼을 만들어 보겠습니다. Image 버튼은 버튼에 이미지를 입힐 수 있으니 멋진 버튼을 만들 수 있겠죠? 하지만 여기서는 심플한 디자인 버튼을 만들 것입니다.

설정: Canvas 오른쪽 클릭 -> Create Empty. 이름을 Button1으로 변경
Button1 오른쪽 클릭 -> UI -> Image

위 그림과 같이 Button1과 Image의 크기를 적절히 조절합니다.

이렇게 하고 Unity의 Play버튼(상단 중앙)을 누르면 버튼의 위치가 어떻게 안드로이드 기기에서 보이는지 표시가 되니, 적절히 변경합니다.

나중에 버튼하고 Text를 추가할 것이기 때문에 버튼을 약간 윗쪽에 위치시켰습니다.

그럼, 버튼에 이미지를 추가해 보겠습니다. 먼저 이미지를 적당히 만듭니다. 저는 파워포인트로 대충 만들었습니다. 그리고 파일을 PNG 타입으로 저장했습니다. 그런데 바로 이 이미지를 버튼의 Image에 적용할 수가 없습니다. 아래 그림 처럼 이미지 파일의 Texture Type을 Sprite로 변경해야 합니다.

설정: Project 뷰에서 이미지 파일 클릭 -> Inspector 뷰에서 Texture Type을 Sprite로 변경

참고로, Project 뷰에서 Assets폴더 밑에 Images라는 폴더를 만들었습니다. 나중에 계속 Assets를 추가할 것인데, 적절히 폴더를 만들어서 관리하는게 편합니다.

이제 Button1의 Image를 클릭한 후 아래와 같이 Image 파일을 Project 뷰에서 선택해서 Inspector 뷰의 "Source Image"에 드래그 앤 드랍하여 이미지를 적용합니다.

그러면 위와 같이 Button1에 해당 이미지가 적용됩니다. 여러분은 좀 더 멋진 이미지 버튼을 만들어 보세요.

버튼 하나 더 만들기

버튼을 하나 더 만들어 보겠습니다. 먼저 만들어 놓은 버튼을 복사하기만 하면 됩니다. Hierarchy 뷰에서 Button1을 클릭하여 Ctrl+C, Ctrl+V 합니다. 그러면 버튼이 하나 더 생기고, 이름을 Button2로 변경합니다. 그런 다음 위에서 했듯이 버튼 이미지 파일을 Sprite로 변경하고, Image의 "Source Image"에 이미지 파일을 적용합니다. 그런 후 아래 그림과 같이 Button2의 위치를 적절히 옮깁니다.

Text UI 만들기

안드로이드 기기에서 BLE 장치에 연결해서 명령을 실행할 기능을 추가할 건데, 이 때 사용자에게 연결 상황이라던지, 에러 메시지를 보여줄 Text UI를 추가하겠습니다.

설정: Canvas 오른쪽 클릭 -> UI -> Text.
Text 클릭 -> Inspector 뷰 -> 크기 설정(1000x150), 표시 이름 변경, Font 사이즈 변경, 정렬 조정

Menu 확인

메뉴 구성이 완료 되었습니다. 이제 Play 버튼을 눌러서 화면에서 어떻게 보이는지 확인해 봅니다.

그럭저럭 예쁩니다 ^^

[주의] 한가지 주의할 점은 Play 상태에서 작업한 내용은 저장되지 않고 모두 날라갑니다. 작업하면서 계속 저장하는 습관을 가져야 합니다. 자기도 모르게 Play 상태에서 이거저것 만들 때가 있는데, 헛고생하게 되어 있습니다. 반드시 Play 상태가 아닌 것을 확인하고 작업해야 합니다.

---

다음에는 버튼들을 사용자가 응시할 때 색깔을 변하게 하는 것과 사용자 응시점인 Reticle을 표시하는 것을 만들어 보겠습니다.

오늘의 실습: 멋진 버튼 이미지를 만들어 보세요.