Unity 2022.3.5f1 Google VR Cardboard - 05

VR환경에서의 UI디자인 

 

캔버스의 Render Mode를 World Space로 설정 하자 

Death_Chest를 선택하고 Canvas를 추가 한다 

 

 

캔버스 아래 빈 게임 오브젝트를 추가 하고 ManuGroup으로 이름을 변경 한다 

앵커프리셋을 선택해 Alt를 누른채 오른쪽 맨 아래 있는 버튼을 클릭해 늘려준다 

 

---

UI리소스 임포트 

UI_Textures.unitypackage

2.99MB

스프라이트 이미지 스케일 조정 : Reference Pixels Per Unit 

MenuGroup 게임 오브젝트를 선택하고 Panel을 생성한다 

3D와 UI의 기본 스케일이 달라 뭉게져보인다

Canvas를 선택후 Canvas Scaler컴포넌트의 Reference Pixels Per Unit 속성값을 1로 변경 한다 

 

Border스프라이트를 연결하고 색상을 변경한다 

Cyan계열의 색상 #00FFD4

 

---

텍스트 스케일 조정 - Dynamic Pixels Per Unit 

Panel 하위에 텍스트를 추가 한다 

UI > Text를 선택한다 

 

앵커프리셋을 선택후 Alt를 누르고 오른쪽 하단에 있는 스트래치를 선택 한다 

Alt + 우 하단

아무런 글자가 안보인다 

3D와UI는 스케일이 다르다 

Canvas를 선택하고 Canvas Scaler컴포넌트의 Dynamic Pixels Unit 속성을 2000으로 변경 한다 

 

색상을 변경 하고 아이템 상자를 열어 볼까요? 라고 지정한다 

 

---

 

메뉴의 빌보드(Billboard) 처리

 

VR환경에서는 카메라의 위치 및 시선이 어디를 응시하든 항상 카메라와 90도 를 이루고 있다고 볼수 있다 

따라서 메뉴가 항상 카메라를 바라보도록 빌보드 기능을 구현 해야 한다 

새로운 스크립트를 만들고 Billboard로 지정한다 

 다음과 같이 작성한다 

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Billboard : MonoBehaviour
{
    private Transform camTrans;
    
    void Start()
    {
        this.camTrans = Camera.main.GetComponent<Transform>();
    }

    private void LateUpdate()
    {
        this.transform.LookAt(this.camTrans.position);
    }
}

이 스크립트를 Canvas에 추가 하고 테스트 해보자 

플레이어가 어디로 이동하던 메뉴는 항상 플레이어(카메라)를 바라본다 

VR기기에서 테스트 하면 항상 시선에 맞게 메뉴가 보인다 

 

Billboard스크립트의 LateUpdate함수에서 사용한 LookAt메서드는 자신의 Z축이 대상을 향하므로 기존 글자가 역상으로 보인다 

Canvas하위에 있는 MenuGroup을 선택하고 Rotation Y 속성값을 180으로 설정 한다 

 

실행후 결과를 확인한다