건국대학교 메타버스 웹 게임 🎮

Phaser.js 기반의 실시간 멀티플레이어 메타버스 + 리듬게임

건국대학교 캠퍼스를 배경으로 한 2D 메타버스 게임으로, 실시간 소셜 기능과 K-POP 리듬게임을 결합한 웹 기반 게임입니다.

🚀 주요 특징

🌍 메타버스 월드

• 건국대학교 캠퍼스 맵: 실제 캠퍼스를 모티브로 한 2D 탑다운 월드
• 실시간 멀티플레이어: 최대 다수 플레이어 동시 접속
• 소셜 상호작용: 실시간 채팅, 이모티콘, 말풍선 시스템

🎵 리듬게임 모드

• 3가지 K-POP 트랙: 에스파 - Supernova, 라이즈 - Get A Guitar 등
• 타이밍 기반 게임플레이: 정확한 타이밍으로 노트 히트
• AI 대전 시스템: 가상 상대와의 실시간 점수 경쟁

📱 크로스 플랫폼 지원

• 데스크탑: 키보드 방향키 + 기능키 조작
• 모바일: 가상 조이스틱 + 터치 인터페이스

🛠️ 기술 스택

Frontend

• 게임 엔진: Phaser.js 3.80.1 - 완전한 2D 게임 프레임워크
• 언어: TypeScript 5.2.2 - 타입 안정성 보장
• 빌드 도구: Vite 5.2.0 - 고속 개발 서버 및 번들링
• UI 플러그인: Phaser3-rex-plugins - 가상 조이스틱 지원

Backend & Communication

• 실시간 통신: STOMP over WebSocket
• 서버: wss://api.getaguitar.site/ws
• CDN: AWS CloudFront - 게임 에셋 전역 배포

Game Engine Features

• 물리 엔진: Phaser Arcade Physics - 2D 충돌 감지 및 이동
• 타일맵: Tiled JSON 포맷 - 레벨 디자인 도구 연동
• 애니메이션: 스프라이트시트 기반 캐릭터 애니메이션
• 오디오: Web Audio API - 고품질 사운드 재생

🎯 게임플레이

메타버스 모드

1. 캐릭터 생성: 닉네임 입력 후 게임 참여
2. 자유 탐험: 건국대 캠퍼스 맵 내에서 자유롭게 이동
3. 소셜 활동: 다른 플레이어와 채팅 및 이모티콘 교류
4. 미니게임: 맵 내 특정 오브젝트와 상호작용

리듬게임 모드

1. 곡 선택: 3가지 K-POP 트랙 중 선택
2. 노트 플레이: 화면 상단에서 떨어지는 노트를 정확한 타이밍에 히트
3. 점수 경쟁: AI 상대와 실시간 점수 비교
4. 결과 확인: 게임 종료 후 최종 점수 표시

🏗️ 아키텍처

씬 관리 시스템

로딩 화면 → 닉네임 입력 → 메인 월드 → 리듬게임

실시간 통신 구조

• WebSocket STOMP: 브라우저 ↔ 서버 실시간 양방향 통신
• 상태 동기화: 플레이어 위치, 애니메이션, 채팅 메시지
• 이벤트 기반: Pub/Sub 패턴으로 확장 가능한 구조

렌더링 파이프라인

• 멀티 레이어: 배경, 오브젝트, 캐릭터, UI 분리 렌더링
• 카메라 추적: 플레이어 중심 스무스 카메라 이동
• 최적화: 뷰포트 컬링 및 오브젝트 풀링

🚀 시작하기

개발 환경 설정

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

# 빌드
npm run build

프로젝트 구조

src/
├── scenes/          # 게임 씬들
├── assets/objects/  # 게임 오브젝트
├── constants/       # 상수 및 설정
├── utilities/       # 유틸리티 함수
└── main.ts         # 엔트리 포인트

🎨 에셋 및 리소스

그래픽 에셋

• 캐릭터 스프라이트: 32x32 픽셀 4방향 애니메이션
• 타일셋: 16x16 픽셀 모듈러 타일
• UI 요소: 팝업, 버튼, 말풍선 등

오디오 에셋

• BGM: K-POP 트랙 3곡 (MP3/OGG)
• 효과음: 게임 내 상호작용 사운드

🔧 주요 기능 구현

Phaser.js 활용

• 게임 루프: 60fps 렌더링 및 업데이트
• 물리 시뮬레이션: 캐릭터 이동 및 충돌 처리
• 이벤트 시스템: 사용자 입력 및 게임 이벤트 관리

실시간 멀티플레이어

• 상태 동기화: 플레이어 위치 실시간 업데이트
• 채팅 시스템: 즉석 메시지 전송 및 말풍선 표시
• 이모티콘: F1-F4 키로 감정 표현

리듬게임 엔진

• 타이밍 시스템: 밀리세컨드 단위 정확도
• 점수 계산: 히트/미스 기반 점수 시스템
• AI 대전: 랜덤 알고리즘 기반 가상 상대

🌟 기술적 혁신

• 하이브리드 장르: 메타버스와 리듬게임의 성공적 결합
• 웹 기반: 별도 설치 없이 브라우저에서 즉시 플레이
• 교육 콘텐츠: 실제 대학 캠퍼스를 게임 월드로 구현
• K-POP 연동: 한국 대중문화와 게임의 융합

---