制作HTML5视觉游戏编程工具DASH的经验


    本文由两部分内容混合而成,一是简短的开发者日志,二是对我们开发HTML5可视化编程工具DASH时面临的挑战的总结。   DASH是一个用于制作游戏的HTML5可视化编程工具。...

 

  本文由两部分内容混合而成,一是简短的开发者日志,二是对我们开发HTML5可视化编程工具DASH时面临的挑战的总结。


  DASH是一个用于制作游戏的HTML5可视化编程工具。无论是对于学生、教师、爱好者还是设计师,它都是一种使用起来快捷简单的工具。它的特征如下:


  •   支持多平台(制作和玩)
  •   基于OOPS(面向对象的程序设计系统)
  •   视觉编程编辑器
  •   动态制作对象
  •   支持2D物理
  •   粒子系统
  •   场景编辑器
  •   动画编辑器
  •   Dropbox整合资源
  •   项目导出为本地手机应用

  


  dash_banner(from gamasutra)


  在我们的开发过程中,我们经历了(且还继续面临)无数挑战。特别是因为一些我们没有预料到的开发环节,我们得做许多决策。


  选择合适的库


  我们正在寻找的HTML5 JavaScript library/游戏引擎要满足以下两个条件上:

  1、适用于制作一个开发环境——即必须支持复杂的功能。

  2、应该在尽可能多的平台上快速节省地运行游戏。


  我们发现最符合的就是LimeJS——它是基于Google的Closure工具和框架,我们发现它对游戏和工具都很适用。这个Closure library考虑到绝大部分浏览器的怪癖,并且我们能够通过使用Closure解析器执行大量简化和优化工作。但为了使用LimeJS,我们必须想出一个编译由该工具生成的代码的办法。因此,我们决定使用不同的引擎。


  我们先完成开发环境的主体部分,然后再根据我们的目标引擎来对其他部分(游戏邦注:主要是代码生成部分)做最终决定。正是Code.org视频放出并走红之时。我们立即看到关联性(毕竟我们除了是一个工作室,也是一个游戏编程学校)。Dash只是一个可视化游戏编程工具,尽管如果你真的希望把它用于学习/教学也行。我们现在还在有意识地把它用作优秀的教学工具。


  所以我们的目标引擎必须容易理解。我们打算使用Dash来向人们介绍游戏编程,以便拓展他们对游戏引擎及其工作原理的认识。我们发现了两种引擎——CraftyJS和Gamvas。前者是一个灵活的、基于实体-组件的游戏引擎,非常像Unity3D。Gamvas关注的是表者和表演者状态。比如,在RPG中的怪物可能有诸如漫步、威胁、进攻和撤退四种状态;尽管那不是唯一的使用状态的方式。考虑到两种引擎的性能,我们选择了Gamvas。


  浏览器差异


  在开发HTML5时,不可能不考虑到几大浏览器之间的差异。Closure为我们解决了大部分兼容性问题。还有一个仍然要考虑的差异是表现、浏览器特殊的人为设计、稍微不同的行为等。


  关于表现,已经被人说得差不多了,所以我不打算再赘述了。以下是在我们的机器上测试的不同浏览器的加载时间:


  

  浏览器加载时间(from gamasutra)


  IE10的加载和执行avascript是三种浏览器中最快的。但在渲染表现方面,chrome更突出。


  声音是一个指标。chrome在声音方面的表现最好。Firefox和IE都存在播放连续相同的声音文件的问题。


  加载资源是另一个指标。当资源如图像和声音都缺失时,问题就来了。这通常不是标准的游戏开发的问题,因为分配服务器拥有所有资源。但我们必须考虑到丢失文件的可能性,因为用户可以使用保存在他们的网盘中的文件。如果用户删除文件,即使是不小心的,那会怎么样呢?我们提供了一些空白声音和图像文件来替代空白文件。但即使那么做了,我们也知道原始文件已经丢失了。


  IE有大量视觉资源。缩放图像的品质会轻微受损。移动图像时会留下横线尾巴。如果IE窗口没有最大化,这些线条就不会出现。根据窗口对屏幕的适应,线条方向也发生变化;即垂直最大化或水平最大化或二者兼有。在最新版IE中,这个问题好像已经消失了。

标签: 游戏