[Unity VR과 Android BLE] #7 버튼 UI 감추기 by etainclub

View this thread on steempeak.com
· @etainclub ·
$1.85
[Unity VR과 Android BLE] #7 버튼 UI 감추기
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] #6 360도 VR 영상 플레이](https://busy.org/@etainclub/unity-vr-android-ble-6-360-vr)

---
VR 영상이 폰에서 잘 재생이 되던가요? 저는 문제 없이 잘 플레이 됐습니다. 아마 Gear VR이 없으셔서 테스트하기 어려운 분들이 많으실 겁니다. Gear VR이 없다면 Google Cardboard로 해보실 수 있습니다. 단, Unity의 XR Settings에서 Oculus가 아니라 Cardboard를 추가하면 됩니다.

VR 영상이 잘 재생은 되는데 한가지 문제가 있죠? 눈치 채셨죠? 버튼들이 화면을 가리고 있습니다. 이렇게요.
![](https://cdn.steemitimages.com/DQmep4eQqQzE6RUXoGdRewixxuQCrbyvgqEKi3QMbDMKFTL/image.png)

이번에는 버튼을 클릭하면 동영상이 재생되고 버튼하고 Status라고 적혀 있는 Text가 사라지게 해보겠습니다.

## 버튼 감추기
버튼을 화면에서 감추기 위한 방법은 두 가지가 있습니다. 하나는 버튼을 disable 비활성화 시키는 것이고, 다른 하나는 버튼 이미지의 Alpha값을 0으로 해서 투명하게 만드는 것입니다.

### SetActive 함수를 이용하여 버튼 비활성화
VRButton.cs 스크립트에 아래와 같이 코딩하면 Button2를 비활성화 시킬 수 있습니다.
```
생략
public class VRButton : MonoBehaviour {
   생략
    public GameObject Button2;

    void Start () {
        // get the button2 object
        Button2 = GameObject.Find("Button2");
    }
    생략
     public void OnClickButton2() {
       // disable the Button1 object
       Button2.SetActive( false );
       VideoPlayer.Play();
     }
```

이렇게 하면 Button2인 Play VR 360 버튼이 화면에서 사라집니다.
![](https://cdn.steemitimages.com/DQmacJfCLJ5PnAddqyGPEZcWvEYU3WVp4pxRHptxR8ghL8e/image.png)

그런데, 동영상이 재생되지 않습니다! 왜냐하면 Button2가 비활성화 되면서 Button2에 속한 Video Player가 같이 비활성화 되기 때문입니다. Button1을 이와 같은 방법으로 화면에서 사라지게 해도 되지만, Button2는 비활성화 방법으로 하면 동영상 재생을 할 수 없습니다.

### Alpha 값 조정하기
Button2를 비활성화하지 않고, 그냥 화면에서 안보이게 할 수 있습니다. 바로 Color의 Alpha값을 조절하는 것입니다. Alpha값이 0이면 투명하게, 255이면 완전 불투명하게 됩니다.

VRButton.cs 스크립트에 아래와 같이 코딩합니다.
```
생략
public class VRButton : MonoBehaviour {
     생략
     // button image
     public Image Image;
     생략
     public void OnClickButton2() {
       // make the image of Button2 transparent
       Image.CrossFadeAlpha( 0, 1, true );
       VideoPlayer.Play();
     }
```

Button2의 Image의 Alpha값을 0으로 만드는데 Fade 효과를 1초동안 주도록 했습니다. 그런데 이렇게 하고 플레이하면 버튼의 이미지는 없어지지만 배경이 하얗게 남아 있습니다. 아래와 같이 Button2의 Inspector 뷰에서 OVR Gaze Event Trigger의 Color 필드를 수정해 줍니다. Color의 Alpha값이 원래 255로 되어 있었는데 0으로 했습니다.
![](https://cdn.steemitimages.com/DQmScpGh8LAKPNNMtY9wfHmmvdPnB7SxwbUCeMJUMTBETuh/image.png)
아래와 같이 Alpha값이 A값을 0으로 해줍니다.
![](https://cdn.steemitimages.com/DQmRJkPaomkHHVMSYH1VaUBwVnJaD5xpSHCfGYBHnRV4HK4/image.png)

이렇게 수정한 후에 플레이를 해보면 Play VR 360 버튼이 천천히 화면에서 사라지고 동영상도 재생되게 됩니다.

## 다른 UI 감추기
Button2는 화면에서 안보이는데, Button1하고 Status라고 찍힌 Text, 그리고 Reticle은 화면에 그대로 남아 있는 상태입니다. 이것도 같이 화면에서 사라지게 해보겠습니다.

방법은 위에서 설명한 SetActive 함수를 이용하는 것입니다. Button2를 클릭했을 때, 비활성화 시켰다가, 나중에 다시 활성화 시키면 다시 보이게 됩니다.

```
생략
public class VRButton : MonoBehaviour {
   생략
    // button1 object
    public GameObject Button1;
    // reticle
    public GameObject GazeIcon;
    // stauts text
    public GameObject Status;

    void Start () {
        // get VideoPlayer that belongs to the Button2
        VideoPlayer = GetComponent<VideoPlayer>();
        // get the button1 object
        Button1 = GameObject.Find("Button1");
        // reticle object
        GazeIcon = GameObject.Find("GazePointerRing");
        // text object
        Status = GameObject.Find("Text");
    }
    생략
    public void OnClickButton2()
    {
        Debug.Log("onClickButton2");
        // make the image of button2 transparent
        Image.CrossFadeAlpha(0, 1, true);
        // disable Button1
        Button1.SetActive(false);
        // disalbe reticle
        GazeIcon.SetActive(false);
        // disable status text
        Status.SetActive(false);
        // play the video
        VideoPlayer.Play();
    }
```

이렇게 한 후 플레이하면 다음과 같이 깔끔하게 모든 UI가 화면에서 사라지고 깨끗하게 동영상을 감상할 수 있게 됩니다.
![](https://cdn.steemitimages.com/DQmWDChhh7nFhF1Es1a3AUaM4SGMYDB2LwjX8DCCDdzdYXV/image.png)
👍  , , , , , , , , , , ,
properties (23)
post_id62,001,076
authoretainclub
permlinkunity-vr-android-ble-7-ui
categorykr-dev
json_metadata{"format":"markdown","app":"busy\/2.5.6","tags":["kr-dev","busy","unity","android","jjangjjangman"],"community":"busy","users":["narendrapal39","etainclub"],"image":["https:\/\/cdn-images-1.medium.com\/max\/1600\/1*UKw493IUbk3nkyErUtxkPg.png"],"links":["https:\/\/medium.com\/@narendrapal39\/android-add-support-library-for-unity-205b45ca243d","https:\/\/busy.org\/@etainclub\/unity-vr-android-ble-6-360-vr"]}
created2018-09-09 13:47:21
last_update2018-09-09 13:47:21
depth0
children1
net_rshares1,738,118,352,315
last_payout2018-09-16 13:47:21
cashout_time1969-12-31 23:59:59
total_payout_value1.625 SBD
curator_payout_value0.227 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length3,919
author_reputation790,274,152,641,380
root_title"[Unity VR과 Android BLE] #7 버튼 UI 감추기"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (12)
@virus707 ·
이오스 계정이 없다면 마나마인에서 만든 계정생성툴을 사용해보는건 어떨까요?
https://steemit.com/kr/@virus707/2uepul
properties (22)
post_id62,184,335
authorvirus707
permlinkre-etainclub-unity-vr-android-ble-7-ui-1536678548364t1a37f392-8a40-43e8-ae38-eb56de205a2fuid
categorykr-dev
json_metadata{"links":["https:\/\/steemit.com\/kr\/@virus707\/2uepul"],"app":"null\/null","format":"markdown","users":["virus707"],"tags":["support"]}
created2018-09-11 15:09:09
last_update2018-09-11 15:09:09
depth1
children0
net_rshares0
last_payout2018-09-18 15:09:09
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] #7 버튼 UI 감추기"
beneficiaries
0.
accountsteemj
weight250
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000