制作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的经验】相关文章
2. Adobe新推制作HTML5动画的可视化工具Edge Animate
3. Google Web Designer:图形化的HTML5编程工具
4. HTML5视觉手册
7. HTML插入Flash的全兼容完美解决方案-SWFObject
8. 《Animory》开发者分享HTML5手机游戏制作经验
9. 使用HTML5+JavaScript生成的一款儿时的经典游戏
10. TechED2011:HTML5让复杂游戏编写简单化
本文来源:https://www.51html5.com/a489.html
﹝制作HTML5视觉游戏编程工具DASH的经验﹞相关内容
- HTML5让复杂游戏编写简单化
- Web 开发人员必备的经典 HTML5 教程
- 3D视觉盛宴:Cube 基于google地图的HTML5云游戏
- HTML5游戏开发与货币化经验分享
- HTML5游戏开发与货币化经验分享
- 开发者分享开发HTML5跨平台游戏经验及注意要点
- YouTube抛弃Flash,将HTML5视频设为默认
- 给力:HTML5代码可实现的八大视觉效果
- jQuery网页背景视觉差滚动效果
- jQuery炫酷图片3d背景视觉差特效