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文件:

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;
    }
}