core-egret.BitmapFont

BitmapFont 製作方式 - 方式 1 圖片組

step1. 先準備 0-9 , 共 10 張 png 圖片 ( 本範例圖片來自 https://www.stickpng.com/ )

step2. 開啟 TextureMerger 並選擇 Bitmap Font

step3. 將 10 張 png 檔拉到 TextureMerger, 請自行設定字體專案名稱, 畫布請選 Free Size 節省空間. 間隙為 1px ( 很重要, 如果設置 0px 會有圖片邊緣拉扯問題, 可以試試 ), 其他可以自行調整看看. 然後記得將左側原本檔名改成 0-9, 名字需要一個一個調整. 可參考下圖. 另外, 字體製作也可以用中英文字或特殊標點符號等.

step4. 上方工具列有『導出』按鈕, 導出 100% 大小並命名 myFont(自定義) 會產出 myFont.fnt 跟 myFont.png, 請將這兩個檔案拖到資源庫(補充 myFont_png 可以不用在 resource group (preload) 裡, 但 myFont_fnt 一定要).

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();
        // --- 給你最乾淨的程式碼, 從這行以下開始寫喔 ---

        const bt = new egret.BitmapText(); // 建立 BitmapText 物件用於顯示 BitmapFont
        bt.font = RES.getRes('myFont_fnt'); // 這個資源即為 BitmapFont
        bt.text = '0123456789';
        this.addChild(bt);

    }

}

BitmapFont 製作方式 - 方式2 字體簿

step1. 請先學會方式 1

step2. 選擇 Texture Merger 工具列的『更多字符』並輸入想要在代碼用到的字符, 並按確認, 你會發現字體都幫你命名好囉！但是字體簿沒辦法像方式 1 的圖片般花俏.

step3. 剩下就是導出跟寫程式 ( 請參考方式 1 )

更多請參考 egret.BitmapText