HTML5技术

HTML5教程:用HTML5实现twitch3D游戏(3)_HTML教程

字号+ 作者:H5之家 来源:H5之家 2015-09-25 08:00 我要评论( )

HTML5教程:用HTML5实现twitch3D游戏(3),学习HTML5教程:用HTML5实现twitch3D游戏(3),HTML5教程:用HTML5实现twitch3D游戏(3) 如果你是刚接触 3D, WebGL

HTML5教程:用HTML5实现twitch3D游戏(3)

 

       如果你是刚接触 3D, WebGL 和 three.js将会显得比较艰涩,因为这里面会有很多陌生的术语和概念。由于我们都不熟悉3D,所以在光线和材质的调整上花费了不少时间。

       我们反复尝试了各种调整,反复地刷新,体验效果。当看到Mr.doob 在RO.ME项目上的演讲 (需翻墙)时,才想到有个更好的办法,那就是在合成最终效果前把各个部件先分离成单独的小demo以便于调节效果。

网络通信

     我们想试下创建一个能及时响应低延时,挑战玩家反应的游戏是否可行,air hockey看起来很合适。移动冰槌和冰球需要良好的网络性能。而只要网络稍有延时,这个游戏的可玩性就大大降低。幸好,WebSocket提供了很好的性能。

     我们的网络方案相对简单,但这已经路以证明我们的观点:用HTML5来实现互动(twitch,不知怎么翻译)游戏是可行的!,网络方案如下:

      当然,延时会使这个处理过程变得复杂。如果从服务端到客户端的数据包需要50毫秒,那么玩家最终看到的界面就是50毫秒前的,这使得玩家很难击中冰球。针对此问题我们的解决方法是:

如此,玩家就不需要自己计算延时所导致的位置误差来击中冰球了。

      还有很多流行的以验证有效的滞后补偿技术可以提高游戏的可玩性。不过我们的demo里仅使用上述方法–90年代的游戏联网技术,因为这已经足以让我们创建一个有趣的、实时的、浏览器上的多玩家游戏了。

   另外,值得一提的是,一切应该以服务端数据为准,所有的实时多人游戏里都是如此防范作弊的。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5教程:用HTML5实现twitch3D游戏(3)_HTML教程

    HTML5教程:用HTML5实现twitch3D游戏(3)_HTML教程

    2015-09-25 08:00

网友点评