2014년 9월 30일 화요일

Node.js를 사용한 온라인 멀티 웹게임 Broswer Quest (Windows)

BroswerQuest라는 온라인 멀티 웹게임에 대해 설명합니다.



실제 게임은 http://browserquest.mozilla.org/ 에서 진행해 볼 수 있습니다.
구글의 V8 javascript엔진을 사용하기 대문에 크롬 브라우저에서 열어야 합니다.
테스트 해 본 결과 태블릿용 크롬 및 휴대폰용 크롬에서도 잘 작동 합니다.

게임화면 스크린샷도 참고하세요.




이제.. Windows PC에서 이 게임 서버를 설치하고 실행하는 방법을 설명합니다

1. 먼저 node.js 를 다운로드 하여 설치합니다.
추천하는 버전은 v0.9.12 입니다.

http://nodejs.org/dist/ 에 접속하여 v0.9.12 폴더의 node-v0.9.12-x86.msi 를 다운로드 하고 설치합니다.

2. BroswerQuest 소스코드를 gitbub 에서 다운로드 합니다.
오른쪽의 Download ZIP을 클릭하면 소스 전체를 다운로드 할 수 있습니다.

3. 다운로드 받은 ZIP을 적당한 위치에 압축 해제 합니다.
(저는 D:\Inetpub 폴더에 압축해제 해서 D:\Inetpub\BrowserQuest-master 폴더가 생겼네요)

4. cmd 창을 실행시킵니다.
node -v 명령으로 설치된 node.js의 버전을 확인 할 수 있습니다.

5. BrowserQuest-master 폴더로 이동합니다.

6. npm install underscore log bison websocket websocket-server sanitizer memcache
을 cmd창에 입력합니다.
필요한 패키지가 자동으로 다운로드 됩니다.

7. BrowserQuest-master 폴더에서 node server/js/main.js 를 실행합니다.
이제 BroswerQuest 서버가 실행되었습니다.

8. 새로운 cmd 창을 열고 BrowserQuest-master\client 폴더로 이동합니다.
npm install -g http-server 를 실행합니다.
웹서버를 위한 패키지가 설치됩니다.
http-server 를 실행하면 해당 폴더가 웹사이트의 기본 폴더가 됩니다. 포트는 기본 8080입니다.
크롬 주소창에 127.0.0.1:8080 을 입력하면 BroswerQuest가 나오는 화면을 볼 수 있습니다.
하지만, 아직 다 된것은 아닙니다. 소켓 통신을 위해서 서버 설정을 해주어야 합니다.
ctrl+C를 눌러서 웹서버를 종료해 주세요.

9. 탐색기로 BrowserQuest-master\client\config 폴더를 엽니다.

10. config_build.json-dist 와 config_local.json-dist 파일을 복사 + 붙여넣기 해서 사본을 만듭니다.

11. 두 파일을 열어서 "host": "Set local dev websocket host here" 부분을 "host": "127.0.0.1" 으로 변경하고 저장합니다.

12. 파일이름이 config_build.jsonconfig_local.json 이 되도록 변경합니다.

13. 이제 cmd 창에서 http-server 를 실행합니다.

14. 크롬 주소창에 127.0.0.1:8080 을 입력하고 BroswerQuest 화면이 나타나면 캐릭터 이름을 넣고 접속하면 게임이 실행됩니다.

15. 크롬 주소창에 127.0.0.1:8000/status 를 입력하면 서버 상태를 볼 수 있습니다.

댓글 1개:

  1. npm install websocket-server 설치가 안됩니다

    TypeError: Cannot read property 'latest' of undefined

    이라고 나오는데 더이상 해당 모듈을 설치하기 어려울 듯 합니다

    pakk2040@naver.com 혹시 모듈 보유하신분 공유좀 해주세요

    한번 설치해보고싶은데 막혔네요..

    답글삭제