0
点赞
收藏
分享

微信扫一扫

白鹭引擎EUI做H5活动 巩固篇

项目目录

白鹭引擎EUI做H5活动 巩固篇_json


 上面这张图片是项目的目录结构,咋们一点一点来讲解:

  • .wing:包括 Egret 项目的任务配置文件和启动配置文件。
  • wingProperties.json:Egret Wing 项目配置文件。
  • bin-debug:项目调试时,所产生的文件存放于此目录。
  • libs:库文件,包括 Egret 核心库和其他扩展库存放于此目录。
  • resource:项目资源文件存放于此目录。
  • scripts:项目构建和发布时需要用到的脚本文件存放在此目录。
  • src:项目代码文件存放于此目录。
  • template:项目模板文件存放于此目录。
  • egretProperties.json:项目的配置文件。具体的配置说明可以参考:​​EgretProperties说明​​
  • index.html:入口文件。具体的配置说明可以参考:​​入口文件说明​​
  • manifest.json:网页清单文件。
  • tsconfig.json:typescript 编译配置文件


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”:屏幕的物理像素适配方法,使用默认的即可


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​​,兼容性比较好,不建议修改
  • ​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 项目。




举报

相关推荐

0 条评论