14. 헤드업디스플레이(HUD) UI 만들기

HUD(Head Up Display)라는 용어는 조종사가 계기판을 내려다보면서 정보를 볼 수 있는 항공기에서 유래되었습니다.

Unity에서 HUD는 사용자의 시야에 떠 있는 캔버스 기반 UI로 구현되어 게임 플레이 장면을 오버레이할 수 있습니다.

일반적으로 HUD는 대화식 버튼이나 컨트롤을 제공하는 것보다 정보를 표시하는 데 더 효과적입니다.

 

바이저 HUD로 시작한 다음 패널이 사라지길 원할 때 페이드아웃으로 패널을 숨기는 스크립트를 추가해 봅니다.

 

1. 바이저 HUD 만들기

바이저 HUD의 경우 UI 캔버스가 장면의 카메라 객체에 연결되므로 머리를 움직일 때 캔버스가 머리 움직임에 반응하는 것처럼 보이지 않고 오히려 얼굴에 딱 붙는 것 같이 눈 앞에 투명 유리 바이저가 있는 헬멧을 착용하고 UI가 해당 바이저에 투영된 것과 같습니다. 이것이 VR에서는 괜찮은 상황이 있을 수 있지만 그렇지 않으면 몰입감이 깨질 수 있으며 일반적으로 바이저를 착용하는 것은 게임플레이의 일부일 때만 사용해야 합니다.

 

환영 메시지가 포함된 바이저 HUD를 만듭니다.

① Hierarchy 창에서 XR Origin 펼쳐서 Main Camera 를 선택합니다.

② Project 창에서 Assets/Prefabs에 있는 Default Canvas 프리팹을 Main Camera로 드래그앤드롭하여 자식이 되도록하고 이름을 Visor Canvas로 설정합니다.

③ Hierarchy 창에서 Visor Canvas를 선택하고 Inspector 창에서 Rect Transform 구성 요소의 Pos X, Pos Y 및 Pos Z 값을 각각 0, 0 및 1로 변경합니다.

④ Hierarchy 창에서 Visor Canvas를 펼치고 자식 Text 개체를 선택합니다.

⑤ Inspector 창에서 Text 값을 Welcome! My reality is your reality 로 입력합니다. (입력 텍스트 영역에 줄 바꿈(Enter)을 입력할 수 있습니다.)

⑥ Inspector 창에서 Horizontal Overflow 값을 Wrap으로 변경합니다.

⑦ Inspector 창에서 Color 를 파란색으로 설정합니다.

⑧ Hierarchy 창에서  Panel 개체를 선택하고 Inspector에서 Image 컴포넌트를 삭제/비활성화하여 텍스트만 표시되도록 합니다.

 

⑨ 장면을 저장하고 실행합니다.

2. 윈드실드 HUD 만들기

 

윈드실드 HUD는 바이저 HUD와 마찬가지로 게임 플레이를 오버레이하는 정보 패널이지만 헤드에는 부착되지 않습니다. 대신, 조종석에 앉아 있는 동안 차량에 부착된 것으로 생각할 수 있습니다. 머리를 자유롭게 움직이며 주위를 둘러볼 수 있습니다. HUD는 몸의 위치에 따라 움직이지 않지만, 탐색하거나 장면에서 다른 위치로 순간이동할 경우 함께 움직입니다.

 

간단한 윈드실드 HUD를 만들어 봅니다.

① Project 창에서 Default Canvas 프리팹을 Hierarchy 패널의 XR Origin로 드래그하여 XR Origin의 자식이되도록 합니다 (이번에는 카메라 아래 아님).

② 이름을 Windshield Canvas로 변경합니다.

③ Windshield Canvas를 선택한 상태에서 Rect Transform 의 Pos X, Pos Y 및 Pos Z 값을 각각 0, 1.5, 1로 설정합니다.

④  Windshield Canvas 하위의 Text를 선택한 상태에서 텍스트를 “Welcome! My reality is your reality.”로 변경합니다.

 

⑤ 장면을 저장하고 실행합니다

3. 캔버스 그룹을 사용하여 패널 숨기기

5초 후에 Welcome! My reality is your reality 메시지를 제거하는 스크립트를 작성해 봅니다.

시간이 되면 SetActive(false)를 호출하여 사라지게 할 수 있습니다. 그러나 대신 Canvas Group 구성 요소를 사용하여 더 부드러운 페이드 아웃 효과를 줄 것입니다.

 

① Hierarchy 창에서 XR Origin하위의 Windshield Canvas를 선택한 상태에서 Inspector 창의 Add Component 버튼을 클릭하여 Canvas Group 컴포넌트를 추가합니다 (또는 메인 메뉴에서 Component | Layout | Canvas Group 선택).

② Canvas Group에는 Alpha 매개 변수가 있습니다. 캔버스를 희미하게 하려면 값을 1과 0 사이의 값으로 변경합니다.

③  Windshield Canvas에 새 스크립트 HideAfterDelay를 추가합니다. (Add Component |

New Script로 이동하여 이름을 HideAfterDelay로 지정한 다음 Create And Add를 클릭합니다).

④ 편집할 스크립트를 엽니다.

HideAfterDelay.cs

public class HideAfterDelay : MonoBehaviour
{
   public float delayInSeconds = 5f;
   public float fadeRate = 0.25f;
   private CanvasGroup canvasGroup;
   private float startTimer;
   private float fadeoutTimer;
   void OnEnable()
   {
     canvasGroup = GetComponent<CanvasGroup>();
     canvasGroup.alpha = 1f;
     startTimer = Time.time + delayInSeconds;
     fadeoutTimer = fadeRate;
   }
 
   void Update()
   {
     // time to fade out?
     if (Time.time >= startTimer)
     {
        fadeoutTimer -= Time.deltaTime;
        // fade out complete?
        if (fadeoutTimer <= 0)
        {
           gameObject.SetActive(false);
        }
        else
        {
          // reduce the alpha value
          canvasGroup.alpha = fadeoutTimer / fadeRate;
        }
     }
   }
}

⑤ 장면을 저장하고 실행합니다