3.7 KiB
3.7 KiB
Agent: Arena Picker
1. 프로젝트 정의
Arena Picker는 Phaser 3 게임 엔진과 Vite 번들러를 기반으로 구축된 대규모 팀 전투 시뮬레이션 웹 애플리케이션입니다. 사용자가 입력한 여러 명의 참가자(닉네임)를 바탕으로 각 참가자를 하나의 팀으로 설정하고, 지정된 인원만큼의 캐릭터를 생성하여 자동 전투를 시뮬레이션합니다.
2. 프로젝트 전체 구조 (Directory Tree)
├── index.html # 메인 HTML 진입점 및 UI 레이아웃
├── package.json # 프로젝트 의존성 및 스크립트 정의 (Phaser, Vite)
├── agent.md # 프로젝트 개요 및 기능 정의 (본 문서)
├── CONTEXT.md # 상세 개발 가이드 및 로직 설명
├── todo.md # 작업 내역 및 잔여 이슈 관리
├── public/ # 정적 리소스 (게임 에셋)
│ └── assets/
│ └── characters/ # 20종 이상의 캐릭터 스킨 및 투사체 에셋
│ ├── archer/, armored-axeman/, armored-orc/, ... (중략)
│ └── wizard/ # 각 폴더 내 애니메이션 시트 및 이펙트 포함
└── src/ # 소스 코드 root
├── main.js # Phaser 게임 인스턴스 생성 및 초기화
├── constants.js # 전역 물리/UI 상수 통합 관리 (줌, 카메라 속도 등)
├── styles.css # UI 스타일링 (스코어보드, 승리 배너 애니메이션)
├── game/ # 게임 로직 모듈
│ ├── ArenaScene.js # 핵심 게임 씬 (카메라 추적, 승리 판정, 스코어보드 제어)
│ ├── arenaRenderer.js# 경기장 바닥 및 격자 렌더링
│ ├── combat.js # 전투 AI 및 피격 판정 로직
│ ├── combatSettings.js# 전투 속도 및 이동 배율 관리
│ ├── fighterAssets.js# 스프라이트 시트 로드 및 애니메이션 생성
│ ├── fighterFactory.js# 캐릭터 객체 및 HUD 생성
│ ├── fighterManifest.js# 캐릭터 스킨 데이터 정의 (20종 캐릭터 상세 설정)
│ ├── fighterSelection.js# 무작위 캐릭터 스킨 선택 로직
│ └── matchSetup.js # 닉네임 기반 팀 구성 및 스폰 좌표 계산
└── ui/
└── matchForm.js # 참가자 입력 폼 및 팀 설정 UI 제어
3. 핵심 기능
- 닉네임 기반 팀 스폰: 입력된 각 닉네임을 독립된 팀으로 인식하고, 설정된 인원(1~100명)만큼 분신 캐릭터를 소환합니다.
- 지능형 카메라 시스템:
- 자동 전투 관전: 화면 확대 시 인접한 교전 중인 캐릭터 쌍을 찾아 부드럽게 추적(Lerp)합니다.
- 미니맵 연동: 줌 인 상태에서 전장 전체 상황과 현재 뷰포트 위치를 미니맵에 가이드라인으로 표시합니다.
- 역동적인 전투 연출:
- 캐릭터별 고유 공격 방식(근접, 투사체, 마법) 및 애니메이션.
- 치명타(Critical) 발생 시 화면 흔들림 효과 및 대미지 가중치 적용.
- 실시간 경기 중계 UI: 상단 좌/우 영역에 팀별 현재 생존 인원을 실시간으로 표시하며, 승리 시 대형 배너로 결과를 알립니다.
4. 기술 사양
- Framework: Phaser 3.90.0 (Arcade Physics 기반)
- Build Tool: Vite 7.1.12
- UI Logic: Vanilla JS & CSS (Flexbox/Grid 활용)
5. 관련 문서
- CONTEXT.md: 상세 개발 가이드 및 핵심 로직 설명 (필독)
- todo.md: 작업 내역 및 잔여 이슈 관리