[[419904]]

簡(jiǎn)單易用，跨平臺(tái)，20KB！

效果

效果預(yù)覽：

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

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

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

• 處理：可動(dòng)態(tài)調(diào)整參數(shù)，預(yù)覽實(shí)時(shí)效果

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

為何要重新寫一個(gè)輪子呢？

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

• Cocos Store 中也有許多優(yōu)秀的 BMFont 插件，但是依賴 Cocos Creator ，可能會(huì)有對(duì)應(yīng)版本限制。

實(shí)現(xiàn)

于是動(dòng)手寫一個(gè) HTML ，依賴瀏覽器的小工具，目錄設(shè)計(jì)如下：

• 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

拖入文件后，用一個(gè)列表維護(hù)文件數(shù)據(jù)，文件格式可以參文檔。

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

拖入文件代碼

合成大圖

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

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

合成大圖代碼

預(yù)覽效果

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

預(yù)覽效果代碼

導(dǎo)出文件

直接使用 FileSaver.js

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

導(dǎo)出文件代碼

體驗(yàn)

在線體驗(yàn)地址： https://lamyoung.gitee.io/web/bitmapFont/

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

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