官方教程
- 由于自己比较菜,前端的是知识点薄弱,所以我把官方文档都看了一遍,还是有所收获的.
Egret Engine 引擎下载安装
新手入门
Egret入门
官网示例
相关项目说明
-
项目结构：
项目结构
.wing, 配置文件
src 目录，存放我们的代码。我们编写的代码都放在src目录下面。
bin-debug 目录，项目编译和运行的debug目录，一般我们不要修改该目录下的内容。
libs 目录，这里面存放我们的库文件，包括 Egret 核心库和其他扩展库。当然以后添加了第三方库的话也会放在这里。
resource 目录，这里放置我们的资源文件，这里面有一个default.res.json 配置文件，用来配置资源。
template 目录，这里是项目调试过程中所需的目录，一般我们不需要修改该目录下的内容。
egretProperties.json 项目的配置文件，一般我们会用到里面的modules 字段来配置项目的模块。
index.html 项目访问的入口文件，我们可以在这里面配置项目的旋转缩放模式背景颜色等。
favicon.ico 一个ico。
我们会动的文件只有resource,src,index,egretProperties文件:
-
resource中可以添加图片,声音,.exml文件(类似于iOS的xib可视化布局文件),json文件等 -
src主要是创建的ts文件 -
index:data-entry-class属性是要第一个加载的ts文件,默认是Main,data-orientation是支持方向,data-scale-mode是缩放模式,data-frame-rate是设置fps,data-content-width是设置场景宽度,data-content-height是设置场景高度,background设置默认背景颜色. -
egretProperties:modules是引入的模块,target调试工具默认是web及web调试,设置为wxgame就可以联合小程序开发工具一起联调.
-
小游戏的生命周期
// 如果是继承 egret.DisplayObjectContainer则入口函数为构造函数 public constructor() { super(); this.once( egret.Event.ADDED_TO_STAGE, this.onAddToStage, this ); } //如果是继承eui.UILayer则入口函数为 protected createChildren(): void { super.createChildren(); //监听生命循环 是用于在后台时对内核更新暂停。 egret.lifecycle.addLifecycleListener((context) => { // custom lifecycle plugin }) //暂停,推到后台时调用,用于暂停游戏保存游戏的状态和数据 egret.lifecycle.onPause = () => { egret.ticker.pause(); } //回复,回到前台重新开始游戏 egret.lifecycle.onResume = () => { egret.ticker.resume(); } //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); }) }加载资源绘制进度
-
效果如下
加载资源绘制进度 -
Main.ts中加载资源时调用:
private async loadResource() { try { const loadingView = new LoadingUI(); this.stage.addChild(loadingView); await RES.loadConfig("resource/default.res.json", "resource/"); await this.loadTheme(); //第三个参数只要实现RES.PromiseTaskReporter协议的onProgress方法既可以 await RES.loadGroup("preload", 0, loadingView); this.stage.removeChild(loadingView); //添加一行代码：加载排行榜资源,否则在展示排行榜时报错gameSubContextThirdScriptError Cannot read property 'width' of undefined;at requestAnimationFrame callback function TypeError: Cannot read property 'width' of undefined platform.openDataContext.postMessage({command:'loadRes'}); } catch (e) { console.error(e); } } -
-
自定义加载视图
LoadingUI实现RES.PromiseTaskReporter协议的onProgress方法class LoadingUI extends eui.UILayer implements RES.PromiseTaskReporter { //遵守协议 public constructor() { super(); this.createView(); } //进度显示文字 private textField: egret.TextField; //加载进度条 private rect: eui.Rect; private createView(): void { let stageWidth = 640; let stageHeight = 1136; this.textField = new egret.TextField(); this.addChild(this.textField); this.textField.size = 30; this.textField.width = 480; // this.textField.height = 100; this.textField.textColor = 0xffffff; this.textField.anchorOffsetX = this.textField.width/2 this.textField.anchorOffsetY = this.textField.height/2 this.textField.x = stageWidth/2; this.textField.y = stageHeight/2-50; this.textField.textAlign = "center"; this.rect = new eui.Rect(0,20,0xE9EDD7); this.addChild(this.rect); //绘制圆角 this.rect.ellipseHeight = 10; this.rect.ellipseWidth = 10; this.rect.x = (stageWidth - 300)/2; this.rect.y = stageHeight/2; let label = new eui.Label("上海车团网络信息技术有限公司"); this.addChild(label); label.size = 15; label.anchorOffsetX = label.width/2; label.anchorOffsetY = label.height/2 label.x = stageWidth/2; label.y = stageHeight - 50; label.textAlign = "center"; } //实现协议方法 public onProgress(current: number, total: number): void { //Math.round 将浮点数转化为最接近的整数 this.textField.text = "正在引导:" + Math.round( current / total * 100 ) + "%"; this.rect.width = current / total * 300; } }
用exml编写ui界面
-
选中文件->新建模板文件->新建EUI组件
新建EUI组件 -
设置类名,设置.exml文件路径设置类名
-
会在相应的目录下生产一个ts文件和一个exml文件
生产一个ts文件和一个exml文件 -
产生响应的画板我们设置其宽高然后添加响应的组件
产生响应的画板
添加设置组件
设置图片 -
在对应名称的ts文件中通过绑定的id名称获取该组件
通过绑定的id名称获取该组件
