下载安装:1、EgretLauncher传送门:https:///downloads/engine.html 下载完成按照要求一步步安装就可以了。 引擎管理工具,包括版本管理,项目打包,项目创建,其他工具下载安装等。 2、Egret Wing打开EgretLauncher引擎管理工具,下载安装egret wing,(这里需要账号密码登录,如果没有就去注册一个吧! egret wing支持可视化创建、编辑和管理项目 EUI,以及 TS 代码编写和断点调试。 3、更多工具egret的工具非常多,上述安装的wing是最主要的开发工具,其余的安装方法也差不多,简单用法介绍可以参考官网的介绍,这里不赘述。 传送门:https://www./products/ 项目创建1、项目类型打开EgretLauncher,选中项目,点击创建项目: ![](http://image109.360doc.com/DownloadImg/2020/08/0801/198653040_1_20200808012605787_wm)
创建项目有两个选项,游戏项目和EUI项目,主要是勾选的拓展库不同,建议创建时不管是哪种,都将eui 和game两个库都勾选上。 除了默认勾选的,其他按需求勾选。 舞台尺寸一般按照美术出图设置。 2、缩放模式有很多种,具体介绍可以看官网介绍,可以说非常详细了 传送门 http://developer./cn/github/egret-docs/Engine2D/screenAdaptation/zoomMode/index.html 旋转方式一般就横屏竖屏或者自动模式,最后创建项目。 目录结构打开创建的项目: ![](http://image109.360doc.com/DownloadImg/2020/08/0801/198653040_2_20200808012605975_wm)
.wing文件夹 存放使用wing打开的配置文件 bin-debug文件夹 存放调试时将ts转为js文件 bin-release文件夹 存放打包输出文件(打包后才会出现) libs文件夹 存放引擎源码以及三方库文件 resources文件夹 存放资源文件包括图片、json、动画、exml等文件 scripts文件夹 存放一些配置文件,比如android ios wxgame的配置脚本文件 src文件夹 存放开发源码 template文件夹 存放模板文件 egretProperties.json文件 三方库的配置文件 其他的可以不用管了,如果还需要详细了解的: 传送门:http://developer./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) => { }) 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() 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); 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;
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;
}
private createBitmapByName(name: string) { let result = new egret.Bitmap(); let texture: egret.Texture = RES.getRes(name); result.texture = texture; return result; }
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]; 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 { 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 {
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 ![](http://image109.360doc.com/DownloadImg/2020/08/0801/198653040_3_20200808012606194_wm)
{ "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) 最后
|