Laya學習筆記-06位圖字體

一、字體制作

1.先讓美術製作好字體樣式,導出成png格式

2.下載安裝 windows下免費的位圖字體制作工具 Bitmap Font Generator。
下載地址：http://www.angelcode.com/products/bmfont/

3.安裝完成後打開Bitmap Font Generator ->Edit->Open Image Manager

3.Open Image Manager->Import image.. 導入美術製作好的字體樣式

4.設置對應的字體ID，依次將0-9png導入

5.設置好導出參數後，保存我們製作好的字體，命名爲“bitmap”(fnt的名稱一定好和png的一樣不然Laya無法識別)

6.這是一個製作好的位圖字體：鏈接:https://pan.baidu.com/s/1MSRR3_x82yJUwyowiyQRMQ  密碼:2whg

 

二、場景搭建

1.打開Laya在 工程->Assets 目錄下，新建一個目錄命名爲“bitmapFont”,將上面製作好的字體拖進來

2.在 工程->Scenes->新建->頁面/場景 新建一個場景命名爲“Main”

3.設置新建的場景屬性

4.創建一個Text類型的UI組件

 

5.在右邊Text的屬性欄中設置Text的寬高及位置

 

三、代碼加載字體 

1.新建一個代碼，命名爲“bitmapFont.js”。代碼如下

export default class bitmapFont extends Laya.Script {

    constructor() {
        super();
        /** @prop {name:txt, tips:"提示文本", type:Node, default:null}*/
        this.txt=null;
    }

    onAwake() {

        var bitmap=new Laya.BitmapFont();
        //加載字體
        bitmap.loadFont("bitmapFont/bitmap.fnt",Laya.Handler.create(this,function(){

            //註冊字體
            Laya.Text.registerBitmapFont("fontName",bitmap);
            this.txt.font="fontName";

        }));
    }
}

2.將 bitmapFont.js 掛載在Scene下

3.將 bitmapFont.js 中的txt參數，設置爲我們上面製作的Text。大功告成！

 

參考資料：

Bitmap Font Generator 位圖字體制作：https://www.jianshu.com/p/4b03bfefdb73 

LayaAir官方教程：https://ldc2.layabox.com/doc/?nav=zh-ts-1-2-5