egret入坑学习

官方教程

• 由于自己比较菜,前端的是知识点薄弱,所以我把官方文档都看了一遍,还是有所收获的.
  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文件:

1. resource 中可以添加图片,声音,.exml文件(类似于iOS的xib可视化布局文件),json文件等
2. src主要是创建的ts文件
3. index :data-entry-class属性是要第一个加载的ts文件,默认是Main,data-orientation是支持方向,data-scale-mode是缩放模式,data-frame-rate是设置fps,data-content-width是设置场景宽度,data-content-height是设置场景高度,background设置默认背景颜色.
4. 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名称获取该组件

完整入门示例教程参考

一看就会的 egret 入门教程

egret 实战教程之跳一跳（一）

egret 实战教程之跳一跳（二）