Egret引擎的启动流程

        在开始之前,需要了解一下Egret项目的基本构成。跟其他项目差不多,除去项目相关的一些配置文件,主要分为3种:ts文件:项目的源码,图片文件,exml文件:皮肤文件。

Egret项目启动流程

   1. 读取index.html文件,获取项目基本配置(宽高,横竖屏等),加载项目需要的js代码

   2.代码加载完成后,执行egret.runEgret(),启动项目,进入Main文件

   3.加载项目需要图片、皮肤等资源

   4.资源加载完毕后,将界面添加到stage中

Egret程序入口

        每个Egret项目都有一个index.html文件,可以在Egret项目的根目录找到这个文件,这是最开始的加载文件,index.html可以打开直接编辑。

        打开index.html文件,以下是引擎5.0以前的结构,5.0以后的逻辑是一样的


index.html

找到div标签可以看到一些配置属性

运行配置

data-entry-class:文件类名称。 egretProperties.json 不再需要配置这个。

data-orientation:旋转模式。

data-scale-mode:适配模式。

data-frame-rate:帧频数。

data-content-width:游戏内stage宽。

data-content-height:游戏stage高。

data-show-pain-rect:是否显示脏矩形区域。

data-multi-fingered:多指最大数量。

data-show-fps:是否显示fps。

data-show-log:是否显示egret.log输出出来的信息。这些会在fps的下面显示出来,和console.log不一样。前提是fps必须打开。

data-log-filter:只显示过滤的log。

data-show-fps-style:fps面板的样式。目前只支持4种,x:0, y:0, size:30, textColor:0xffffff。

egret.runEgret()。启动项目。

        其中的data-entry-class,其值默认为Main,就是指Main.ts中所定义的类Main。当然这只是个默认值,我们可以根据自己的喜好随意修改,只要确保项目设定文件中的index.html属性值所指定的类名在项目中有其类定义即可。启动项目之后就会进入Main文件,Main文件在src文件夹下可以找到。

        项目开始加载的时候会去加载head标签中的js文件,这些文件有的是三方库文件,有的是项目中创建的相关代码比如LoadingUI.js跟Main.js。这些js加载完成之后就会运行egret.runEgret(),启动项目,进入Main文件。

        进入Main文件后,会加载项目需要的图片,皮肤等资源,资源加载完成之后就可以加载界面到stage上了。

你可能感兴趣的:(Egret引擎的启动流程)