2013년 12월 9일 월요일

[튜토리얼/한글화] 사례연구: Racer의 사운드(Case Study: The Sounds of Racer)

HTML5Rocks '사례연구: Racer의 사운드(Case Study: The Sounds of Racer)' 튜토리얼이 업데이트되었습니다.

웹에서 오디오나 비디오는 사실 플래시만큼이나 애증의 대상입니다. 웹 컨텐츠를 가장 쉽게 풍성하게 보여주기도 하지만 그만큼이나 컨트롤은 어렵습니다. 이 튜토리얼은 슬롯 트랙에서 플레이되는 자동차 게임인 '레이서(Racer)'의 사운드 구현에 관련된 내용들을 담고 있습니다. 사실 오디오와 관련해서 웹 상에서 많은 리소스들이 있지는 않기 때문에 웹 오디오로 고민하시는 분들에게는 도움이 되리라 생각합니다. 특이한 구현 사례도 있고 많지는 않지만 오디오에 대한 지식도 조금 필요하기 때문에 필요한 부분만 읽으셔도 좋고 멀티미디어 컨텐츠 혹은 게임 개발자시라면 자세하게 읽어보시길 권해드립니다.

이번 번역은 +Hyunjin Shin님이 수고해주셨습니다. :)



TL;DR;


Racer Racer는 멀티플레이어 및 멀티디바이스로 동작하는 크롬 실험입니다. 여러개의 스크린에서 플레이하는 레트로 스타일의 슬롯 자동차 게임입니다. Android, iOS 폰 또는 태블릿에서 동작하며 누구나 참여할 수 있습니다. 앱이 아니며 다운로드도 없는 그저 모바일 웹일 뿐입니다.

이 게임은 다수의 사용자가 게임에 참가하고 참가한 사람들의 휴대폰을 일종의 다중 스피커로 활용합니다. 드럼과 베이스로 시작되어 기타와 신디사이저 등이 추가되는 음악 트랙이 만들어지는 형태입니다. 이 게임을 만들기 위해 필요한 내용을 다음과 같이 정리/제공합니다.

  1. 여러 개의 오디오 파일을 동기화하여 이용한 엔진 사운드의 구현 방법
  2. 버스트 요청을 샘플링하고 그것을 기준으로 낮은 레이턴시를 계산하여 네트워크를 통한 음원 재생 동기화
  3. 지연 누적으로 인해 긴 시간 동안 재생 후에 음악 레이어에서 전체적으로 동기화가 틀어지는 클럭 드리프트에 대한 해결
  4. 동적인 상태 변화를 위한 노래 스케줄링 및 오디오 재생 순서의 배치 전환 및 최적화
  5. 하나의 오디오 파일을 스프라이트처럼 응용한 오디오 스프라이트 사례

참고 글