arena/CONTEXT.md

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 연산을 수행합니다.

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에 접근합니다.