egret入门，这一篇应该够了
欢迎点击「算法与编程之美」↑关注我们！
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
作者|王小强
来源| https://my.oschina.net/wxqdoit
下载安装：
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.Componentconstructor() {
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可以查看官网文档，如有错误，望斧正，如有疑问，请留言，我会及时回复。
更多精彩文章：
where2go 团队
微信号：算法与编程之美
温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！