寫一個在線位圖字體制作工具!BitmapFont!
簡單易用,跨平臺,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.htmlrenderer.jsindex.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
點擊“閱讀原文”查看精選導航
“點贊“ ”在看” 鼓勵一下
▼
