지그재그, 웹 게임 개발 비하인드 스토리 공개!
by DD
7개월 전
조회수 22
React, TypeScript, Next.js 기반 웹 환경에서 Matter.js를 활용하여 물리 게임을 구현함
Phaser.js로 전환하여 게임 연출 및 UI/UX를 개선하고 완성도를 높임
SSR 문제 해결, DPR 처리, 진동 피드백 등 웹 환경의 한계를 극복하고 몰입도를 향상시킴
Matter.js에서 Phaser.js로의 전환
초기 Matter.js는 물리 연산에 집중하여 MVP를 빠르게 구현했다. 구체적으로 과일 병합 효과, 게임오버 연출 등 게임다운 연출 구현에 어려움이 있었다. 따라서 Phaser.js를 도입하여 렌더링 루프, 장면 관리, 이벤트 시스템을 활용, 게임 완성도를 높였다.
웹 환경에서의 게임 최적화
DPR(Device Pixel Ratio) 문제 해결을 위해 Phaser.js 초기 설정에서 window.devicePixelRatio 값을 활용했다. 따라서 고해상도 기기에서도 선명한 렌더링을 보장한다. 반면 iOS 뒤로가기 제스처 방지, 진동 피드백 설계를 통해 사용자 경험을 개선했다.
게임오버 판정 로직 개선
초기 타이머 기반 게임오버 판정은 외부 환경에 취약했다. 구체적으로 settled 상태의 과일만 게임오버 판정에 포함하도록 수정했다. 결과적으로 게임오버 판정 정확도를 높이고, 플레이 흐름을 자연스럽게 개선했다.
