core-egret.SpriteSheet

step1. 準備想合併成一張大圖的圖片

step2. 開啟 TextureMerger 並選擇 Sprite Sheet

step3. 將圖片檔 (本範例有4張圖片) 拉到 TextureMerger, 請自行設定專案項目名稱, 畫布請選 Free Size 節省空間. 間隙為 1px ( 很重要, 如果設置 0px 會有圖片邊緣拉扯問題, 可以試試 ), 請記得勾選附加拓展名.

step4. 上方工具列有『導出』按鈕, 導出 100% 大小並命名 mySheet(自定義) 會產出 mySheet.json 跟 mySheet.png, 請將這兩個檔案拖到資源庫(會發現只有看到 mySheet_json 但沒關係, png 檔還是會存在你的 assets 資料夾內).

step5. 撰寫程式碼

class Main extends eui.UILayer {

    protected createChildren(): void {
        super.createChildren();
        egret.lifecycle.onPause = () => egret.ticker.pause();
        egret.lifecycle.onResume = () => egret.ticker.resume();
        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 給你最乾淨的程式碼, 從這行以下開始寫喔 ---

        // 圖集方式可以減少 http 向伺服器請求次數, 原本 4 張圖要請求 4 次, 合成 1 張只要請求 1 次
        // 圖集可以減少 draw call, 增進繪圖效能
        
        // 方法1
        const spriteSheet = RES.getRes('mySheet_json') as egret.SpriteSheet;
        const tex = spriteSheet.getTexture('HALL_login_btn_png');
        this.addChild(new eui.Image(tex));

        // 方法2, egret 簡化了操作, 只要填入資源名稱即可使用
        this.addChild(new eui.Image('HALL_login_btn_png')).y = 100;

    }

}