HTML5游戏

当前位置: HTML5技术网 > HTML5游戏 > 制作HTML5视觉游戏编程工具DASH的经验

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

 

  本文由两部分内容混合而成,一是简短的开发者日志,二是对我们开发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中,这个问题好像已经消失了。


  平台测试


  最后我要说说我们在不同平台上测试时面临问题:


  Android:默认浏览器太慢。我们希望所有人都在他们的Android设备上安装了Chrome或Firefox Beta,因为说到HTML5的表现,默认浏览器太慢了。


  iOS:DASH在iOS设备上表现最好(加载和渲染),但有时候它会因为iOS的内部问题而崩溃。


  Windows8手机:我们在windows8浏览器上测试DASH时,遇到的唯一问题是,它不能阻止滚动事件——在DASH上移动对象时移动所有网页。


【制作HTML5视觉游戏编程工具DASH的经验】相关文章

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

2. Adobe新推制作HTML5动画的可视化工具Edge Animate

3. Google Web Designer:图形化的HTML5编程工具

4. HTML5视觉手册

5. 程序员远程工作必会编程语言JavaScript

6. 围绕在HTML5周围关于Flash的误解

7. HTML插入Flash的全兼容完美解决方案-SWFObject

8. 《Animory》开发者分享HTML5手机游戏制作经验

9. 使用HTML5+JavaScript生成的一款儿时的经典游戏

10. TechED2011:HTML5让复杂游戏编写简单化

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

点击展开全部

﹝制作HTML5视觉游戏编程工具DASH的经验﹞相关内容

「制作HTML5视觉游戏编程工具DASH的经验」相关专题

其它栏目

也许您还喜欢