[Unity VR과 Android BLE] #5 Reticle 표시 및 응시 처리 by etainclub

View this thread on steempeak.com
· @etainclub ·
$0.67
[Unity VR과 Android BLE] #5 Reticle 표시 및 응시 처리
Unity VR앱과 안드로이드 앱을 integration하는 앱을 만들어 봅니다. 또 안드로이드의 BLE 장치 제어를 Unity에서 하는 내용을 다룹니다.
 
https://cdn-images-1.medium.com/max/1600/1*UKw493IUbk3nkyErUtxkPg.png
출처: https://medium.com/@narendrapal39/android-add-support-library-for-unity-205b45ca243d

이전글 - [[Unity VR과 Android BLE] #4 Unity 메뉴 만들기](https://steemit.com/kr/@etainclub/unity-vr-android-ble-4-unity)

---
이전글에서 만든 이미지 버튼을 사용자가 응시했을 때, 사용자에게 응시를 알리기 위해 이미지 버튼의 색깔을 변경하는 것을 만들어 보겠습니다.

먼저, 사용자의 시점을 표시하는 Reticle이라는 것을 Oculus 패키지를 이용해서 화면에 나타나도록 해보겠습니다.

해당 작업을 위해 참고한 동영상 입니다.
https://www.youtube.com/watch?v=9wZWSz6_gpU&t=275s

Oculus VR (OVR) 패키지에 포함된 내용을 이용해서 몇가지 설정을 합니다.

## OVR Physics Raycaster 추가
먼저 카메라에 Physics Raycaster를 추가합니다. 이것은 시선이 어떤 물체에 닿았는지 알 수 있게 하는 것입니다. Raycaster는 시선이 향하는 방향으로 수 많은 광선(ray)를 쏴서(casting)헤서 각 광선과 공간 상에 존재하는 물체간의 접촉(collision)이 있는지 계산하는 모듈입니다.
> 설정: OVRCameraRig 클릭 -> Inspector 뷰에서 하단의 Add Component -> "OVR Physics Raycaster" 검색하여 추가 
![](https://cdn.steemitimages.com/DQmXb9d7thsDqSaV7y7daZNSZEBkEnLyTVeGNShxz52RiGN/image.png)

## Gaze Pointer Ring 추가
사용자의 시선인 Reticle을 표시하기 위해 OVRInspector에서 Gaze Pointer Ring을 Hirarchy 뷰에 추가합니다.
> 설정: Gaze Pointer Ring 클릭 -> Inspector 뷰에서 OVR Gaze Pointer의 Ray Transform 필드에 OVRCameraRig의 CenterEyeAnchor를 드래그 앤 드랍
> 추가로 Hide by Default 체크 박스 uncheck
![](https://cdn.steemitimages.com/DQmWSGa8hytV4YBqXDLpLcgt3KdeU7K5UMJwusgKZEJEJR6/image.png)

다음으로 Canvas의 Graphic Raycaster를 삭제하고, OVR Raycaster를 추가합니다.
> 설정: Canvas 클릭 -> Inspector 뷰에서 Add Componet 클릭 -> OVR Raycaster 선택 후 추가
> 중요: 아래 그림과 같이 Canvas의 Event Camera 필드에 CenterEyeAnchor를 드래그 앤 드랍
![](https://cdn.steemitimages.com/DQmUuAoVbN8DURdBvEqzDMp9cbaXUgGVamb9xkEMG9dQFN6/image.png)

## OVR Input Module 추가
Hierarchy 뷰에서 EventSystem에 OVR Input Module을 추가합니다.
> 설정: Hierarchy 뷰에서 EventSystem 클릭 -> Inspector 뷰 -> Add Componet 클릭 -> OVR Input Module 검색 후 추가
> 기존에 있던 Standalone Input Module을 필요 없기 때문에 삭제 
![](https://cdn.steemitimages.com/DQmTFqBP2LX9RxsN8M72nM6yB3SvU89T5f6LJpmjb9WrmQX/image.png)

다음으로 OVR Input Module의 Ray Transform 필드에 OVRCameraRig의 CenterEyeAnchor를 드래그 앤 드랍하여 적용합니다.
![](https://cdn.steemitimages.com/DQmPoc2BQKXSXaFAYwMwKN3XZqSf8x2SpW5317K3AAMQ2K6/image.png)

이렇게 한 후 Play 버튼을 눌러 봅니다. Reticle이 화면에 아래와 같이 표시됩니다. 와우! 화면의 파란색 원 보이시죠? 굿!

![](https://cdn.steemitimages.com/DQmdnuRb4RLgRdApc3j2X5ngb6uvcJ9Ti9ye5U1kUxBqPGn/image.png)

> 팁: 위 그림처럼 Play 상태에서 Hierarchy 뷰의 OVRCameraRig의 TrackingSpace를 클릭한 후에 Inspector 뷰에서 Rotation의 X, Y, Z 문자 위에(값 필드가 아님) 마우스를 가져가면 화살표로 아이콘이 변경되는데, 이 때 클릭하여 방향을 조절하면 Game 뷰가 변경됩니다. 매우 유용한 기능이니 꼭 익히세요.

## 버튼 응시 처리
이제 사용자의 응시인 Reticle을 표시했으니깐 사용자가 버튼을 응시했을 때, 버튼의 색깔이 바뀌도록 해보겠습니다.
드디어 코딩이 들어갑니다. 이제까지는 드래그 앤 드랍으로 모든 것이 가능했는데, 여기서 부터는 코딩이 시작됩니다. 코딩이 시작된다고 하지만 앞으로 많은 부분이 역시 드래그 앤 드랍으로 해결됩니다.

먼저 아래와 같이 Assets 밑에 Scripts라는 폴더를 만들고 VRButton이라는 C# 파일을 만듭니다.
![](https://cdn.steemitimages.com/DQmTAt3uNuViHDGw4AerKr8DxBZDsZNpK59T2bQWN96XnEk/image.png)

그런 다음 아래와 같이 코드를 작성합니다.
```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class VRButton : MonoBehaviour {
    // button image
    public Image Image;
    // image color for gaze exit
    public Color NormalColor;
    // image color for gaze enter
    public Color HighlightColor;

    // Use this for initialization
    void Start () {
		
	}
	
	// Update is called once per frame
	void Update () {
		
	}

    // when the gaze enters, update the image color
    public void OnGazeEnter() {
        Image.color = HighlightColor;
    }

    // when the gaze exits, update the image color
    public void OnGazeExit() {
        Image.color = NormalColor;
    }

    // when the button is clicked
    public void OnClickButton1() {
        Debug.Log("onClickButton1");
    }
}
```
위 코드를 보면 기본 코드이위에 세 가지 함수가 추가되었습니다. 
- OnGazeEnter: 사용자가 버튼을 응시할 때 호출
- OnGazeExit: 응시가 버튼을 벗어날 때 호출
- OnClickButton1: 버튼을 클릭할 때 호출
함수 설명은 호출이 된다고 했지만, 사실 이 코드만으로는 호출이 안됩니다. Unity 이벤트와 함수들을 연결시켜줘야 합니다.

### 이미지 버튼에 VRButton 스크립트 적용
VRButton 스크립트를 Button1에 적용합니다. 단순히 Project 뷰의 VRButton 파일을 Hierarchy 뷰의 Button1로 드래그 앤 드랍하면 됩니다. Button1의 Inspector에서 Add Component해도 됩니다.
그러면 Button1의 Inspector 뷰의 VRButton 탭에 VRButton 스크립트에서 선언한 public 변수 필드들이 나타납니다. 여기서는 Image, Normal Color, Highlight Color입니다. 각 필드에 값을 채워 줘야 합니다.
![](https://cdn.steemitimages.com/DQmRwriFmL6hCkMFKhzCKGwHYuvEc7jXZhipoPKTqr3Zs8F/image.png)
Image 필드는 Button1의 자식 Image를 드래그 앤 드랍하고, Normal Color는 적절히 선택합니다. HIghtlight Color도 적절히 선택합니다. 이 때, color의 alpha값이 0이 아니어야 표시가 됩니다.

### 이벤트 적용
그럼 이제 VRButton 스크립트에서 만든 함수와 실제 이벤트와 연결시켜 보도록 하겠습니다.
> 설정: Button1의 Inspector 뷰 -> Add Component -> OVR Gaze Event Trigger 추가
> On Enter 탭에서 "+"를 클릭 -> VRButton 스크립트를 "Name" 부분으로 드래그 앤 드랍.  VRButton -> OnGazeEnter 선택
> On Exit 탭에서 "+"를 클릭 -> VRButton 스크립트를 "Name" 부분으로 드래그 앤 드랍.  VRButton -> OnGazeExit 선택 
![](https://cdn.steemitimages.com/DQmXerDePSGs7rFFKEymy4zRSagiCr1HtdnA3E8ScP8k5jS/image.png)

### 확인
Play 버튼을 누르고 Reticle을 BLE Control 버튼으로 이동시킵니다. 이동방법은 TrackingSpace 이용. 위 참조.
![](https://cdn.steemitimages.com/DQmeYfEzakP8SHXjfTSfgPdB8gDWDBoiDwe1216suPckr7C/image.png)
Reticle이 버튼위로 울라가고 나가면서 버튼 색깔이 바뀌는 것을 알 수 있습니다. 와우!

### OnClickButton1 함수와 이벤트 연결
OnClickButton1 이벤트는 OVR Gaze Event Trigger에 없기 때문에, 다음과 같이 Event Trigger를 추가하고 함수를 연결시킵니다.
> 설정: Button1 클릭 -> Inspector 뷰 -> Add Component -> Event Trigger 선택
> Add New Event Type 클릭 -> Pointer Click 선택
> Name 필드에 VRButton를 드래그 앤 드랍, Function에 VRButton의 OnClickButton1 함수 선택
![](https://cdn.steemitimages.com/DQmRyS3pndv9QhLSUhbtuq9SzxZaihCVMSK2XzdVtvHvhjc/image.png)

### OnClickButton1 이벤트 확인!
Play 버튼을 누르고 Reticle을 버튼으로 이동시킨 후, 마우스를 Game 뷰에서 클릭한 후 "Spacebar"를 누릅니다. Unity에서 클릭 이벤트는 "Spacebar"로 맵핑 되어 있습니다. 그리고 Project 뷰 옆의 Console 뷰를 주의깊게 봅니다.
![](https://cdn.steemitimages.com/DQmag65rEgxG7Ebi5oduhEeiueRamKUp1ZPaRikWD8dLouT/image.png)
위 그림과 같이 Console 뷰에 "OnClickButton1" 메시지가 찍히는 것을 확인합니다.

---
이것으로 버튼의 이벤트 처리에 대해서 알아봤습니다. Button2도 동일하게 이벤트 처리하면 됩니다. 한가지 다른 점이 있는데, Button1을 눌렀을 때는 안드로이드 기기가 BLE 장치를 제어하는 명령을 실행할 것이지만, Button2를 눌렀을 때는 360도 동영상을 실행시키는 것입니다. 즉 Video Player를 사용할 것입니다. 다음에 이어서 해보겠습니다.

`오늘의 실습: 다른 Event를 추가하고, 함수와 연결시켜 보세요.`
👍  , , , , , , , , , , , , , , ,
properties (23)
post_id61,879,138
authoretainclub
permlinkunity-vr-android-ble-5-reticle
categorykr
json_metadata{"format":"markdown","links":["https:\/\/medium.com\/@narendrapal39\/android-add-support-library-for-unity-205b45ca243d","https:\/\/steemit.com\/kr\/@etainclub\/unity-vr-android-ble-4-unity","https:\/\/www.youtube.com\/watch?v=9wZWSz6_gpU&t=275s"],"tags":["kr","busy","unity","android","jjangjjangman"],"app":"steemit\/0.1","image":["https:\/\/cdn-images-1.medium.com\/max\/1600\/1*UKw493IUbk3nkyErUtxkPg.png"]}
created2018-09-08 00:28:09
last_update2018-09-08 00:28:09
depth0
children1
net_rshares645,668,489,803
last_payout2018-09-15 00:28:09
cashout_time1969-12-31 23:59:59
total_payout_value0.511 SBD
curator_payout_value0.157 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length6,090
author_reputation760,520,825,820,652
root_title"[Unity VR과 Android BLE] #5 Reticle 표시 및 응시 처리"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (16)
@virus707 ·
이오스 계정이 없다면 마나마인에서 만든 계정생성툴을 사용해보는건 어떨까요?
https://steemit.com/kr/@virus707/2uepul
properties (22)
post_id62,111,509
authorvirus707
permlinkre-etainclub-unity-vr-android-ble-5-reticle-1536608534776t25218712-4910-477a-b588-43e139abe608uid
categorykr
json_metadata{"links":["https:\/\/steemit.com\/kr\/@virus707\/2uepul"],"app":"null\/null","format":"markdown","users":["virus707"],"tags":["support"]}
created2018-09-10 19:42:18
last_update2018-09-10 19:42:18
depth1
children0
net_rshares0
last_payout2018-09-17 19:56:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length81
author_reputation969,765,359,108,248
root_title"[Unity VR과 Android BLE] #5 Reticle 표시 및 응시 처리"
beneficiaries
0.
accountsteemj
weight250
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000