借助AMD来解决HTML5游戏开发中的痛点

借助AMD来解决HTML5游戏开发中的痛点

游戏开发的痛点

现在,基于国内流行引擎(LayaAir和Egret)和TypeScript的HTML5游戏开发有诸多痛点:

  • 未采用TypeScript编译器的增量编译模式导致无法达到极致的编译效率,进而编码、运行、调试循环不流畅。
  • 代码的组织方式是使用namespace,为了减少代码长度和提高代码输入的效率,一般使用import来创建别名,但是工具流不支持自动的import或者import检查。手动去写import降低了编码的效率。
  • 使用namespace来管理代码会遇到模块执行顺序无法控制的问题,有些引擎会使用扩展的TypeScript编译器来解决,这增加了额外的编译器维护的工作量。其实是没有必要的。比如egret使用了typescript-plus。再比如,在LayaAir的工作流中,官方引入了第三方的ts处理逻辑。这个算法的时间消耗是随代码的增多线性上升的。
  • 使用namespace带来一个额外的工作量,就是为了加载开发者的代码要创建和维护开发者的模块文件列表,这也是没有必要的。而且在开发阶段,游戏打开时候每个模块都要单独加载,也就说每个模块都要产生一个http请求,这会降低游戏打开的速度。可以想象,随着项目的规模逐渐增长,游戏打开的速度会越来越慢。

AMD

AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。这是目前最流行的JavaScript/TypeScript代码的管理方式。本文末尾的参考资料列表中包含了更多关于AMD的信息。AMD可以帮助我们解决上述一些问题:

  • 在VS Code中,我们可以使用现有的流行插件来实现自动的import,提高编码效率。
  • AMD可以自动管理模块之间的依赖。AMD为此而生。

ts编译配置

  • ts的watch模式使用了增量编译,只有修改的模块才会被编译,这样零秒编译才得以实现。
  • 使用outFile来自动合并所有的模块文件,这是tsc已有的功能,我们没有必要再重复造轮子。而且合并文件会把开发者模块的http请求合并成一个,这可以提高开发阶段游戏打开的速度。

示例项目

下面以LayaAir引擎作为示例来讲解,源码从这里下载https://github.com/wildfirecode/HTML5-Game-AMD-TypeScript.

创建项目

依然使用LayaIDE来创建项目,因为要使用LayaAir引擎的库文件。

requirejs

从requirejs官方下载库文件,目前的最新版本是2.3.4,这是下载链接http://requirejs.org/docs/release/2.3.4/minified/require.js。把下载的库文件放入./bin目录,并且在index.html增加文件引用以及游戏入口模块的启动。

<script data-main="js/GameMain" src="./require.js" defer async="true"></script>

适配AMD

增加LayaAir引擎适配模块adapter.ts,每一个LayaAir的类都要增加一个适配。比如Laya.EventDispatcher:

export const EventDispatcher = Laya.EventDispatcher;

更改ts编译配置

使用示例项目中的tsconfig.json覆盖原来的tsconfig.json文件。这样我们就可以使用tsc watch模式实现极速编译,而且还可以把开发者的所有模块文件合并为一个文件。

使用Visual Studio Code作为编码调试环境

为了方便控制index.html,建议使用VS Code来编译项目。另外,为了在VS Code中能够编译和调试项目,我们需要复制示例项目中的.vscode文件夹到自己项目的根目录。 编译使用快捷键Ctrl+Shift+B,调试使用F5,过程基本和LayaAir相同。更多信息参考VSCode官方文档。

插件推荐

为了能够自动import,需要下载额外的VSCode插件,这里是插件地址 https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero

参考

posted on 2017-08-17 16:45 wildfirecode 阅读(...) 评论(...) 编辑 收藏

统计