2.2 引擎的安装、配置与发布

2.2.1 安装Egret启动器

在浏览器中打开下面的网址：

在界面中会看到这样的按钮，如图2-1所示：

单击这个按钮就可以下载Egret的启动器安装程序了。

Egret启动器可以说是聚集了Egret的所有产品，通过它可以下载并使用Egret的所有产品。

这个启动器安装程序的外观如图2-2所示：

当阅读本书时，Egret也许发布了更新版本的启动器，所以下载到的版本很可能与本书版本有所不同。

双击这个安装程序，会弹出用户账户控制对话框，选择“是”之后会弹出如下的对话框，如图2-3所示：

单击“我接受”按钮，然后程序就开始安装，如图2-4所示：

安装完成之后，会弹出如下对话框，然后单击“完成”按钮来完成安装，如图2-5所示：

2.2.2 启动Egret启动器并安装引擎和编辑器

启动器安装完毕之后，找到这个启动器程序并运行它。如果是第一次启动Egret启动器，会出现如图2-6所示的界面：

这表明需要注册一个账号，注册账号之后，用这个账号登录即可。如果已经有账号了，那么可以直接登录。

登录之后会进入到主界面，如图2-7所示。

首先去下载Egret的引擎，在主界面选择“引擎”标签，然后选择如下图2-8所示的按钮：

然后等待下载完毕。这样就将Egret Engine 5.2.25安装完毕了。这个就是引擎的主体。接着去下载编辑器，在主界面选择“工具”标签，然后选择如图2-9所示的“下载”按钮：

下载完毕之后，单击“安装”按钮来安装编辑器EgretWing，如图2-10所示：

之后会弹出用户账户控制对话框，选择“是”之后会弹出如下的对话框，如图2-11所示：

然后按照提示完成安装即可。等待安装结束后会弹出如图2-12所示对话框，单击完成，结束安装。

EgretWing是一款编辑器，通过这款编辑器可以做几乎所有的前端开发工作，其中包括编辑代码、编辑皮肤、执行命令、执行git命令等。

2.2.3 创建默认项目

启动EgretWing之后会出现如图2-13所示的窗口：

单击“创建一个新项目”按钮，如图2-14所示：

单击“Egret游戏项目”，然后会弹出创建项目对话框，如图2-15所示：

项目路径可以改为感兴趣的位置，然后单击“创建”按钮，随后 EgretWing 会打开这个默认项目，如图2-16所示：

运行一下这个默认项目，如图2-17所示：

单击“调试”功能按钮，然后在这个按钮下方的下拉按钮中选择“Launch Wing Player”选项，然后单击左侧的三角按钮，启动调试，会出现如图2-18所示的界面：

这是启动默认项目之后的画面，可以看看这个项目有什么功能。下面重点讲解项目的配置问题。

2.2.4 通过默认项目讲解项目配置

本节将讲解如何配置Egret项目，这需要打开上一节创建的默认项目。

（1）入口文件说明

项目文件夹中的 index.html 文件是整个项目调试的入口启动文件，其中的一个div元素代码如下所示，参见二维码2-1：

该div元素内的属性的作用如下：

● data-entry-class：该属性指明入口类，这个类一定要是 egret. DisplayObjectContainer的子类（egret. DisplayObjectContainer将在2.3节介绍）。如果类带有命名空间，一定要把命名空间加上。

● data-orientation：指明旋转模式，除了auto模式外，还有portrait模式、landscape模式和landscapeFlipped模式。关于旋转模式的详解，参见3.5.2节。

● data-scale-mode：指明缩放模式，除了 showAll 模式之外，还有noScale、noBorder、exactFit、fixedWidth、fixedHeight、fixedNarrow 和 fixedWide 模式。关于缩放模式的详解，参见3.5.1节。

● data-frame-rate：指明帧频数。默认是30，也就是每秒30帧。如果设置更高的帧数，但是设备的性能不够理想，那么在实际运行的时候也许达不到这个帧数。

● data-content-width：指明游戏内舞台的宽度。这个值的单位不是像素，笔者认为它是相对游戏素材（比如图片）尺寸的一个参考单位，因为实际宽度会根据设备的实际尺寸进行适配。

● data-content-height：指明游戏舞台的高度。这个值的单位仍旧是参考单位。

● data-multi-fingered：多指的最大数量。

● data-show-fps：指明是否显示fps帧频信息。

● data-show-log：指明是否显示egret.log的输出信息。

● data-show-fps-style：指明fps面板的样式。

在index.html的script标签内，有一段这样的代码，参见二维码2-2：

Egret.runEgret方法的参数是一个对象，这个对象的其中的两个字段可以修改：

● renderMode：指明引擎的渲染模式，可选的值有canvas和webgl。

● audioType：指明音频的类型，可选的值有0（默认）、2（web audio）、3（audio）。

至于calculateCanvasScaleFactor参数，它是用来指定屏幕的物理像素适配方法，使用默认值即可。

（2）项目配置文件说明

项目文件夹下的egretProperties.json文件就是项目的配置文件。这是目前该文件里的内容，参见二维码2-3：

以下是对各个字段的说明：

● engineVersion：指明调试项目所运用的Egret引擎版本。

● compilerVersion：指明Egret命令行版本，也是发布时的引擎版本。

● template：如果存在该字段，在发布 HTML5 项目时，会使用 template/web/index.html来作为入口文件。这也意味着，如果想发布HTML5项目，要确保template/web/index.html里的内容和项目文件夹下的index.html里的内容是一致的。这属于一种冗余，没必要地增加了开发者的负担。

● target：指明发布的平台类型。当开发者使用egret命令下的build和publish命令的时候，这个字段就起作用了，它指明了发布平台的类型。笔者推荐更高级的发布方法，就是通过EgretWing编辑器的菜单：插件->Egret项目工具->发布Egret项目。这个字段是Egret历史遗留的产物，可以不去理会这个字段，而是去使用高级的发布方法。

● modules：指明项目中引用的所有库文件。这是一个数组对象，里面包含的是项目开发所需要的库配置对象。这种配置对象是以下面的形式指定的：

对于内置库：

对于第三方库：

对于内置库，开发者可以使用以下的库名称：

● egret：引擎核心库。

● egret3d：引擎3D库。

● assetsmanager：资源管理模块。

● dragonBones：龙骨模块，该模块是一个2D动画模块。

● eui：UI组件模块。

● game：游戏库。

● media：多媒体库。

● socket：websocket网络通信库。

● tween：缓动动画库。

除了前两个模块以外，其余模块是Egret自带的扩展库。扩展库将在第4章进行讲解。

在修改了该配置文件的内容之后，需要执行EgretWing菜单：项目->清理 命令，进行重新构建，从而确保改动生效。

注意：不要将任何第三方库放到项目文件夹的libs/modules里，因为在执行菜单：项目->清理命令之后，程序会自动把配置文件里没有指定的库完全删除。

（3）tsconfig配置文件

项目文件夹下的 tsconfig.json 文件是 TypeScript 项目的配置文件， TypeScript编译器编译代码之前，会首先读取这个配置文件，并根据其中的属性来设置TypeScript项目的编译参数。

目前这个文件里面的内容是这样的，参见二维码2-4：

对于几乎所有的Egret项目而言，这个配置文件无须改动。但是在编译第三方库的时候，其中的参数就需要斟酌一下了。关于第三方库的相关知识将会在2.2.5节中讲解。

2.2.5 第三方扩展库

Egret官方并没有提供全部开发者需要的功能，所以需要重用别人或者自己开发的库。这就要求Egret能够引入第三方库。

第三方库可以是用TypeScript开发库，也可以是用JavaScript实现的库，在编译二者的时候，编译的配置文件是存在区别的，开发者需要特别注意。

因为TypeScript代码不能直接调用JavaScript库的API，所以TypeScript团队提供了一套声明语法，作用与C语言的头文件类似。这种声明文件的扩展名为d.ts。大多数JavaScript类库的官方已经提供了对应的 d.ts 文件，有些是社区开发者提供的。如果开发者没有找到对应的d.ts文件，也可以自己编写，编写方法可以参见：

https://github.com/vilic/typescript-guide/blob/adaaef2281150e57657e5b67368f592a968fad8f/入门指南/使用JS类库.md

sparrow-egret 是一个笔者开发的第三方库，当然开发者也可以制作自己的第三方库，这样就可以实现重用了。当开发者准备好了第三方库后，还需要把它编译成Egret需要的模块结构。接下来重点介绍一下如何编译第三方库。

（1）创建第三方库

打开命令控制台，进入一个自己喜欢的文件夹，使用如下的 egret 命令来创建一个第三方库：

其中ThirdLib是自定义的库的名称。

执行该命令之后，会在当前文件夹内生成一个称为ThirdLib的文件夹，而且在该文件夹内生成两个文件：package.json和tsconfig.json。然后在ThirdLib文件夹内手动创建三个文件夹：src、bin以及typings。

其中package.json的内容如下：

以下是对各个字段的解释：

name：指库名称。

compilerVersion：指编译器的版本，而且开发者要确保该版本的引擎已经通过Egret启动器下载完毕，也就是能保证该版本引擎已经存在于本地电脑上，否则编译会报错。

对于tsconfig.json文件，它的内容如下，参见二维码2-5：

以下是对各个字段的解释：

compilerOptions.target：编译的目标版本，大多数情况下不需要修改这个值。

compilerOptions.noImplicitAny：这个属性指明在项目中是否强制任意类型的对象声明带上any类型标识符。如果该值是false，则强制带有any标识符，否则会编译报错，大多数情况下不需要修改这个值。

compilerOptions.sourceMap：指明是否生成map文件，大多数情况下不需要修改这个值。

compilerOptions.declaration：指明是否生成d.ts文件，如果是TypeScript库则设置为true，如果是JavaScript库则设置为false。

compilerOptions.outFile：指明库文件的生成路径。

include：参与编译的文件所在的文件夹。

（2）配置TypeScript库

如果创建的是TypeScript库，需要把所有的ts文件放到src文件夹内，而且tsconfig.json文件保持不变。

（3）配置JavaScript库

如果创建的是JavaScript库，需要把所有的js文件放到src文件夹内，而且要对tsconfig.json和package.json进行修改。其中对tsconfig.json的修改如下，参见二维码2-6：

其中黑体的部分表明了需要修改的地方。

对于package.json，它需要做如下的修改：

typings字段表明声明文件的位置，这也就需要开发者把JS库对用的d.ts文件放到typings文件夹内。

（4）编译第三方库

打开命令控制台，将路径定位到ThirdLib文件夹内，然后执行以下命令：

命令执行完毕之后，编译任务就完成了，而且编译之后的文件会放在bin文件夹内。

（5）使用第三方库

如果想把第三方库引进项目，就需要像2.2.4 节讲述的那样，修改egretProperties.json文件了，这需要在modules字段里做如下修改，参见二维码2-7：

然后执行 EgretWing 菜单命令：项目->清理，从而使修改生效。这样这个第三方库就引入到当前项目了。

（6）Egret提供的第三方库

Egret提供了几个第三方库，开发者可以根据需要进行使用：

● JSZip库

下载地址：https://github.com/egret-labs/egret-game-library/tree/master/jszip

教程文档：

http://developer.egret.com/cn/github/egret-docs/extension/jszip/jszip/index.html

● mouse鼠标支持库

下载地址：https://github.com/egret-labs/egret-game-library/tree/master/mouse

教程文档：

http://developer.egret.com/cn/github/egret-docs/extension/mouse/mouse/index.html

● P2物理系统库

下载地址：https://github.com/egret-labs/egret-game-library/tree/master/physics

教程文档：http://developer.egret.com/cn/github/egret-docs/extension/p2/p2/index.html

● Particle粒子库

下载地址：https://github.com/egret-labs/egret-game-library/tree/master/particle

教程文档：

http://developer.egret.com/cn/github/egretdocs/extension/particle/introduction/index.html

● Titled瓦片地图库

下载地址：https://github.com/egret-labs/egret-game-library/tree/master/tiled

教程文档：http://edn.egret.com/cn/docs/page/718

2.2.6 发布项目

当开发者制作完项目，就可以开始考虑发布项目。执行EgretWing菜单命令：插件->Egret项目工具->发布Egret项目，这样Egret启动器会弹出发布对话框，如图2-19所示：

这里有很多可以发布的平台。本书重点介绍 HTML5 的发布方法，其他发布方法可以参见Egret官方文档。

在 HTML5 发布页面，单击“确定”按钮就可以发布项目了。发布之后的程序文件存在项目目录的bin-release/web文件夹内。