[[419904]]

簡單易用，跨平臺，20KB！

效果

效果預覽：

https://www.bilibili.com/video/BV1cf4y1H7Pa

無論寫代碼還是寫工具，都要明確輸入與輸出。

• 輸入：零碎的字體圖片(通常是數字)

• 處理：可動態調整參數，預覽實時效果

• 輸出：一張合圖以及字體信息文件 xxx.fnt

為何要重新寫一個輪子呢？

• Glyph Designer(Mac) 與 BMFont (Windows) 功能完善，但是有平臺限制。 個人不習慣其操作

• Cocos Store 中也有許多優秀的 BMFont 插件，但是依賴 Cocos Creator ，可能會有對應版本限制。

實現

于是動手寫一個 HTML ，依賴瀏覽器的小工具，目錄設計如下：

• index.html
• renderer.js
• index.css

拖入文件

參考 mozilla 中的文檔，監聽 ondrop 事件。

https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications

拖入文件后，用一個列表維護文件數據，文件格式可以參文檔。

http://www.angelcode.com/products/bmfont/doc/file_format.html

拖入文件代碼

合成大圖

參考 Cocos Store 中的一個插件代碼，將所有圖繪制在一個 Canvas 上。

http://store.cocos.com/app/detail/2604

合成大圖代碼

預覽效果

根據圖片 xoffset yoffset xadvance 的信息，采用 Canvas 畫布渲染。

預覽效果代碼

導出文件

直接使用 FileSaver.js

https://github.com/eligrey/FileSaver.js

 

導出文件代碼

體驗

在線體驗地址： https://lamyoung.gitee.io/web/bitmapFont/

代碼打包下載： https://gitee.com/lamyoung/web/raw/master/bitmapFont/source.zip

以上為白玉無冰使用 HTML + JS 實現 "位圖字體制作工具" 的過程分享。