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

效果

效果預覽：

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

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

• 輸入：零碎的字體圖片(通常是數字)
• 處理：可動態(tài)調整參數，預覽實時效果
• 輸出：一張合圖以及字體信息文件xxx.fnt

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

• Glyph Designer(Mac) 與 BMFont (Windows) 功能完善，但是有平臺限制。個人不習慣其操作
• Cocos Store 中也有許多優(yōu)秀的 BMFont 插件，但是依賴 Cocos Creator，可能會有對應版本限制。

實現

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

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

拖入文件

參考mozilla中的文檔，監(jiān)聽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 實現 "位圖字體制作工具" 的過程分享。

替代 toDataURL 的方案
Fake3D && Shader
MatCap && Shader
如何抄shader
3D折紙
漸變色文字3.0

“點贊“ ”在看” 鼓勵一下▼