[Unity / C#] UI 제작 - HUD, 인벤토리

📋 목차

1. UI 배치
2. HUD_Panel 제작
3. Image import
4. 체력, 배고픔, 수분 UI
5. 퀵슬롯 UI
6. 최종 결과 (HUD)
7. Inventory_Panel 제작
8. 최종 결과 (HUD+Inventory)
9. 오늘의 배운 점
10. 다음 계획

---

🖥️ UI 배치

Unity에서 UI는 한 Canvas에 여러 Panel을 생성하게 됩니다.

1. Hierarchy 우클릭 → UI → Canvas
2. Canvas 우클릭 → UI → Panel
3. 이름 변경: "HUD_Panel" (Player 상태창)
4. Canvas 우클릭 → UI → Panel
5. 이름 변경: "InventoryPanel" (인벤토리창)

상단에서 2D를 선택하여 편집하기 편하게 함

---

🖥️ HUD_Panel 제작

• 구조는 다음과 같습니다.

HUD_Panel
    ├── HealthBar (빈 GameObject)
    │   ├── Background_Ring (Image)
    │   ├── Fill_Ring (Image)
    │   ├── TEXT (Text) - HP
    │   └── ValueText (Text)
    ├── FoodBar (빈 GameObject)
    │   ├── Background_Bar (Image)
    │   ├── Fill_Bar (Image)
    │   ├── TEXT (Text) - HUNGER
    │   └── ValueText (Text)
    └── WaterBar (빈 GameObject)
        ├── Background_Bar (Image)
        ├── Fill_Bar (Image)
        ├── TEXT (Text) - HYDRATION
        └── ValueText (Text)

---

🖼️ Image import

1. 제작한 이미지를 Project창에 드래그 앤 드롭
2. 해당 Image를 클릭하여 Inspector창
   • Texture Type: Sprite (2D and UI)
   • Sprite Mode: Single
   • Pixels Per Unit: 100
   • FilterMode: Bilinear
   • Format: RGBA 32 bit (투명도 때문)
3. Apply 클릭
4. UI에 적용
   • Image 컴포넌트의 Source Image에 드래그앤드롭

---

🎨 체력, 배고픔, 수분 UI

• 실제 게임처럼 값에 따라 게이지가 찼다가 줄어드는 효과가 가능함

1. Circle
   • Source Image에 만들어둔 링 이미지를 넣음
   • Image Type: Filled
   • Fill Method: Radial 360
   • Fill Origin: Top
2. Bar
   • Source Image에 만들어둔 바 이미지를 넣음
   • Image Type: Filled
   • Fill Method: Horizontal
   • Fill Origin: Left

---

🎨 퀵슬롯 UI

1. UI 제작

• QuickSlots 제작
  

2. Prefab 생성

• 만든 QuickSlot을 Project창으로 드래그 앤 드롭
  

3. QuickSlotPanel 제작

• QuickSlots에 QuickSlotPanel 추가 후 Horizontal Layout Group 컴포넌트 추가
• Horizontal Layout Group은 자동으로 가로로 정렬되게 함
  

4. Prefab 적용

• quickSlotPanel에 만든 QuickSlot을 드래그 앤 드롭 하여 추가
• Horizontal Layout Group의Padding으로 간극 조절 가능
  

---

🎮 최종 결과 (HUD)

HUD를 적용한 인게임 화면입니다. HUD 특성상 모든 UI Background의 Alpha값을 200으로 조정했습니다.

---

🖥️ Inventory_Panel 제작

HUD를 만든 김에 인벤토리 UI도 제작해보겠습니다.
이전에 제작했던 QuickSlot Prefab의 이름을 UI_Slot으로 이름을 바꾸고 재사용 해볼게요.

• 구조는 다음과 같습니다.

Inventory_Panel
    ├── Background (Image)
    └── InventorySlotPanel (빈 GameObject)
        ├── Slot_1 (UI_Slot)
        ├── Slot_2 (UI_Slot)
        ├── ... 
        └── Slot_21 (UI_Slot)

InventorySlotPanel

인벤토리 슬롯을 배치하는 Panel 입니다. Grid Layout Group 컴포넌트를 추가하고, Slot을 드래그 앤 드롭합니다.

---

🎮 최종 결과 (HUD+Inventory)

Inventory를 적용한 인게임 화면입니다. HUD와 함께 뜨는 것이 보입니다.

---

📚 오늘의 배운 점

• 이미지 임포트
• 게이지 효과 (UI)
• Prefab 제작
• Horizontal Layout Group, Grid Layout Group 활용

---

🎯 다음 계획

다음 글에서는:

1. Input을 이용한 위젯띄우기