HTML5 Canvas 및 Web Audio API를 활용한 제로-에셋 기반 물리 퍼즐 엔진 구현

Context

외부 이미지 및 사운드 파일 로딩으로 인한 지연 시간(Latency) 발생 가능성을 차단해야 하는 Game Jam 환경의 제약 조건 존재. Phaser 4와 Matter.js 기반의 물리 시뮬레이션 내에서 동적인 중력 변화와 논리 게이트 시스템을 효율적으로 통합해야 하는 과제 직면.

Technical Solution

• 외부 에셋 의존성 제거를 위해 HTML5 Canvas 기반의 Dynamic Vector Asset Generation 방식을 도입한 런타임 텍스처 생성 구조 설계
• Web Audio API 기반의 SoundSynth.js 클래스를 구현하여 파일 로딩 없이 실시간 주파수 변조를 통한 인터랙티브 사운드 합성 체계 구축
• Matter.js의 기본 물리 동작을 오버라이드하여 GravityZone 내 개체에만 개별 물리력을 적용하는 Local Gravity Override 로직 구현
• Phaser의 Texture Cache 쿼리를 통해 Vite Hot Reload 시 발생하는 메모리 내 중복 텍스처 생성 및 키 충돌 문제를 해결한 리소스 관리 전략 채택
• AND, NOT, IDENTITY 논리 게이트 상태를 평가하여 물리적 Forcefield 및 중력 상태를 제어하는 이벤트 기반 PuzzleSystem.js 설계