# 타이틀 화면 설정 가이드

## 🎮 완성 이미지

타이틀 화면 구성:
1. **배경**: 가면 쓴 캐릭터 이미지 (페이드 인)
2. **로고**: "Thaw the Mask" 타이틀 (둥둥 떠다니는 애니메이션)
3. **시작 버튼**: "게임 시작" 버튼 (클릭 시 Stage 1로 이동)

---

## 📋 Unity 에디터 설정

### 1단계: 새 씬 만들기

1. **Project 창에서 Assets/Scenes 폴더 우클릭**
   - Create → Scene
   - 이름: `TitleScreen`

2. **TitleScreen.unity 더블클릭해서 열기**

---

### 2단계: Canvas 설정

1. **Hierarchy 우클릭 → UI → Canvas**
   - 이름: `TitleCanvas`

2. **Canvas 설정**:
   - Canvas Scaler 컴포넌트에서:
     - UI Scale Mode: **Scale With Screen Size**
     - Reference Resolution: **1920 x 1080**
     - Match: **0.5** (Width와 Height 중간)

3. **EventSystem 자동 생성 확인**
   - Hierarchy에 EventSystem이 있어야 버튼 클릭 가능

---

### 3단계: 배경 이미지 추가

1. **Hierarchy에서 TitleCanvas 우클릭 → UI → Image**
   - 이름: `Background`

2. **Background 설정**:
   - **Rect Transform**:
     - Anchor Presets: **Stretch (양쪽 끝 아이콘)** - Alt 누르고 클릭
     - Left, Top, Right, Bottom: 모두 **0**
   - **Image 컴포넌트**:
     - Source Image: `MainBackground` 드래그 (Assets/Sprites/UI/MainBackground.png)
     - Preserve Aspect: ✓ (체크)

3. **Canvas Group 추가** (페이드 인 효과용):
   - Background 선택 → Add Component → **Canvas Group**
   - Alpha: **0** (시작 시 투명)

---

### 4단계: 타이틀 로고 추가 (텍스트)

1. **Hierarchy에서 TitleCanvas 우클릭 → UI → Text - TextMeshPro**
   - 이름: `TitleLogo`

2. **TitleLogo 설정**:
   - **Rect Transform**:
     - Anchor Presets: **Top Center**
     - Pos X: **0**
     - Pos Y: **-250** (화면 상단에서 아래로)
     - Width: **1600**
     - Height: **400**
   - **TextMeshPro 컴포넌트**:
     - Text: **"Thaw the Mask"**
     - Font Asset: `Griun_PolFairness-Rg SDF` (한글 폰트)
     - Font Size: **120** (매우 크게)
     - Alignment: **Center & Middle**
     - Color: 원하는 색상 (예: 흰색 또는 밝은 파란색)

3. **Canvas Group 추가**:
   - Add Component → **Canvas Group**
   - Alpha: **0**

4. **둥둥 떠다니는 애니메이션 추가**:
   - Add Component → `FloatingAnimation`
   - Float Amplitude: **20** (위아래 움직임 크기)
   - Float Speed: **1** (속도)

---

### 5단계: 시작 버튼 추가

1. **Hierarchy에서 TitleCanvas 우클릭 → UI → Button - TextMeshPro**
   - 이름: `StartButton`
   - (TMP Importer 창 뜨면 **Import TMP Essentials** 클릭)

2. **StartButton 설정**:
   - **Rect Transform**:
     - Anchor Presets: **Bottom Center**
     - Pos X: **0**
     - Pos Y: **150** (화면 하단에서 위로)
     - Width: **300**
     - Height: **80**

3. **Button 컴포넌트 설정**:
   - Transition: **Color Tint**
   - Normal Color: 흰색
   - Highlighted Color: 밝은 회색
   - Pressed Color: 어두운 회색

4. **버튼 텍스트 수정**:
   - Hierarchy에서 StartButton → Text (TMP) 선택
   - **TextMeshPro 컴포넌트**:
     - Text: **게임 시작**
     - Font Size: **36**
     - Alignment: **Center & Middle**
     - Color: 검은색

5. **Canvas Group 추가** (StartButton에):
   - Add Component → **Canvas Group**
   - Alpha: **0**

---

### 6단계: 게임 종료 버튼 추가

1. **Hierarchy에서 StartButton 복제**:
   - StartButton 우클릭 → Duplicate
   - 이름: `QuitButton`

2. **QuitButton 설정**:
   - **Rect Transform**:
     - Pos Y: **50** (Start 버튼 아래로)

3. **버튼 텍스트 수정**:
   - QuitButton → Text (TMP) 선택
   - Text: **"게임 종료"** (또는 "QUIT")
   - Font Size: **36**

4. **QuitButton 컴포넌트 추가**:
   - QuitButton 선택 → Add Component → `QuitButton`
   - (자동으로 게임 종료 기능 연결됨)

5. **Canvas Group 추가** (QuitButton에):
   - Add Component → **Canvas Group**
   - Alpha: **0**

---

### 7단계: TitleScreenManager 설정

1. **Hierarchy에서 빈 GameObject 생성**:
   - 우클릭 → Create Empty
   - 이름: `TitleScreenManager`

2. **TitleScreenManager 컴포넌트 추가**:
   - Add Component → `TitleScreenManager`

3. **Inspector에서 연결**:
   - **Background Canvas Group**: Background 드래그
   - **Logo Canvas Group**: TitleLogo 드래그
   - **Button Canvas Group**: StartButton의 Canvas Group 드래그
   - **Quit Button Canvas Group**: QuitButton의 Canvas Group 드래그
   - **Start Button**: StartButton 드래그
   - **First Level Scene Name**: `StageSelect` (텍스트 입력)

4. **애니메이션 타이밍 조절** (선택사항):
   - Background Fade Duration: 1초
   - Logo Fade Delay: 0.5초
   - Logo Fade Duration: 1.5초
   - Button Fade Delay: 1초
   - Button Fade Duration: 1초

---

### 7단계: Build Settings에 씬 추가

1. **File → Build Settings**

2. **Add Open Scenes** 클릭 (TitleScreen 열린 상태에서)

3. **씬 순서 조정**:
   - **TitleScreen** (index 0) - 맨 위로 드래그
   - Stage1 (index 1)
   - Stage2 (index 2)

4. **Close**

---

### 8단계: 이미지 Import 설정 (배경만)

Unity가 이미지를 인식하려면 Import 설정이 필요합니다.

1. **Project 창에서 Assets/Sprites/UI 폴더 열기**

2. **MainBackground.png 선택**:
   - Inspector에서:
     - Texture Type: **Sprite (2D and UI)**
     - Apply 클릭

(로고는 이제 텍스트로 표시되므로 이미지 설정 불필요)

---

## 🎮 테스트하기

1. **TitleScreen.unity 열기**

2. **Play 버튼**

3. **확인 사항**:
   - ✓ 배경이 서서히 페이드 인
   - ✓ 타이틀 로고가 나타나면서 둥둥 떠다님
   - ✓ "게임 시작" 버튼이 나타남
   - ✓ 버튼 클릭 시 Stage 1로 이동
   - ✓ 아무 키나 눌러도 게임 시작 (선택사항)

---

## 🎨 커스터마이징

### 로고 움직임 조절
- TitleLogo 선택 → FloatingAnimation 컴포넌트
- **Float Amplitude**: 크게 하면 더 많이 움직임
- **Float Speed**: 크게 하면 더 빠르게 움직임

### 페이드 인 속도 조절
- TitleScreenManager 선택
- 각 Duration 값을 조절 (초 단위)

### 버튼 스타일 변경
- StartButton 선택 → Button 컴포넌트
- Normal/Highlighted/Pressed Color 변경

### 배경 어둡게/밝게
- Background 선택 → Image 컴포넌트
- Color의 RGB 값 조절 (255 = 밝음, 128 = 어두움)

---

## 🐛 문제 해결

### 이미지가 안 보인다면?
- Assets/Sprites/UI 폴더에 이미지 파일이 있는지 확인
- 이미지 선택 → Inspector → Texture Type: **Sprite (2D and UI)** → Apply

### 버튼이 안 눌린다면?
- Hierarchy에 EventSystem이 있는지 확인
- StartButton의 Canvas Group → Interactable: ✓
- StartButton의 Canvas Group → Blocks Raycasts: ✓

### Stage 1로 안 넘어간다면?
- Build Settings에 Stage1.unity가 추가되어 있는지 확인
- TitleScreenManager → First Level Scene Name: `Stage1` (정확히 입력)

### 로고가 안 떠다닌다면?
- TitleLogo에 FloatingAnimation 컴포넌트가 있는지 확인
- Play 모드에서 확인 (Edit 모드에서는 안 움직임)

---

## 🎉 완성!

이제 게임을 시작하면:
1. 타이틀 화면이 먼저 뜹니다
2. 아름다운 페이드 인 효과와 함께 로고가 나타납니다
3. 게임 시작 버튼을 누르면 Stage 1로 이동합니다

**다음 단계:**
- 배경 음악 추가
- 옵션/설정 버튼 추가
- 스테이지 선택 화면 추가
