45 lines
3.0 KiB
Markdown
45 lines
3.0 KiB
Markdown
# Context: Arena Picker 개발 가이드
|
|
|
|
## 1. 모듈별 상세 역할
|
|
|
|
### [Core Engine]
|
|
- **`src/main.js`**: Phaser 게임의 전역 설정(Physics, Scale, Canvas Parent)을 담당하며, `ArenaScene`을 인스턴스화합니다.
|
|
- **`src/constants.js`**: 게임 내 모든 튜닝 수치를 관리합니다.
|
|
- `SPECTATOR_CAMERA_LERP`: 카메라 추적의 부드러움 정도.
|
|
- `MINIMAP_VIEWPORT_SIZE`: 미니맵의 고정 픽셀 크기.
|
|
- `ARENA_SIZE`: 경기장 전체 크기 (GRID * TILE).
|
|
|
|
### [Game Logic - src/game/]
|
|
- **`ArenaScene.js`**:
|
|
- `update()`: 매 프레임 생존 팀을 체크하고 스코어보드를 갱신합니다.
|
|
- `observeCombat()`: 캐릭터가 공격할 때 카메라가 주목할 "관전 대상"을 설정합니다.
|
|
- `updateMinimapViewportFrame()`: 주 카메라의 이동에 맞춰 미니맵 가이드 사각형을 렌더링합니다.
|
|
- **`matchSetup.js`**:
|
|
- 입력된 닉네임을 순회하여 `team` 객체를 생성하고, 요청된 인원만큼 캐릭터 데이터를 복제 배치합니다.
|
|
- **`combat.js`**:
|
|
- `updateFighter()`: 가장 가까운 적을 찾아 이동하거나 공격하는 유닛 AI의 핵심입니다.
|
|
- `projectilePathHitsDefender()`: 투사체가 대상을 스쳐 지나가지 않도록 궤적 검사를 수행합니다.
|
|
|
|
### [Assets & UI]
|
|
- **`fighterManifest.js`**: 20여 종의 캐릭터 스킨 정보가 담긴 딕셔너리입니다. `type` (melee/projectile/instant-spell)에 따라 전투 메커니즘이 결정됩니다.
|
|
- **`matchForm.js`**: `index.html`의 입력을 읽어 `ArenaScene`에 매치 구성을 전달합니다.
|
|
|
|
## 2. 주요 로직 구현 세부 사항
|
|
|
|
### 지능형 카메라 추적 (Lerp & Jittering 방지)
|
|
카메라가 소수점 단위의 평균 좌표를 즉시 따라가면 화면이 떨려 보일 수 있습니다. 이를 방지하기 위해:
|
|
1. 목표 좌표(`targetX, targetY`)를 `Math.round()`로 정수화합니다.
|
|
2. 현재 카메라 위치에서 목표 지점까지 매 프레임 `0.1`의 배율로 거리를 좁혀나가는 `Lerp` 연산을 수행합니다.
|
|
```javascript
|
|
this.cameras.main.scrollX += (targetX - this.cameras.main.midPoint.x) * SPECTATOR_CAMERA_LERP;
|
|
```
|
|
|
|
### 미니맵 가이드라인
|
|
미니맵은 전장 전체를 축소하여 보여주는 독립된 카메라입니다. 주 카메라가 비추는 영역을 계산하여 미니맵 위에 사각형(`graphics`)을 그려줍니다.
|
|
- `camera.displayWidth / zoom` 등을 이용하여 현재 월드에서 보이는 실제 영역 크기를 계산합니다.
|
|
|
|
## 3. 개발 및 유지보수 규칙
|
|
- **신규 캐릭터 추가**: `public/assets/characters/`에 에셋 배치 후 `fighterManifest.js`에 정의를 추가하면 즉시 게임에 반영됩니다.
|
|
- **물리 수치 조정**: 캐릭터의 속도나 사거리 등은 `src/constants.js` 또는 `fighterManifest.js` 내 개별 설정을 통해 변경하십시오.
|
|
- **DOM 접근**: 성능을 위해 `ArenaScene`은 상단 스코어보드 등 필요한 시점에만 최소한으로 DOM에 접근합니다.
|