egret入坑学习

2019-12-12 本文已影响0人 Coder_Cat

官方教程

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