이전 튜토리얼인 사례연구: Racer의 사운드(Case Study: The Sounds of Racer)에서는 레이서 게임 내의 사운드 구축을 위한 개발 과정과 기술에 대해서 다루었습니다면 이번 튜토리얼에서는 게임을 구축하기 위한 나머지 과정, 특히 렌더링에 대한 내용을 주로 다루고 있습니다. HTML5 게임이나 인터랙티브 컨텐츠를 개발하시거나 계획 중이시라면 읽어보시면 좋을 듯 합니다. 이번 번역은 신현진님(+Hyunjin Shin)께서 수고해주셨습니다. :)
TL;DR;
레이서는 5명의 친구가 폰이나 태블릿을 이용하여 게임을 진행할 수 있도록 Google Creative Lab과 Plan8의 사운드를 기반으로 8주간 진행되어 Google I/0 2013에서 발표된 실제 이론에 기반한 웹 기반 크롬 실험 형태의 게임입니다. 이번 글에서는 개발자 커뮤니티에서 주로 질의되었던 몇가지 동작 방식에 대한 내용과 레이서의 주요 기능 및 질의 사항에 대한 응답을 정리하였습니다.
트랙을 그리기 위해 해상도를 설정하고 이를 그리기 위한 로직, CSS 애니메이션과 CSS 스프라이트를 통한 렌더링 팁, 실제 게임 내에서 자동차를 렌더링하기 위해 트랜스폼을 어떻게 사용하였는지와 실제 디바이스 간의 동기화를 위해 지연 시간을 계산하고 이를 보정한 방법을 실제 코드와 함께 설명합니다.
아래는 그 중 일부 중요한 내용만 따로 차용한 것입니다.
- 모바일 디바이스의 해상도 변화에 대응하기 위한 해상도 설정
- CSS 스프라이트시트를 이용한 스프라이트 애니메이션
- 궤적의 변화에 따른 애니메이션 처리를 위한 실시간 트랜스폼 연산 및 적용
- 동기화를 위한 지연 시간의 계산 및 라운드 트립
자세한 내용은 본문을 참조하시기 바랍니다.
댓글 없음:
댓글 쓰기