在基于TypeScript的LayaAir HTML5游戏开发中使用AMD
现在,基于国内流行引擎(LayaAir和Egret)和TypeScript的HTML5游戏开发有诸多痛点:
AMD是”Asynchronous Module Definition”的缩写,意思就是”异步模块定义”。这是目前最流行的JavaScript/TypeScript代码的管理方式。本文末尾的参考资料列表中包含了更多关于AMD的信息。AMD可以帮助我们解决以上的一些问题:
下面以LayaAir引擎作为示例来讲解,源码从这里下载https://github.com/wildfirecode/HTML5-Game-AMD-TypeScript.
依然使用LayaIDE来创建项目,因为要使用LayaAir引擎的库文件。
从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>
增加LayaAir引擎适配模块adapter.ts
,每一个LayaAir的类都要增加一个适配。比如Laya.EventDispatcher
:
export const EventDispatcher = Laya.EventDispatcher;
使用示例项目中的tsconfig.json
覆盖原来的tsconfig.json
文件。这样我们就可以使用tsc watch模式实现极速编译,而且还可以把开发者的所有模块文件合并为一个文件。
为了方便控制index.html,建议使用VS Code来编译项目。另外,为了在VS Code中能够编译和调试项目,我们需要复制示例项目中的.vscode
文件夹到自己项目的根目录。 编译使用快捷键Ctrl+Shift+B
,调试使用F5
,过程基本和LayaAir相同。更多信息参考VSCode官方文档。
为了能够自动import,需要下载额外的VSCode插件,这里是插件地址 https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero。