eui-eui.DefaultAssetAdapter

eui.DefaultAssetAdapter 不推薦使用

class Main extends eui.UILayer {

    protected createChildren(): void {
        super.createChildren();
        egret.lifecycle.onPause = () => egret.ticker.pause();
        egret.lifecycle.onResume = () => egret.ticker.resume();
        // 先把下面一行註解掉, 當我們不採用自定義實作接口 eui.IAssetAdapter 時, 
        // 遊戲引擎會採用 eui.DefaultAssetAdapter 解析圖片素材, 我們在 runGame 函式內先建立一個按鈕
        
        // egret.registerImplementation('eui.IAssetAdapter', new AssetAdapter());
        
        egret.registerImplementation('eui.IThemeAdapter', new ThemeAdapter());
        this.runGame();
    }

    private async loadResource() {
        let loadingView = this.stage.addChild(new LoadingUI()) as LoadingUI;
        await RES.loadConfig('resource/default.res.json', 'resource/');
        await new Promise(resolve => new eui.Theme('resource/default.thm.json', this.stage).once(eui.UIEvent.COMPLETE, resolve, this));
        await RES.loadGroup('preload', 0, loadingView);
        this.stage.removeChild(loadingView);
    }

    private async runGame() {
        await this.loadResource();
        // --- Edwin 給你最乾淨的程式碼, 從這行以下開始寫喔 ---

        const btn = new eui.Button;
        btn.label = 'test';
        this.addChild(btn);
    }

}

執行畫面如下

會發現找不到按鈕圖片, 因為解析器讀不懂圖片的 resource key, 譬如範例的 resource key 為 button_up_png, 實際上 DefaultAssetAdapter 採用 egret.ImageLoader 讀取圖片資源, 而 load 方法應該傳入圖片完整路徑 resource/assets/Button/button_up.png 而不是 button_up_png, 所以會報錯. 當然官方希望我們實作自己的 AssetAdapter, 讓我們有機會處理資源解析部分, 尤其官方提供了實作檔 AssetAdapter.ts 讓我們可以客製化 AssetAdapter 這個 eui.IAssetAdapter 接口實作類. 以下為 DefaultAssetAdapter 實作圖片資源讀取報錯原因, 作者建議不要使用 DefaultAssetAdapter, 請使用官方提供的 AssetAdapter 類. 在 eui.IAssetAdapter 篇幅會介紹 AssetAdapter.ts.