Unity VR 튜토리얼 19편

🎨 VR 게임 UI 디자인 개선 – 시각적으로 예쁜 HUD와 애니메이션 적용하기

Meta Quest / PCVR 대응
Unity XR Interaction Toolkit + TextMeshPro 기반
단순한 UI를 **몰입형 HUD(Head-Up Display)**로 업그레이드하는 방법

---

🧠 "VR 게임에서 UI는 HUD가 전부다"

PC 게임에서는 UI가 화면 한쪽에 붙어 있어도 플레이에 지장이 없습니다.
하지만 VR 게임은 다릅니다.

• 화면 어디를 보느냐
• 플레이어의 시야를 가리지 않느냐
• UI가 자연스럽게 움직이느냐
  이 모든 것이 게임 몰입감과 직결됩니다.

이번 튜토리얼에서는 단순 텍스트 UI를 벗어나
시선 추적형 HUD + 부드러운 애니메이션 효과까지 구현합니다.

---

✅ 목표 기능

기능설명

플레이어 시야 앞에 HUD 고정	카메라에 따라 UI 이동
점수 / 체력 / 타이머 표시	TextMeshPro HUD 구성
UI 애니메이션 적용	Scale, Fade 효과 추가
중요 이벤트 시 강조 표시	색상 변환 및 크기 변화

 

---

🛠 Step 1. HUD Canvas 만들기

1. Canvas 생성 → Render Mode: World Space
2. 크기: Width: 1000, Height: 500
3. 카메라 앞에 배치:
   • Position: (0, 0, 2) (플레이어 기준 2m 앞)
4. CanvasScaler → UI Scale Mode: Scale With Screen Size

---

🧷 Step 2. 카메라에 HUD 고정 스크립트

📄 HUDFollowCamera.cs

using UnityEngine;

public class HUDFollowCamera : MonoBehaviour
{
    public Transform vrCamera;
    public float distance = 2f;
    public Vector3 offset;

    void LateUpdate()
    {
        transform.position = vrCamera.position + vrCamera.forward * distance + offset;
        transform.rotation = Quaternion.LookRotation(transform.position - vrCamera.position);
    }
}

✅ vrCamera에 Main Camera(XR Origin 하위) 연결

---

🖋 Step 3. HUD UI 구성

HUD 안에 표시할 항목:

• 점수 (ScoreText)
• 체력 (HealthText)
• 타이머 (TimerText)

📄 TextMeshPro 예시:

Score: 0
Health: 100%
Time: 02:35

---

✨ Step 4. UI 애니메이션 추가

📄 UIAnimator.cs

using UnityEngine;

public class UIAnimator : MonoBehaviour
{
    public AnimationCurve scaleCurve;
    public float duration = 0.5f;

    public void PlayScaleAnimation()
    {
        StopAllCoroutines();
        StartCoroutine(ScaleRoutine());
    }

    private System.Collections.IEnumerator ScaleRoutine()
    {
        float time = 0;
        Vector3 originalScale = transform.localScale;

        while (time < duration)
        {
            float scale = scaleCurve.Evaluate(time / duration);
            transform.localScale = originalScale * scale;
            time += Time.deltaTime;
            yield return null;
        }

        transform.localScale = originalScale;
    }
}

• scaleCurve 예시: (0, 1) → (0.5, 1.3) → (1, 1)
• 이벤트 발생 시 UI 커짐 → 부드럽게 원래 크기로 돌아감

---

🔴 Step 5. 이벤트와 연동

📄 GameEventsUI.cs

using UnityEngine;
using TMPro;

public class GameEventsUI : MonoBehaviour
{
    public TextMeshProUGUI scoreText;
    public UIAnimator scoreAnimator;
    private int score;

    public void AddScore(int amount)
    {
        score += amount;
        scoreText.text = "Score: " + score;
        scoreAnimator.PlayScaleAnimation();
    }
}

• 점수가 올라가면 → 숫자가 변하고 애니메이션 재생
• 체력 감소나 타이머 경고도 같은 방식으로 적용 가능

---

🎯 Step 6. 색상 강조 효과

using UnityEngine;
using TMPro;

public class UIColorEffect : MonoBehaviour
{
    public TextMeshProUGUI text;
    public Color normalColor = Color.white;
    public Color alertColor = Color.red;
    public float flashDuration = 0.2f;

    public void FlashAlert()
    {
        StartCoroutine(FlashRoutine());
    }

    private System.Collections.IEnumerator FlashRoutine()
    {
        text.color = alertColor;
        yield return new WaitForSeconds(flashDuration);
        text.color = normalColor;
    }
}

}
체력이 낮아질 때 빨간색으로 깜빡이게 적용

📘 최종 구조 예시

XR Origin
 ├─ Main Camera
 │    └─ HUD Canvas
 │         ├─ ScoreText (UIAnimator.cs)
 │         ├─ HealthText
 │         └─ TimerText
 ├─ HUDFollowCamera.cs
 └─ GameEventsUI.cs

---

💡 확장 아이디어

기능설명

아이콘 HUD 추가	체력바, 방패 아이콘, 총알 수
투명도 조절	필요 없을 때 HUD 자동 숨김
시야 추적 미니맵	카메라 회전과 함께 움직이는 3D 미니맵
음성 안내와 결합	UI 변동 시 TTS 안내 추가

---

📜 마무리

이번 19편에서는
VR 게임에 필수적인 HUD 시스템을

• 시선 추적
• 애니메이션 효과
• 색상 강조
  까지 적용했습니다.

다음 20편에서는
**"VR 게임 타이머 & 미션 시스템 구현"**을 다뤄서
HUD와 실시간으로 연동하는 방법을 알려드리겠습니다.