【HTML5游戏开发】二次开发 BrowserQuest 第一集

        研究HTML5,有一些时间了,加了好几个HTML5 技术交流群,知道了BrowserQuest  这个开源的东西,也接触了不少引擎,如:比较流行的cocos2d 家族的 cocos2d-html5引擎,但考虑到自己是一个人在开发,以玩的心态想实现一个自己的游戏,不一定非得在手机上运行,所以暂时先把cocos2d-html5 放一下,它这个引擎不错,最起码引擎游戏思想,架构还是不错的。如 主要元素:导演》场景》层 》精灵》动作》地图》动画》粒子等操作 很不错,但是我发现用了它之后,因为它的封装,基本快把HTML5的语法都忘记的差不多了。所以我想用cocos2d-html5的思想,二次开发BrowserQuest ,BrowserQuest 这个开源的源码很不错,BrowserQuest 是 Mozilla 和Little Workshop 合作开发的一款多人在线RPG游戏,这款游戏完全是用HTML5开发完成,没有任何的flash,它通过使用WebSocket通讯连接一台主服务器来获取其它玩家的移动信息,这个对于我这个初学游戏开发的新人来说是很好的一个示例。本人一直从事JAVA开发,8年的java开发经验,目前是java技术经理,但觉得看java的东西很累了,想玩玩游戏开发,在家没事,想开发一个RPG游戏,回忆学生时代的传奇世界那时的疯狂,考虑再三,觉得BrowserQuest 基本都满足的我需求(HTML5开发的,RPG游戏,有源码)。

       废话不说了,动手先架起BrowserQuest,让游戏跑起来,这样就可以看看它的游戏过程。

安装部署过程:

百度获得BrowserQuest的下载地址,把BrowserQuest源码下载到本地。
官方网站:  http://browserquest.mozilla.org/ 
代码下载地址: https://github.com/mozilla/BrowserQuest

1、安装 node.js ,下载地址为 http://nodejs.org/

       并通过npm install [MODULE_NAME] 安装如下组件,如npm install underscore 或npm install -d underscore

       使用npm install -d 可以自动配置package.json,并安装所有需要依赖的包

underscore
log
bison
websocket
websocket-server
sanitizer
memcache
2、下载BrowserQuest ,地址: https://github.com/mozilla/BrowserQuest

3、 准备一个Webserver,如tomcat7

4、准备一个支持HTML5的浏览器,如FireFox, Chrome等,建议使用FireFox,加上FireBug以便方便对js代码进行跟踪测试

BrowserQuest的目录结构

解压完成的目录结构为
bin
client
server
shared
tools
目前来说,只和client和server有关系。
其中server需要使用node.js框架启动,client使用tomcat7启动,其实指和用户浏览器相关的部分。

Node启动Server
进入server目录,将 config_local.json-dist 改名为 config_local.json
需要把 node_modules copy到 browserquest里,如下图

进入browserquest目录,使用node server/js/main.js命令,如下图所示

Tomcat7启动Client
进入client/config目录,将 config_build.json-dist  改名为 config_build.json ,并且将config_build.json中的 host修改为127.0.0.1

[html] view plaincopy

    "host": "127.0.0.1", 
    "port": 8000 


修改tomcat的配置,增加一个webcontext,注意docbase是到browserquest目录而不是client目录


[html] view plaincopy
<Context docBase="D:/workspaces/HTML5/BrowserQuest-master/" > 
 
</Context> 

启动Tomcat

浏览器访问

访问地址为http://localhost:8080/client

即可进入测试。

测试在node的服务端能看到很多输出

[html] view plaincopy
[Thu Nov 22 2012 12:29:48 GMT+0800 (中国标准时间)] DEBUG Received: 0,ddd,21,60 
[Thu Nov 22 2012 12:29:48 GMT+0800 (中国标准时间)] INFO ddd has joined world1 
[Thu Nov 22 2012 12:29:48 GMT+0800 (中国标准时间)] DEBUG Received: 20,927,929,10 
20,1021,1022,1120,1121,1122,1220,1221,1222,1320,1321,1322,11920,11921,12120,1212 
1,810235,815222,818209 
[Thu Nov 22 2012 12:29:48 GMT+0800 (中国标准时间)] DEBUG Pushed 21 new spawns to 
510 
[Thu Nov 22 2012 12:29:50 GMT+0800 (中国标准时间)] DEBUG Received: 4,29,225 
[Thu Nov 22 2012 12:29:50 GMT+0800 (中国标准时间)] DEBUG ddd is moving to (29, 2 
25). 
[Thu Nov 22 2012 12:29:50 GMT+0800 (中国标准时间)] DEBUG Received: 26,4 
[Thu Nov 22 2012 12:29:54 GMT+0800 (中国标准时间)] DEBUG Received: 21 
[Thu Nov 22 2012 12:29:54 GMT+0800 (中国标准时间)] DEBUG group diff: 
[Thu Nov 22 2012 12:29:54 GMT+0800 (中国标准时间)] DEBUG Received: 20,926,928,18 
20,1821,12220,867220 
[Thu Nov 22 2012 12:29:54 GMT+0800 (中国标准时间)] DEBUG Pushed 6 new spawns to 
510 


无法连接到服务端

最常见的问题是点Play后,页面停留在connecting上,请检查一下两点配置:

1、node.js 服务端是否启动正常,可通过http://127.0.0.1:800/status 如果返回 类似[0,0,0,0] 。如果无法返回检查是否有相关的模块,或8000端口是否被占用。
2、tomcat的web路径要配置到client的上一级,client必须作为子目录。


安装过程中,可以看到,用到了Node.js和服务器端tomcat(当然你可以选择其它中间件,只是支持html访问即可。)浏览器必须支持HTML5,建议使用火狐和谷歌浏览器。

所以我对Nodejs进行了研究,至于中间件对于我来说,已经很熟悉了。

到这里我已经完成了安装和部署了。

你可能感兴趣的:(browser)