13. 기본 UI 만들기

VR에서는 UI 요소를 화면 공간이 아닌 월드 공간에 배치하는 다양한 접근 방식을 사용합니다. 이러한 유형의 예는 다음과 같습니다.

• 헤드업 디스플레이(HUD):  캔버스가 사용자 앞에 나타납니다. 여기서는 두 가지 유형, 즉 머리 움직임에 관계없이 캔버스가 눈 앞에 동일한 위치에 나타나는 바이저 HUD와 조종석의 윈드실드와 같이 패널이 3차원 공간에 떠 있는 윈드실드 HUD 입니다.
• 게임 내 요소 UI(In-game element UI): 캔버스는 경기장의 스코어보드와 같은 씬(scene) 게임 중 일부입니다.
• 정보 버블(Info bubble): 이것은 캐릭터의 머리 위를 떠도는 생각 풍선과 같은 장면의 객체에 부착된 UI 메시지입니다.
• 레티클 커서(Reticle cursors): 바이저 HUD와 비슷하게 십자선 또는 포인터 커서를 사용하여 장면의 사물을 선택합니다.
• 대화형 대시보드(Interactive dashboard): 이것은 일반적으로 허리 높이 또는 책상 높이에 있는 게임 플레이의 일부인 제어판입니다.
• 손목 기반 메뉴 팔레트(Wrist-based menu palette): 양손 입력 컨트롤러를 사용하면 한 손은 메뉴 팔레트를 들고 다른 손은 선택하고 선택한 도구를 사용할 수 있습니다.
•  

1. 재사용 가능한 기본 캔버스 만들기

 

Unity Canvas는 메뉴, 도구 모음 및 정보 패널과 같은 UI 그래픽을 위한 컨테이너인 2차원 평면 표면입니다. 기존 응용 프로그램에서 캔버스는 일반적으로 장면의 게임 플레이 그래픽을 오버레이하는 화면 공간에서 렌더링되며 다양한 화면 크기, 가로 세로 비율  및 방향 (가로 대 세로)을 늘리고 그에 부합하는 기능을 가지고 있습니다. 반대로 VR에서는 VR "스크린"이 가장자리가 없고 왼쪽 눈과 오른쪽 눈이 다르기 때문에 화면 공간을 사용하지 않습니다. 

대신 VR에서는 다른 모든 Scene 개체와 동일한 3 차원 공간에서 떠 있는(여전히 2 차원 표면에 있지만)  월드 공간 캔버스를 사용합니다.

 

 

Unity의 UI 캔버스는 게임뿐 아니라 웹사이트와 모바일 앱에서도 기대할 수 있는 다양한 그래픽 레이아웃 유연성을 제공합니다. 이러한 유연성에는 복잡성이 가중됩니다.

여기서는 더 쉽게 만들기 위해 먼저 선호하는 VR 기본 설정이 있는 캔버스의 프리팹을 구축하고 재사용하도록 합니다.

① 앞의 Navmesh 장면을 엽니 다.

② File | Save As 하고, 이름을 06-UI로 지정합니다.

③ Window | Navigation | Bake를 선택하여 NavMesh를 rebake할 수도 있습니다.

 

1.1 VR 캔버스 프리팹 만들기

 

다른 프로젝트 전반에 걸쳐 예제에 사용할 수 있도록 기본 VR 캔버스 프리팹을 만들고자 다음과 같이 새 월드 공간 XR UI 캔버스를 만듭니다.

① Hierachy 창에서 GameObject | XR | UI Canvas 메뉴를 선택하여 Canvas 추가하면 장면 창에 새 캔버스를 추가됩니다 (GameObject | XR | UI Canvas).

② 추가된 Canvas를  Default Canvas의 이름을 변경합니다.

③ Inspector창에서 Render Mode를 World Space로 설정합니다.

④ Inspector창에서 Render Mode-> Event Camera 는 XR Origin의 Main Camera를  설정합니다.

 

캔버스에 UI 요소를 배치하는 데 사용되는 Rect Transform 컴포넌트는 그래프 용지의 선과 같이 캔버스 자체에서 그리드 시스템을 정의합니다. 

① Inspector창에서  Rect Transform의 Width를 1000으로, Height를 750으로 설정합니다.

② Scale에서 X, Y, Z를 각각 0.001, 0.001, 0.001로 설정합니다. 이것은 월드 공간 단위의 캔버스 단위 중 하나의 크기입니다.

③ Rect Transform에서 Pos X, Pos Y 및 Pos Z를 각각 0, 1.5 및 0으로 설정하여 캔버스를 지면 위의 중앙에 배치합니다. 

기본 캔버스 범위의 Inspector 창

빈 캔버스는 씬(scene) 창에서 얇은 윤곽선 직사각형으로 렌더링됩니다. 캔버스를 쉽게 볼 수 있도록 하위 패널 요소(반투명 흰색 배경)를 추가합니다.

①  Hierachy 창에서 Default Canvas를 선택한 상태에서 마우스 오른쪽 버튼을 클릭하고 UI | Panel 선택합니다.  Panel이  Default Canvas의 하위에 생성합니다.

② Panel이 선택된 상태에서 Inspector창에  Rect Transform 창의 왼쪽 상단에 Anchor Presets 버튼을 선택하여 Anchor Presets 대화 상자를 엽니다..

③ Alt 키를 누른 상태에서  stretch-strech를 선택하여 Anchors 위치를 설정합니다 또한   Shift 키를 누른 상태에서 stretch-strech를 선택하여 Pivot 설정합니다.

 

Panel 하위에 Text 요소를 추가합니다.

① Hierachy 창에서Panel을 선택한 상태에서 마우스 오른쪽 버튼을 클릭하고 UI | Text 선택합니다

② Inspector창에서 Rect Transform 창의 왼쪽 상단에있는 Anchor Presets 위젯을 사용하여 Anchors 설정을 stretch-stretch로 설정합니다.

③ 또한 Anchor Presets 상자가 열려있는 동안 Alt 키를 사용하여 Position 설정을 stretch-stretch로 설정합니다.

④ Text를 선택한 상태에서 Font Size를 72로 설정하여 텍스트 크기를 크게합니다.

⑤ Text를 선택한 상태에서 Alignment을 Center Align 및 Middle Align로 설정하여 Text를 패널 중앙에 배치합니다. 

예제 전체에서 재사용 할 수 있는 프리팹으로 만듭니다.

①  Project 창에 Assets/Prefabs 폴더를 만들고, Default Canvas 객체를 Assets / Prefabs 폴더로 드래그앤드롭합니다.  

 

② Hierarchy 창에서 Default Canvas 인스턴스를 삭제합니다 (마우스 오른쪽 버튼을 클릭하고 Delete 선택).

 

1.2 기본 메인 카메라 초기화

월드 공간 캔버스의 경우 인스턴스화된 캔버스에 메인 카메라에 대한 참조가 있을 수 있지만 Default Canvas 프리팹에서는 이 참조되지 않아서 Default Canvas 프리팹을 씬(scene)으로 끌 때 카메라를 다시 할당해야 합니다.

따라서 다음은 재 메인 카메라를 사용할 것으로 가정하여 실행 시 자동으로 처리되도록 하는 스크립트를 작성합니다.

① 편집을 위해 Default Canvas 프리 팹을 엽니 다 ( Project 창의 Assets/Prefabs / 폴더에서 Default Canvas를 두 번 클릭합니다.)

② 루트 Default Canvas를 선택합니다.

③ Default Canvas객체에 AssignCanvasEventCamera라는 새 C# 스크립트를 만듭니다.

 

AssignCanvasEventCamera.cs

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

public class AssignCanvasEventCamera : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        Canvas canvas = GetComponent<Canvas>();
        if (canvas && canvas.worldCamera == null)
        {
            canvas.worldCamera = Camera.main;
        }
    }
}