피드로 돌아가기
Dev.toFrontend
원문 읽기
Game Engine 없이 Canvas 2D와 TS로 구현한 60fps 대규모 인터랙티브 샌드박스
I Built a Sandbox for Neal.fun's Cursor Camp — Here's What Happened
AI 요약
Context
기존 Cursor Camp의 휘발성 환경을 극복하고 영속성과 인터랙션이 강화된 가상 공간 구축 필요성 제기. 외부 에셋 의존도를 낮추고 브라우저 네이티브 성능을 극대화하여 끊김 없는 사용자 경험 제공을 목표로 설정.
Technical Solution
- Canvas 2D 및 SVG 기반 렌더링 파이프라인 설계를 통한 외부 Game Engine 의존성 제거
- 5단계 Movement State Machine(idle → accelerate → cruise → decelerate → overshoot) 적용으로 AI 캠퍼의 자연스러운 이동 구현
- 수학적 알고리즘 기반 Procedural Generation 방식을 통한 8,000×5,000 픽셀 규모의 대형 월드 생성
- 화면 가장자리 진입 시에만 뷰포트를 이동시키는 Dead-zone Camera System 도입으로 대규모 맵에서의 사용자 방향 감각 상실 방지
- 11개의 독립적 사운드 소스와 거리 기반 페이드 효과를 적용한 Spatial Audio 시스템 구축
- Particle System을 이용한 동적 날씨 변화 및 풍향 변수를 반영한 환경 렌더링 최적화
실천 포인트
- 대규모 캔버스 렌더링 시 전체 리렌더링 대신 변경된 영역만 업데이트하는 최적화 전략 검토 - AI 개체 이동 구현 시 단순 좌표 변경 대신 가속/감속 단계가 포함된 State Machine 도입 고려 - 뷰포트가 월드 크기보다 훨씬 작을 때 사용자 인지 부하를 줄이는 Dead-zone 기반 카메라 로직 적용