引擎版本3.2.6
教程目錄
一 為什么要使用位圖字體
二 如何使用位圖字體
2.1 TextureMerger制作位圖字體
2.2 exml中使用位圖字體
三 Demo源碼
一 為什么要使用位圖字體
egret在手機端發布的h5,一般顯示的都是手機自帶默認字體。
要顯示特殊字體的話,一般會用到位圖字體。例如下圖中的傷害數字。
二 如何使用位圖字體
2.1 TextureMerger制作位圖字體
首先打開Texturemerger。(https://www.egret.com/products/others.html#egret-texture)
選擇Bitmap Font
新建字體,我隨意新建的test
選擇添加字符
添加如下圖片。字體圖片一般是美工提供,我這里自己隨意制作的。
注意左邊欄的圖片名要和數字一致。比如左邊欄“1”就對應着圖片數字1。
如果是圖片是“啊”,則左邊欄圖片名也應該是“啊”。
導出字體
得到兩個文件。一張位圖字體的png圖,和一個fnt字體配置文件。
將兩個文件導入default.res.json中加載。
任意新建一個exml皮膚文件,拖動一個BitmapLabel控件到exml上。
選中BitmapLabel,設置位圖字體為我們的test_fnt。
如果沒有,看看是不是沒有將test.fnt和test.png導入default.res.json。
設置BitmapLabel的文本為“123”,則可以看到位圖字體可以正常顯示了。
三 Demo下載
https://files-cdn.cnblogs.com/files/gamedaybyday/Egret3.2.6_BitmapFontExample.7z