egret入门，这一篇应该够了-阿里云开发者社区

下载安装：

1、EgretLauncher

传送门：https://egret.com/downloads/engine.html

下载完成按照要求一步步安装就可以了。

引擎管理工具，包括版本管理，项目打包，项目创建，其他工具下载安装等。

2、Egret Wing

打开EgretLauncher引擎管理工具，下载安装egret wing，（这里需要账号密码登录，如果没有就去注册一个吧！

egret wing支持可视化创建、编辑和管理项目 EUI，以及 TS 代码编写和断点调试。

3、更多工具

egret的工具非常多，上述安装的wing是最主要的开发工具，其余的安装方法也差不多，简单用法介绍可以参考官网的介绍，这里不赘述。

传送门：https://www.egret.com/products/

项目创建

1、项目类型

打开EgretLauncher，选中项目，点击创建项目：

创建项目有两个选项，游戏项目和EUI项目，主要是勾选的拓展库不同，建议创建时不管是哪种，都将eui 和game两个库都勾选上。

除了默认勾选的，其他按需求勾选。

舞台尺寸一般按照美术出图设置。

2、缩放模式

有很多种，具体介绍可以看官网介绍，可以说非常详细了

传送门 http://developer.egret.com/cn/github/egret-docs/Engine2D/screenAdaptation/zoomMode/index.html

旋转方式一般就横屏竖屏或者自动模式，最后创建项目。

目录结构

打开创建的项目：

.wing文件夹 存放使用wing打开的配置文件

bin-debug文件夹 存放调试时将ts转为js文件

bin-release文件夹 存放打包输出文件(打包后才会出现)

libs文件夹 存放引擎源码以及三方库文件

resources文件夹 存放资源文件包括图片、json、动画、exml等文件

scripts文件夹 存放一些配置文件，比如android ios wxgame的配置脚本文件

src文件夹 存放开发源码

template文件夹 存放模板文件

egretProperties.json文件 三方库的配置文件

其他的可以不用管了，如果还需要详细了解的：

传送门：http://developer.egret.com/cn/github/egret-docs/Engine2D/getStarted/helloWorld/index.html

项目入口

打开项目进入src文件目录

以下是我修改添加注释后的源码（Main.ts）

class Main extends eui.UILayer {
    protected createChildren(): void {
        super.createChildren();
        egret.lifecycle.addLifecycleListener((context) => {
            // custom lifecycle plugin
        })
        //inject the custom material parser
        //注入自定义的素材解析器
        let assetAdapter = new AssetAdapter();
        egret.registerImplementation("eui.IAssetAdapter", assetAdapter);
        egret.registerImplementation("eui.IThemeAdapter", new ThemeAdapter());
        this.runGame().catch(e => {
            console.log(e);
        })
    }
    private async runGame() {
        await this.loadResource()
        //this.createGameScene();
        const result = await RES.getResAsync("description_json")
        const gameui:GameUi = new GameUi();
        this.stage.addChild(gameui)
    }
    //资源加载函数，
    private async loadResource() {
        try {
            //加载页面添加到舞台
            const loadingView = new LoadingUI();
            this.stage.addChild(loadingView);
            //加载默认资源，json文件，里面记录着所有的图片数据
            await RES.loadConfig("resource/default.res.json", "resource/");
            //加载皮肤文件
            await this.loadTheme();
            //加载资源组
            await RES.loadGroup("preload", 0, loadingView);
            //加载完成后将加载页面从舞台移除
            this.stage.removeChild(loadingView);
            console.log('资源加载完成')
        }
        catch (e) {
            console.error(e);
        }
    }
    private loadTheme() {
        return new Promise((resolve, reject) => {
            //加载皮肤主题配置文件,可以手动修改这个文件。替换默认皮肤。
            let theme = new eui.Theme("resource/default.thm.json", this.stage);
            theme.addEventListener(eui.UIEvent.COMPLETE, () => {
                resolve();
            }, this);
        })
    }
    private textfield: egret.TextField;
    /**
     * 创建游戏场景
     * Create a game scene
     */
    private createGameScene() {
        let sky = this.createBitmapByName("dabg@3x_png");
        this.addChild(sky);
        let stageW = this.stage.stageWidth;
        let stageH = this.stage.stageHeight;
        sky.width = stageW;
        sky.height = stageH;
    }
    /**
     * 根据name关键字创建一个Bitmap对象。name属性请参考resources/resource.json配置文件的内容。
     * Create a Bitmap object according to name keyword.As for the property of name please refer to the configuration file of resources/resource.json.
     */
    private createBitmapByName(name: string) {
        let result = new egret.Bitmap();
        let texture: egret.Texture = RES.getRes(name);
        result.texture = texture;
        return result;
    }
    /**
     * 描述文件加载成功，开始播放动画
     * Description file loading is successful, start to play the animation
     */
    private startAnimation(result: string[]) {
        let parser = new egret.HtmlTextParser();
        let textflowArr = result.map(text => parser.parse(text));
        let textfield = this.textfield;
        let count = -1;
        let change = () => {
            count++;
            if (count >= textflowArr.length) {
                count = 0;
            }
            let textFlow = textflowArr[count];
            // 切换描述内容
            // Switch to described content
            textfield.textFlow = textFlow;
            let tw = egret.Tween.get(textfield);
            tw.to({ "alpha": 1 }, 200);
            tw.wait(2000);
            tw.to({ "alpha": 0 }, 200);
            tw.call(change, this);
        };
        change();
    }
}

资源适配器（AssetAdapter .ts）

class AssetAdapter implements eui.IAssetAdapter {
    /**
     * @language zh_CN
     * 解析素材
     * @param source 待解析的新素材标识符
     * @param compFunc 解析完成回调函数，示例：callBack(content:any,source:string):void;
     * @param thisObject callBack的 this 引用
     */
    public getAsset(source: string, compFunc:Function, thisObject: any): void {
        function onGetRes(data: any): void {
            compFunc.call(thisObject, data, source);
        }
        if (RES.hasRes(source)) {
            let data = RES.getRes(source);
            if (data) {
                onGetRes(data);
            }
            else {
                RES.getResAsync(source, onGetRes, this);
            }
        }
        else {
            RES.getResByUrl(source, onGetRes, this, RES.ResourceItem.TYPE_IMAGE);
        }
    }
}

主题适配器（ThemeAdapter.ts）

class ThemeAdapter implements eui.IThemeAdapter {
    /**
     * 解析主题
     * @param url 待解析的主题url
     * @param onSuccess 解析完成回调函数，示例：compFunc(e:egret.Event):void;
     * @param onError 解析失败回调函数，示例：errorFunc():void;
     * @param thisObject 回调的this引用
     */
    public getTheme(url: string, onSuccess: Function, onError: Function, thisObject: any): void {
        function onResGet(e: string): void {
            onSuccess.call(thisObject, e);
        }
        function onResError(e: RES.ResourceEvent): void {
            if (e.resItem.url == url) {
                RES.removeEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, onResError, null);
                onError.call(thisObject);
            }
        }
        if (typeof generateEUI !== 'undefined') {
            egret.callLater(() => {
                onSuccess.call(thisObject, generateEUI);
            }, this);
        }
        else {
            RES.addEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, onResError, null);
            RES.getResByUrl(url, onResGet, this, RES.ResourceItem.TYPE_TEXT);
        }
    }
}
declare var generateEUI: { paths: string[], skins: any }

关于js的异步，依然使用了es7的async与await，用法自行脑补

关于三方库引入

打开egretProperties.json

按照已有的格式以相同的写法将你的三方库路径添加上去，然后在终端执行egret build -e命令

以引入socket.io为例：

开发根目录：D:\dev\live-psz

socket.io目录：D:\dev\socket-libsrc

{
      "name": "socket.io",
      "path": "../socket-libsrc/bin/socket.io"
    }

关于exml主题UI布局

在resource目录下新建eui_skins文件夹，在下面新建**.exml文件，然后进行布局，

在default.thm.json确保引入

{
  "skins": {},
  "autoGenerateExmlsList": true,
  "exmls": [
    "resource/eui_skins/Animation.exml",
    "resource/eui_skins/AniShowCName.exml",
    "resource/eui_skins/GameUi.exml",
    "resource/eui_skins/RoleDetailUi.exml",
    "resource/eui_skins/RoleUi.exml",
    "resource/eui_skins/test.exml"
  ],
  "path": "resource/default.thm.json"
}

在src下面新建对应的ts文件

class GameUi extends eui.Component

constructor() {
    super();
    this.skinName = "resource/eui_skins/GameUi.exml";
}

如果在布局里面命名了相对应的Id，那么

public gold_group_btn :eui.Group;
public roleContainer: eui.Group;

如何引用

const gameui:GameUi = new GameUi();
this.stage.addChild(gameui)

最后

其他涉及到的API可以查看官网文档，如有错误，望斧正，如有疑问，请留言，我会及时回复。

egret入门，这一篇应该够了

下载安装：

1、EgretLauncher

2、Egret Wing

3、更多工具

项目创建

1、项目类型

2、缩放模式

目录结构

项目入口

关于三方库引入

关于exml主题UI布局

最后

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

egret入门，这一篇应该够了

下载安装：

1、EgretLauncher

2、Egret Wing

3、更多工具

项目创建

1、项目类型

2、缩放模式

目录结构

项目入口

关于三方库引入

关于exml主题UI布局

最后

热门文章

最新文章

相关电子书