一、安装与部署
安装引擎,看了下好像没什么需要学的。
二、命令行手册
用法
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" />
八、第三方扩展库
看的有点一知半解,,之后用到的时候再详细补充吧。