作者：Priyadarshi Chowdhary

本文由两部分内容混合而成，一是简短的开发者日志，二是对我们开发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上移动对象时移动所有网页。

以上。随着我们测试新特征，我们还会回来陆续报告我们遇到的问题。（本文为游戏邦/gamerboom.com编译，拒绝任何不保留版权的转载，如需转载请联系：游戏邦）

Journey of creating HTML5 visual game programming tool.

by Priyadarshi Chowdhary

The following article is mix between a short developer diary and a summary of the challenges we faced in developing HTML5 based visual programming tool – DASH.

DASH is a HTML5 based visual programming tool for creating games. It is a quick and easy to use tool for students, teachers, hobbyists and designers and has features such as

Multi-Platform support ( Create and Play )

OOPS Based

Visual Programming Editor

Dynamic creation of objects

2D Physics support

Particles

Scene Editor

Animation Editor

Dropbox integration for assets

Project export for native mobile apps

Throughout the course of development we had (and will continue to) face numerous challenges. We had a number of decisions to make especially due to a few developments we had not anticipated.

Selecting the right libraries

We were ideally looking for an HTML5 JavaScript library/game engine that could fulfill two roles –

It should be good for creating a development environment – i.e. it had to support complex features

It should be fast and lightweight for running the games on as many platforms as possible

We found a perfect match – LimeJS. LimeJS is based on Google’s Closure tools and framework and we found that it worked perfectly for both games and tools. Using the Closure library ensured that most browser quirks would be automatically taken care of and we would be able to perform a great deal of minification and optimization by use of the Closure compiler. This was great but in order to use LimeJS as the engine powering the created games we had to figure out a way to compile the code generated by the tool. We decided to use a different engine for that instead.

We decided to complete major portions of the development environment before starting with the portions that required that we make a final decision regarding our target engine (the code generation part mostly). That was when the Code.org video came out and went viral. We immediately felt a connection (we are after all a game programming school apart from being a studio). Dash was just supposed to be a visual game programming tool, although if you really wanted to you could use if for learning/teaching. We were now consciously trying to make it a good educational tool.

So our target engine had to be easy to understand. In the grand scheme of things we are planning to use Dash to introduce people to game programming and then extend their knowledge to the realm of game engines and how they work, should they so choose to. We found two – CraftyJS and Gamvas. CraftyJS is a very flexible entity-component based game engine, much like Unity3D. Gamvas puts focus on actors and actor states. A monster in an RPG would have states such as roam, threaten, attack and retreat; although that is not the only way that states can be used.  Taking the performance of both into consideration we went with Gamvas.

Browser Differences

One can’t work with HTML5 and simply forget about the differences between the major browsers. Closure is a good layer of abstraction that solved most of the compatibility issues for us. One still has to take care differences in performance, browser specific artifacts, slightly different behaviors, etc.

A lot has already been said about performance so I’ll just add a few notes from my side. Following are the loading times for various browsers on our test machine –

Browser

Average Time

Maximum Time

Minimum Time

Chrome 28

5.22765

5.677

5.036

Firefox 22

1.6817

2.071

1.49

Internet Explorer 10

1.5616

1.728

1.494

IE 10 beats the other browser’s in loading the javascript files and executing them. But in terms of rendering performance chrome giving the better performance.

Audio presented its own share of problems. Chrome works the best when it comes to audio. Firefox and IE both have trouble playing the same audio file in quick succession.

Loading resources is another biggie. The issue crops up when resources such as images and audio are missing. This is usually not a problem with standard game development as the distribution server has all the assets. But we have to take the possibility of missing files into account as the user can use files stored in their dropbox. What happens if the user deletes the file, even if accidentally? We have provided some empty audio and image files to take the place of the missing file. But even using those requires that we know that the original file is missing.

Internet Explorer had numerous visual artefacts. Scaled images got clipped from the top very slightly. Moving an image on the stage left behind a trail of horizontal lines. These lines didn’t appear if the IE window is not maximized. Line orientation also changed with how the window was fit on the screen; i.e. whether it was vertically maximized or horizontally maximized or both. The problem seems to have disappeared in the latest version of IE.

Platform testing

Last I’ll mention the problems we faced while testing on different platforms.

Android – slow default browser. We hope everyone has installed either Chrome or Firefox Beta on their Android devices because the default browser is just too slow when it comes to HTML5 performance.

iOS  – DASH giving best performance(loading & rendering) on iOS devices, but sometimes it crashes due to iOS6 internal issues.

Windows8 mobile – The only problem we faced while testing DASH on windows8 browser that it doesn’t blocks scroll events which moves the whole webpage while moving objects in DASH.

This will be all for this blog post. I’ll be back with more as we are sure to run into more problems as we implement new features.(source:gamasutra)