Egret官网：https://www.egret.com/
Egret Engine：下载Launcher1.2.4
Egret API：点此进入
代码示例：点此进入
UI Editor：点此进入基础工具
1.Egret wing: win_4.1.6 和 mac_4.1.6，Egret团队已于2018年放弃维护。
2.Egret UIEditor：win_1.12.1 和 mac_1.12.1,wing的升级版，将编辑器和代码分开，代码使用vscode。Editor文档 和 EUI库文档3.Texture Merger：图集工具1.2.4，点此下载
目录结构

image.png

项目配置

1.egretProperties.json
基础配置：引擎版本，编译版本，引擎模块

{
  "engineVersion": "5.4.1",
  "compilerVersion": "5.4.1",
  "template": {},
  "target": {"current": "web"},
  "modules": [
    {"name": "egret"},
    {"name": "eui"},
    {"name": "assetsmanager"},
    {"name": "game"},
    {"name": "tween"},
    {"name": "promise"}
  ]
}

2.wingProperties.json
默认资源和默认主题，新加资源配置需在configs添加

{
    "resourcePlugin":{
        "configs":[{
            "configPath":"resource/default.res.json",
            "relativePath":"resource/"
        }]
    },
    "theme":"resource/default.thm.json"
}

3.index.html
项目入口，游戏场景宽高，适配策略，横竖屏

<div style="margin: auto;width: 100%;height: 100%;" class="egret-player"
         data-entry-class="Main"//项目入口src/Main.ts
         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>

image.png image.png

在上面的代码中我们看到，在index中首先加载了一个manifest.json文件。

xhr.open('GET', './manifest.json?v=' + Math.random(), true);

好的，我们打开这个文件看看里面的内容。

4.manifest.json

游戏加载时，预先加载的引擎模块

{
    "initial": [
        "libs/modules/egret/egret.js",
        "libs/modules/egret/egret.web.js",
        "libs/modules/eui/eui.js",
        "libs/modules/assetsmanager/assetsmanager.js",
        "libs/modules/game/game.js",
        "libs/modules/tween/tween.js",
        "libs/modules/promise/promise.js"
    ],
    "game": [
        "bin-debug/AssetAdapter.js",
        "bin-debug/LoadingUI.js",
        "bin-debug/Main.js",
        "bin-debug/Platform.js",
        "bin-debug/ThemeAdapter.js",
        "bin-debug/bag/Bag.js",
        "bin-debug/bag/BagItem.js"
    ]
}

initial中的是egret库对应的js文件，也就是我们在《Egret开发笔记(一)》中创建项目时勾选引入的引擎库，如下图：

image.png
image.png

而game模块中定义的则是启动程序后要加载的src目录下ts文件经过编译生成的js文件。

image.png
image.png
image.png
我们可以看出，在加载完manifest文件之后，将manifest文件中initial和game拼接在一起作为一个list。然后通过loadScript开始加载list中所有文件。而每一个文件则是通过loadSingleScript来完成加载的。按照上面的定义首先加载的一定是egret.js，接下来是egret.web.js、game.js...

当所有预定义的文件加载进来之后，在加载完成的回调函数中，调用了egret的runEgret接口，这个接口做了什么呢？
断点调试可以看到，这个接口经过一系列参数设置后，通过document.querySelectorAll查找到一个egret-player并把它放在一个container中，这个egret-player就是在index.html中定义的body体，这个div中定义了data-entry-class一个Main类型，同时在这个div中定义了一系列这个body体显示的一系列参数列表。

image.png
通过这个container以及前面传递过来一个参数集options，然后创建了一个web.webPlayer，而这个web.webPlayer的start接口就调起了我们src目录下Main的一个对象。
这样我们就应该明白egret项目是如何从index.html到Main的调用的。
image.png
在进入Main之后，构造函数中首先注册了一个ADD_TO_STAGE事件，响应接口是onAddToStage，在这个接口中onPause、onResume，再执行runGame接口——
image.png
在这里先加载资源、创建游戏场景、使用加载description_json文件、启动动画、使用平台登录账号、并且获取平台账户信息、打印账户信息。
image.png
在loadResource中，首先创建了一个LoadingUI，就是一个加载页面，然后开始加载default.res.json文件，文件路径在resource目录。加载页面展示的进度则是default.res.json中preload分组的加载进度，当加载资源完成后，移除加载页面。我们打开这个文件可以看到，实际上这个文件里面的groups中定义了预定义的分组资源，而在resources中定义了各个资源的名称、类型和url。整个文件是一个json格式的资源配置文件，如下图所示。
image.png

在runGame中，当我们加载完预定义的资源后，就开始创建场景中的背景、对象、设置icon等，这些与具体想实现的功能有关，这里不做过多解释，涉及到要创建的各种控件对象我们后续专门一章来学习。

image.png
image.png

接下来，加载description_json文件，实际上是读取了对应文件中的文字信息，并将加载的结果传进startAnimation中启动一个循环动画
最后调用平台登录接口，获取平台账号信息并打印。至此，就完成Main对象中所有逻辑的处理。

5…wing/tasks.json

编译和调试使用此配置

API使用

1.图集使用

方法一

let sheet:egret.SpriteSheet =RES.getRes("game_json");
let txt:egret.Texture = sheet.getTexture("logo_png");
let bmp:egret.Bitmap = new egret.Bitmap(txt);
this.stage.addChild(bmp);

方法二

let img:egret.Image = new egret.Image();
img.source = "game_json.logo_png";

2.List使用

class BagItem extends eui.ItemRenderer{
    imgIcon:eui.Image;
    labName:eui.Label;

    public constructor() {
        super();
        this.skinName="BagItemSkin";
    }

    protected dataChanged():void{
        this.imgIcon.source = this.data.icon;
        this.labName.text = this.data.name;
    }
}

//使用
class BagUI extends eui.Component{
    lst:eui.List;
    public constructor() {
        super();
        this.skinName="BagSkin";
        RES.createGroup("bag",["bag_json"]);
        RES.loadGroup("bag");
    }

    protected createChildren(){
        super.createChildren();
        this.lst.itemRenderer = BagItem;
        this.lst.addEventListener(eui.ItemTapEvent.ITEM_TAP,this.selectItem,this);
        this.lst.dataProvider=new eui.ArrayCollection([{name:"1",icon:"img_1_png"},{name:"2",icon:"img_2_png"}]);
    }

    private selectItem(e:eui.ItemTapEvent):void{
        console.log(this.lst.selectedIndex,this.lst.selectedItem);
    }
}

3.egret生命周期

//失去焦点
egret.lifecycle.onPause
//获得焦点
egret.lifecycle.onResume

4.加载blob

//以json形式获取二进制图像数据流
let request = new egret.HttpRequest("games/resource/assets/head.jpg");
request.responseType = 'blob';
let url = location.protocol + "//" + location.hostname + "/tooth/getAvatar";
request.open(url,egret.HttpMethod.GET);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send();
request.addEventListener(egret.Event.COMPLETE,this.avaLoadHandler,this);
request.addEventListener(egret.IOErrorEvent.IO_ERROR,ToothUtil.onGetIOError,this);

private avaLoadHandler(evt: egret.Event): void {
    var request = <egret.HttpRequest>evt.currentTarget;
    var blob = request.response;
    var img_url = window.URL.createObjectURL(blob);
    console.log(img_url);
    var imgLoader: egret.ImageLoader = new egret.ImageLoader;
    imgLoader.once(egret.Event.COMPLETE,this.avatarHandler,this);
    imgLoader.load(img_url);
}

private avatarHandler(evt: egret.Event): void {
    var loader: egret.ImageLoader = evt.currentTarget;
    var bmd: egret.BitmapData = loader.data;
    var bmp: egret.Bitmap = new egret.Bitmap(bmd);
    bmp.width = 32;
    bmp.height = 32;
    console.log(this.avax + ',' + this.avay);
    bmp.x = this.avax;
    bmp.y = this.avay;
    this.avay += 20;
    this.table1.addChild(bmp);
}

tween动画

在这里插入代码片
egret编译发布
打开CMD,输入egret，可查看详细命令。egret.cmd位置有两个：全局位置和原始位置。
全局位置：C:\Users\Administrator\AppData\Roaming\npm，也就是npm全局模块下。
原始位置：C:\Program Files (x86)\Egret\EgretLauncher\resources\app\engine\win\bin，也就是EgretLauncher安装目录下，每次启动Launcher时，都会检测全局位置和原始位置是否一样，如果 不一样，会把原始位置的文件复制到全局位置。

image.png

如果使用egret-facebook等模块
C:\Users\admin\AppData\Roaming\Egret\engine\5.2.33\build项目过大，编译速度过慢
1.在终端使用: egret run -a,保存代码时，会自动编译，但是速度依然很慢，并不是想象中只编译一个文件得速度。

image.png
2.编译时，egret会自动检测js代码的先后加载顺序，保存在manifest.json文件，若是项目js过多，检测自然时间会很长。
image.png
增删文件，可以使用此方法：参考这里
修改文件：项目根目录/scripts/config.json,屏蔽IncrementCompilePlugin，每次有代码增删时，需要清理一下。
image.png
image.png

常见问题
1.问题：编译无反映
解决：在终端试试 egret build -e

2.问题：Cannot find namespace ‘eui’
解决：代码要放在src下才可以

3.问题：FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
解决：打开C:\Program Files (x86)\Egret\EgretLauncher\resources\app\engine\win\bin\egret.cmd，安装node对应64位版本，64位申请内存大约1.5G，32位申请的内存大约800M 。如果修改后依然不行，可直接设置环境变量：NODE_OPTIONS 值为：–max-old-space-size=2056，可以次加大试试。

@SET NODE64=D:\Program Files\nodejs
@IF EXIST "%~dp0node_modules\egret\EgretEngine" (
  FOR /F "usebackq delims=" %%a in ("%~dp0node_modules\egret\EgretEngine") do @(set EGRET=%%a)
) ELSE (
  set EGRET=%~dp0node_modules
)

@IF EXIST "%NODE64%\node.exe" (
  "%NODE64%\node.exe" --no-deprecation --max-old-space-size=8192 "%EGRET%\selector.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node --no-deprecation --max-old-space-size=8192 "%EGRET%\selector.js" %*
)