Egret Engine学习笔记（二）——项目配置

一、安装与部署

安装引擎，看了下好像没什么需要学的。

二、命令行手册

用法

egret [command]

 就和git还有npm一样的用法嘛其实，举例使用：

1、运行名为【HelloWorld】的一个项目

egret run HelloWorld

2、编译名为【HelloWorld】的一个项目

egret build HelloWorld

 接下来具体介绍命令列表。

---

command列表

create

创建新项目

用法：

egret create project_name [--type core|eui]

 参数说明：

关键字	描述
project_name	项目名称，按照操作系统的命名规范命名
--type	要创建的项目类型 core 或 eui，默认值为core

举例：

1、创建名为【HelloWorld】的一个空项目

egret create HelloWorld

2、创建名为【HelloWorld】的一个eui项目

egret create HelloWorld --type eui

---

create_lib

创建新第三方库项目

用法:

egret create_lib lib_name

参数说明:

关键字	描述
lib_name	第三方库名称，按照操作系统的命名规范命名

---

create_app

从h5游戏生成app

用法:

egret create_app app_name -f h5_game_path -t template_path

参数说明:

关键字	描述
app_name	移动应用项目名称，按照操作系统的命名规范命名
-f	app项目所对应h5项目的路径
-t	对应 Native Support 路径

如果是在项目文件夹下编译，就不要加项目路径。注意：路径最好加引号，防止路径中有空格导致报错。

---

build

构建指定项目

用法:

egret build [project_name] [-e] [--target wxgame|bricks|ios|android]

参数说明:

关键字	描述
project_name	项目名称，按照操作系统的命名规范命名
-e	编译指定项目的同时编译引擎目录
--target	编译的目标版本，可选参数有wxgame：微信小游戏；bricks：玩一玩；android：安卓项目；iOS：iOS项目

如果是在项目文件夹下执行命令，可以不加项目名称。

举例：

1、编译【HelloWorld】

egret build HelloWorld

2、编译【HelloWorld】的同时编译引擎

egret build HelloWorld -e

3、编译【HelloWorld】的同时编译微信小游戏项目

egret build HelloWorld --target wxgame

---

publish

发布项目

用法：

egret publish [project_name] [--version [version]] [--target wxgame|bricks|ios|android]

参数说明：

关键字	描述
project_name	项目名称，按照操作系统的命名规范命名
--version	设置发布之后的版本号，可以不设置
--target	编译的目标版本，可选参数有wxgame：微信小游戏；bricks：玩一玩；android：安卓项目；iOS：iOS项目

如果是在项目文件夹下执行命令，可以不加项目名称。

举例：

发布【HelloWorld】到微信小游戏

egret publish HelloWorld --version 0.03 --target wxgame

---

run

启动本地服务器，并在默认浏览器中运行指定项目

用法：

egret run [project_name] [--port 3000]

参数说明：

关键字	描述
project_name	项目名称，按照操作系统的命名规范命名
--port	指定端口号

如果是在项目文件夹下执行命令，可以不加项目名称。

举例：

在指定端口下运行【HelloWorld】项目

egret startserver HelloWorld --port 3002

---

clean

重置项目中的引擎代码

用法：

egret clean [project_name]

参数说明：

关键字	描述
project_name	项目名称，按照操作系统的命名规范命名

如果是在项目文件夹下执行命令，可以不加项目名称。

---

upgrade

升级项目代码

Egret Launcher v1.0 之后的 upgrade

用法：

egret upgrade [project_name] --egretversion [target version]

参数说明：

关键字	描述
project_name	项目名称，按照操作系统的命名规范命名
target version	要切换的目标版本号

如果是在项目文件夹下执行命令，可以不加项目名称。

举例：

升级当前目录下项目到 5.1.0

egret upgrade --egretversion 5.1.0

Egret Launcher v1.0之前的 upgrade

用法：

egret upgrade [project_name]

参数说明：

关键字	描述
project_name	项目名称，按照操作系统的命名规范命名

如果是在项目文件夹下执行命令，可以不加项目名称。

举例：

升级【HelloWorld】项目

egret upgrade HelloWorld

关于Egret Launcher v1.0 中项目降版本的说明

修改项目根目录下的配置文件 'egretProperties.json' 中的 'egret_version' 字段下的版本号

执行 egret clean 后项目降到目标版本

---

make

修改引擎源码后，编译引擎源码。如果没有特殊需求，不建议普通用户使用

用法：

egret make

---

info

获得Egret信息，如当前Egret版本，以及安装路径

用法：

egret info

---

help

了解各个command的细节

用法：

egret help [command]

三、入口文件说明

index.html为项目的入口问价，下面是body标签里的默认配置，可以根据项目需求修改：

<div style="margin: auto;width: 100%;height: 100%;" class="egret-player"
         data-entry-class="Main"
         data-orientation="auto"
         data-scale-mode="showAll"
         data-frame-rate="30"
         data-content-width="640"
         data-content-height="1136"
         data-multi-fingered="2"
         data-show-fps="false" data-show-log="false"
         data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9">
    </div>

• data-entry-class：文件类名称
• data-orientation：旋转模式
• data-scale-mode：适配模式
• data-frame-rate：帧频数
• data-content-width：游戏内舞台的宽
• data-content-height：游戏内舞台的高
• data-multi-fingered：多指最大数量（一开始没搞懂这个参数是啥意思，查了一下反应过来，这是手机屏幕上同时允许的最多手指操作）
• data-show-fps：是否显示fps帧频信息
• data-show-log：是否显示egret.log的输出信息
• data-show-fps-style：fps面板的样式，支持5种属性，x:0，y:0，size:30，textColor:0xffffff，bgAlpha:0.9

在script标签内，有项目的启动参数，如下图所示：

egret.runEgret({ renderMode: "webgl", audioType: 0, 
calculateCanvasScaleFactor:function(context) {
    var backingStore = context.backingStorePixelRatio ||
        context.webkitBackingStorePixelRatio ||
        context.mozBackingStorePixelRatio ||
        context.msBackingStorePixelRatio ||
        context.oBackingStorePixelRatio ||
        context.backingStorePixelRatio || 1;
    return (window.devicePixelRatio || 1) / backingStore;
}});

启动参数是一个对象，包括一下3个可选属性：

• “renderMode”: 引擎渲染模式，”canvas” 或者 “webgl”
• “audioType”: 使用的音频类型，0:默认，2:web audio，3:audio 两者的区别，可以参考文档
• “calculateCanvasScaleFactor”：屏幕的物理像素适配方法，使用默认的即可

四、项目配置文件说明

这个写在第一篇里，可以从这里跳转。

五、模块配置

在项目配置文件egretProperties.json中，modules字段定义了项目中引用的所有库文件。

其中，引擎库可以分为2种。

1、内置库

• egret 引擎核心库
• egret3d 引擎3D库
• assetsmanager 资源管理模块
• dragonBones 龙骨
• eui UI组件库
• game 游戏库
• media 多媒体库
• socket websocket网络通讯库
• tween 缓动动画库

内置库可以省略path字段，默认和egret_version使用相同的版本，也可以在path字段里单独设置该库使用的版本。

2、第三方库

Egret官方提供一些常见的第三方库供开发者使用。开发者也可以在项目中配置自己的库。

六、tsconfig配置文件

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

使用方式

1 ) 在创建 egret 项目时，会自动在项目根目录下生成名为 “tsconfig.json” 的文本文件。

2 ) 下面为引擎默认的参数，可以根据您项目的需求，自己修改：

{
    "compilerOptions": {
        "target": "es5",
        "outDir": "bin-debug",
        "experimentalDecorators": true,
        "lib": [
            "es5",
            "dom",
            "es2015.promise"
        ],
        "types": []
    },
    "include": [
        "src",
        "libs"
    ]
}

详细说明compilerOptions里的字段：

• target：编译之后生成的JavaScript文件需要遵循的标准，默认为es5，兼容性较好，不建议修改（不过现在大家都在学es6了吧）
• outDir：编译出来的js文件，默认编译到bin-debug里，目前暂不支持修改。
• experimentalDecorators：启用实验性质的语法装饰器，引擎里的部分库使用了最新的语法，需要开启这个配置。
• lib：编译需要的库文件，默认有3个，你可以根据需求自行添加。
• 其他常用参数
  • "sourceMap":true ：把.ts文件编译成.js文件时，生成对应的.js.map文件，该文件可以让用户直接在浏览器里调试ts文件。
  • "removeComments":true ：编译.js时删除原本.ts文件中的注释。

3）设置其他字段，比如与compilerOptions平级的还有include字段，表示哪些文件会参与编译，在引擎4.x之前的版本，该字段为exclude，表示哪些文件不参与编译。

4）执行egret build命令，可以按照配置文件来编译egret项目。

七、编译顺序说明

在Egret中，需使用TypeScript编写程序，最终编译成浏览器可读的JaveScript。

测试依赖关系

总的来说，当好几个类之间存在互相引用的关系的时候，可能会存在一个文件加载在它引用的类所在的文件加载之前，导致浏览器报错该类未定义。想要解决这个问题，TypeScript中，可以使用<reference>标签来表示引用关系。例如TestB引用了TestA，则只需要在TestB之前加入如下注释即可：

///<reference path="TestA.ts" />

八、第三方扩展库

看的有点一知半解，，之后用到的时候再详细补充吧。