代码目录结构
在Egret Wing中打开上一节中我们创建的项目工程,查看代码目录结构,Forward在如下图中标记了各个目录的及关键文件的用途。
代码阅读理解
接下来我们从web入口一步一步阅读初始代码。首先打开index.html文件,我们看到index文件内容如下:
在上面的代码中我们看到,在index中首先加载了一个manifest.json文件。
xhr.open('GET', './manifest.json?v=' + Math.random(), true);
好的,我们打开这个文件看看里面的内容。
initial中的是egret库对应的js文件,也就是我们在《Egret开发笔记(一)》中创建项目时勾选引入的引擎库,如下图:
而game模块中定义的则是启动程序后要加载的src目录下ts文件经过编译生成的js文件。
我们可以看出,在加载完manifest文件之后,将manifest文件中initial和game拼接在一起作为一个list。然后通过loadScript开始加载list中所有文件。而每一个文件则是通过loadSingleScript来完成加载的。按照上面的定义首先加载的一定是egret.js,接下来是egret.web.js、game.js...
当所有预定义的文件加载进来之后,在加载完成的回调函数中,调用了egret的runEgret接口,这个接口做了什么呢?
断点调试可以看到,这个接口经过一系列参数设置后,通过document.querySelectorAll查找到一个egret-player并把它放在一个container中,这个egret-player就是在index.html中定义的body体,这个div中定义了data-entry-class一个Main类型,同时在这个div中定义了一系列这个body体显示的一系列参数列表。
通过这个container以及前面传递过来一个参数集options,然后创建了一个web.webPlayer,而这个web.webPlayer的start接口就调起了我们src目录下Main的一个对象。
这样我们就应该明白egret项目是如何从index.html到Main的调用的。
在进入Main之后,构造函数中首先注册了一个ADD_TO_STAGE事件,响应接口是onAddToStage,在这个接口中onPause、onResume,再执行runGame接口——
在这里先加载资源、创建游戏场景、使用加载description_json文件、启动动画、使用平台登录账号、并且获取平台账户信息、打印账户信息。
在loadResource中,首先创建了一个LoadingUI,就是一个加载页面,然后开始加载default.res.json文件,文件路径在resource目录。加载页面展示的进度则是default.res.json中preload分组的加载进度,当加载资源完成后,移除加载页面。我们打开这个文件可以看到,实际上这个文件里面的groups中定义了预定义的分组资源,而在resources中定义了各个资源的名称、类型和url。整个文件是一个json格式的资源配置文件,如下图所示。
在runGame中,当我们加载完预定义的资源后,就开始创建场景中的背景、对象、设置icon等,这些与具体想实现的功能有关,这里不做过多解释,涉及到要创建的各种控件对象我们后续专门一章来学习。
接下来,加载description_json文件,实际上是读取了对应文件中的文字信息,并将加载的结果传进startAnimation中启动一个循环动画
最后调用平台登录接口,获取平台账号信息并打印。至此,就完成Main对象中所有逻辑的处理。