지뢰 찾기에서 영감을 받은 근접 게임입니다.
squoosh.app을 만든 팀이 돌아왔습니다. 이번에는 PROXX (proxx.app)라는 웹 기반 게임을 빌드했습니다. PROXX는 전설적인 지뢰찾기 게임에서 영감을 받은 근접 게임입니다. 게임은 이 공간에서 진행되며 여러분의 임무는 블랙홀이 어디에 있는지 찾아내는 것입니다. 데스크톱, 피처폰 등 모든 종류의 기기에서 작동합니다. 사용자는 스크린 리더가 있는 경우에도 마우스, 키보드, D패드를 사용하여 게임을 플레이할 수 있습니다.
기준
게임을 빌드하기 전에 애플리케이션의 다음과 같은 목표와 예산을 설정합니다.
- 동일한 핵심 환경: 모든 기기가 동일한 방식으로 작동해야 합니다.
- 접근성: 마우스, 키보드, 터치, D패드, 스크린 리더
- 성능 기준에 부합:
- 초기 페이로드 25kb 미만
- 느린 3G에서 5초 미만의 TTI (상호작용까지의 시간)
- 일관된 60fps 애니메이션
웹 작업자
게임은 핵심 게임 로직, UI 서비스, 상태 서비스, 애니메이션 그래픽이라는 4가지 주요 항목으로 구성됩니다. 처음부터 애니메이션 그래픽을 기본 스레드에서 실행해야 함을 알고 있었기 때문에 기본 스레드를 최대한 자유롭게 유지하기 위해 게임 로직과 상태 서비스를 웹 워커로 이동했습니다.
빌드 시간 사전 렌더링
UI가 Preact로 빌드되었습니다. 25KB 미만의 초기 페이로드로 공격적인 목표를 달성할 수 있기 때문입니다. 우수한 초기 로드 환경을 제공하기 위해 첫 번째 뷰를 사전 렌더링하기로 결정했습니다. 빌드 시간에 Puppeteer를 사용하여 사전 렌더링하여 최상위 페이지에 액세스하고 preact가 DOM을 채우도록 합니다. 그런 다음 결과 DOM이 HTML로 직렬화되고 index.html로 저장됩니다
애니메이션용 캔버스, 접근성을 위한 DOM(숨김)
WebGL을 사용하여 게임 그래픽을 캔버스에 렌더링합니다. 한 캔버스는 배경 애니메이션을 담당하고 다른 캔버스는 상단의 게임 그리드를 담당합니다. 접근성을 위한 버튼이 있는 HTML 표도 있습니다. 이 표는 두 캔버스 위에 있지만 보이지 않게 됩니다 (불투명도: 0). 게임 상태의 캔버스 렌더링이 표시되는 것이지만 플레이어가 보이지 않는 DOM 테이블과 상호작용하고 있으므로 이벤트 리스너를 연결하고 브라우저의 포커스 관리에 의존할 수 있습니다.
DOM 요소를 캔버스에 유지함으로써 브라우저에 내장된 접근성 기능을 활용할 수 있습니다. 예를 들어 게임 테이블에 role="grid"를 설정하면 스크린 리더가 이를 구현하지 않고도 포커스가 맞춰진 셀의 행과 열을 알릴 수 있습니다.
번들링 및 코드 분할을 위한 롤업
앱의 총 크기는 gzip으로 100KB로 줄어듭니다. 이 중에서 초기 페이로드 (index.html)용으로 20KB가 사용됩니다. 이 프로젝트에는 Rollup.js가 사용됩니다. 기본 스레드와 웹 워커 간에 공유 종속 항목이 있으며 Rollup은 한 번만 로드하면 되는 별도의 단위에 이러한 공유 종속 항목을 배치할 수 있습니다. webpack과 같은 다른 번들러는 공유 종속 항목을 복제하여 이중 로드가 발생합니다.
피처폰 지원
KaiOS 휴대전화와 같은 스마트 피처폰이 빠른 인기를 얻고 있습니다. 이는 리소스가 매우 제한된 기기이지만, 웹 작업자를 사용하는 Google의 접근 방식 덕분에 이러한 휴대전화에서도 우수한 반응성을 갖춘 환경을 만들 수 있었습니다. 피처폰에는 다양한 입력 인터페이스 (D패드와 숫자 키, 터치스크린은 없음)가 제공되므로 키 기반 인터페이스도 구현했습니다.
다음 단계
Google은 Google I/O 2019에 맞춰 이 게임을 빌드하는 데 많은 시간을 투입했지만 바쁘게 쉬었기 때문에 휴식을 취하기에 충분한 시간을 갖고 있지만, 게임의 이러한 각 영역에 관한 심층적인 문서를 가지고 다시 돌아올 계획입니다.
그때까지 이 프로젝트에 대해 마리코가 I/O에서 했던 강연을 확인해 보세요.
proxx GitHub 저장소에서 코드를 찾아볼 수 있습니다.
건배! 수르마, 제이크, 마리코