HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > 实时同步多人3D游戏与HTML5

实时同步多人3D游戏与HTML5

六个星期前,我们看到,如果我们能够建立一个实时,“抽搐”3D游戏中使用HTML5的浏览器。我们建立了几场比赛,并愉快地与我们取得惊讶。


您可以测试我们的作品之一,在这里:空气曲棍球


 

图像


WebGL的具有相当不错的浏览器支持,目前和three.js是一个重要的库,因为WebGL的样板,它为你处理。它有一个干净的API,内置功能,和社会的支持,但文件是稀疏的。不过,也有这样的例子很多,你不可避免地会发现,它展示了如何建立你正在试图做什么。


许多例子使用stats.js和dat.GUI监测帧速率和调整设置,这是很好的工具,包括开发你的游戏时。dat.GUI是微调,尤其是在帮助我们的延迟补偿算法和调整游戏的外观,如光的强度和其他材料的性能。


我们买了从空中曲棍球,木槌和冰球模型TurboSquid的,他们进入浏览器是容易感谢搅拌机出口商three.js的插件,其中出口为JSON搅拌机场景。我们磨练我们的搅拌机技能分离的模式,调整材料和减少多边形的数量,使生成的文件尺寸较小。(一幽默的错误是,冰球,不接触空气曲棍球台的一侧-后一个小时的调试物理引擎,我们发现3D冰球模型实际上抵消了几个单位的X和Y轴,就没有人ţ中心的起源。糟糕。)



如果你是新的3D,WebGL和three.js可以是艰巨的,因为有很多术语和陌生的概念。因为我们都不是3D艺术家花了很多时间来获得照明和材料恰到好处。我们做了很多调整图形实验,重装游戏,对自己玩。一个更好的办法,我们意识到,当我们看到Mr.doob上RO.ME项目的介绍,分成小,单机可以调整被包含在最终的结果之前的演示快速和easiliy的部分演示。


联网


我们想看看我们是否可以作出响应,低延迟的游戏,挑战玩家的反射,空气曲棍球似乎像一个不错的选择。移动重锤和冰球周围需要活泼的网络性能,我们知道,游戏将无法播放,如果网络是哪怕是一点点慢。幸运的是,的WebSockets提供出色的性能。


我们的做法是在网络相对简单,但它是良好的,足以证明我们的观点:“抽搐”游戏在HTML5是完全可能的!我们的网络代码是这样的:


  1. 客户端发送球员的木槌服务器的位置。
  2. 服务器都槌的速度计算,根据他们以往和目前的立场,然后进步的游戏模拟器,它可以检测碰撞和计算的新速度和冰球​​的位置。
  3. 服务器发送的客户,这显示它的球员的最新冰球和木槌位置。


当然,延迟这个过程的复杂性。如果需要50ms的一个数据包从服务器到客户端,然后玩家看到的冰球位置将是50ms的过时。这使得它更难打冰球球员。下面是我们如何解决这个问题:


  1. 客户端测量客户端和服务器之间的延迟 - 例如,50ms的。
  2. 当客户端接收从服务器,它使用相同的物理模拟器,该服务器使用预测冰球将会从现在的50ms冰球的位置和速度。
  3. 然后,它会显示在此预测的位置冰球。现在的球员没有“领导”以可靠打冰球。


还有其他现代,行之有效的滞后补偿技术,可以提高我们的游戏的可玩性更,但我们并没有使用任何他们为我们的演示。仅20世纪90年代时代游戏网络技术是足以建立一个有趣的,实时,多人网页游戏。


另外,值得一提的是该服务器是权威的游戏状态。所有现实世界中的多人游戏必须这样做的方式,以防止作弊。


 

JavaScript的


我们认为,发展与Node.js的后端HTML5的前端,将简化开发时间,因为我们可以共享客户端和服务器之间的JavaScript代码。实时游戏,在相同的仿真运行所需要的两端,这一点尤为重要。相比以前的项目中,我们有单独的代码库的客户端和服务器逻辑,我们认为我们削减某处大约30%的开发时间。


我们试图使用RequireJS编写客户端代码,但我们的代码包装在AMD式模块定义感到笨拙和外来的,我们不能得到整个代码共享的工作。后来我们发现Browserify,这是改变生活。不仅没有Browserify工作很大,但它提供了许多标准节点库的包装,所以我们可以写事件需要'事件' 类游戏延伸events.EventEmitter和客户端工作。我们唯一无法获得工作与Browserify的Backbone.js,所以我们写了50行CoffeeScript取代我们需要从它的部分。


我们选择了JavaScript的CoffeeScript,因为它允许我们编写更少的字符相同的逻辑,和所有的管理节点工具,,像nodemon和永远,似乎支持。我们担心,CoffeeScript将很难调试,但事实证明,编译的JavaScript死易于浏览。browserify也使得使用新源地图的标准,这有助于大量在Chrome开发工具的导航,我们认为它不会很长,有人会很容易在浏览器中调试CoffeeScript直接。


性能和优化


如前所述,我们运行我们的游戏服务器上Node.js. 我们认为有没有其他的明智的选择,Node.js的,使我们有能力的客户端和服务器上运行同样的游戏代码。到目前为止,我们已经与节点的表现相当高兴,并在负载测试中,我们发现,我们可以运行在一个单一的512MB Rackspace公司的虚拟机前约100个​​并发游戏性能开始下降。我们花了几乎没有时间,优化我们的代码,所以这样的表现是相当惊喜。


任何讨论HTML5的性能将不可避免地包括垃圾收集,和我们最初关注的是GC暂停可能会导致明显的游戏暂停。与Chrome横空出世不是一个问题。播放时,Firefox上的空气曲棍球,不幸的是,有明显的平滑光点,我们认为这是有关垃圾收集。然而,我们没有在所有的努力,以减少我们产生的垃圾量,我们认为它可能是有可能得到Firefox上的伟大表现,小心你的代码产生多少垃圾。


吸取的经验教训


浏览器游戏开发最重要的事情是缺少的工具。我们看到了很多的框架,但他们要么你使你的游戏的某种方式的限制,或者他们被收购,并从未公布。有一些伟大的库和组件,但它仍然是你来把它们串起来。


Flash和统一的行之有效的发展环境,iOS和Xbox Live Arcade的是提供月底端到端解决方案,为建立和发布一个游戏的平台。但浏览器仍然是非常,非常新,建设一个HTML5的比赛仍然是类似于汇编语言。在我们的游戏有没有滑块,我们可以用它来调整颜色的冰球或调整光的亮度 - 如果我们想要的任何,我们不得不建立或买(字面意思)较重的框架。


我们很高兴能在近控制台类似的经验带入同步,多人游戏使用HTML5的浏览器方面的可能性。作为星际争霸“和光晕自己的球迷,我们愿意看到进入浏览器的经验,我们希望能够激励你,希望他们以及。

【实时同步多人3D游戏与HTML5】相关文章

1. 实时同步多人3D游戏与HTML5

2. HTML5 3D游戏:球撞球

3. Turbulenz:HTML5 2D和3D游戏引擎开源

4. 开源3D游戏引擎Babylon.js:基于HTML5和JavaScript

5. BrowserQuest:开源的基于HTML5的多人在线RPG游戏

6. Phaser:开源的HTML5 2D游戏开发框架

7. 多人俄罗斯方块

8. [盘点]热门HTML5网页游戏 跨平台同步页游兴起

9. HTML5-WebSocket实现对服务器CPU实时监控

10. 实时感受CSS、HTML编译网站过程

本文来源:https://www.51html5.com/a2668.html

点击展开全部

﹝实时同步多人3D游戏与HTML5﹞相关内容

「实时同步多人3D游戏与HTML5」相关专题

其它栏目

也许您还喜欢