본 문서는 HTML5 웹 게임 중 Little Workshop 이 만든 멀티 유저 롤플레잉 게임인 BrowserQuest에 대한 문서입니다. (게임 개발자 @glecollinet & @whatthefranck)와 Mozilla에서 함께 개발함.

게임 위치: browserquest.mozilla.org

BrowserQuest는 고전적인 비디오 게임을 다중 사용자 지원 버전으로 만든 것입니다. 어드벤처 기반의 전사역할이며 공주를 구하는 것은 아니고 단지 보물을 발견해서 채우는 것입니다. HTML5과 자바스크립트 기반으로 개발되었으며, 오픈 소스로 만들어 지고 있습니다. 소스코드는 GitHub에서 찾으실 수 있습니다!

스크린 캐스트 보기:

다중 사용자 경험

BrowserQuest는 수 천명이 동시에 게임을 실행할 수 있습니다. 게임 분산 시스템을 채택하고 있으며 현재 얼마나 많은 사람들이 게임을 하는지 확인할 수 있습니다.

게임 플레이어들은 각자 게임 내에서 채팅으로 의사 소통을 할 수 있고 함께 적을 무찌를수도 있습니다. BrowserQuest는 탐험 게임으로 더 위험한 곳으로 가서 더 많은 보물을 얻을 수 있습니다.

WebSocket 기술 활용

WebSockets은 서버와 클라이언트 사이에 웹 기반으로 쌍방향 통신을 할 수 있는 새로운 웹 표준 기술입니다.

BrowserQuest는 실시간으로 한 웹페이지에서 많은 사람들이 동시에 소통할 수 있는 좋은 데모입니다. 게임을 시작하면 웹 브라우저는 웹소켓 통신을 열고 게임 서버 로드밸런서와 통신을 합니다. 각 서버는 다중의 가상 세계 인스턴스를 가지고 있어서 사용자의 이동에 따라 로직 이동 및 동기화가 진행 됩니다. 이 서버는 Node.js를 활용하며 자바스크립트 기반의 이벤트 처리 능력에 탁월한 성능을 보여 줍니다.

이 서버 소스 코드 역시 Github에 있습니다.

웹 기반 게임 플랫폼

BrowserQuest는 다양한 웹 표준 기술을 사용하였습니다.:

• HTML5 Canvas: 2D 타일 기반 그래픽 엔진.
• Web workers: 가상 세계 지도를 처음 가져 올 때 클라이언트 로드 분산 기능.
• localStorage: 캐릭터가 하는 동작을 계속적으로 클라이언트에 저장.
• CSS3 Media Queries: 게임을 다중 다바이스에서 실행 가능하도록 기술 제공.
• HTML5 audio: 게임 동작 할 때 나는 소리(죽거나 할때) 효과!

사용 환경

BrowserQuest는 웹 기술로 만들어서 최신 웹 브라우저 및 운영 체제에서도 동작합니다. 본 게임은 Firefox, Chrome와 Safari에서 WebSocket 기술을 켜고 가능합니다. Opera에서도 사용 가능하며 Firefox Android 뿐만 아니라 태블릿, iOS에서도 가능합니다.

모바일 버전은 실험용이므로 데스크탑 만큼은 아니지만 성능 및 기능 향상을 이루고 있으며 앞으로 모바일용 웹 게임 시대에 큰 진전을 이룰 것입니다.

함께 해주세요!

BrowserQuest를 함께 만들고 싶으세요? 가상 세계의 자신의 캐릭터를 직접 만들고 친구들고 함께 게임을 하실 수 있구요. 가능하다면 Github에서 함께 개발을 해주셔도 됩니다. 여러분의 많은 참여 바랍니다.

본 글은 BrowserQuest – a massively multiplayer HTML5 (WebSocket + Canvas) game experiment의 한국어 번역본입니다.