gpt4 book ai didi

写一个在线位图字体制作工具!BitmapFont!

转载 作者:qq735679552 更新时间:2022-09-29 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章写一个在线位图字体制作工具!BitmapFont!由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

写一个在线位图字体制作工具!BitmapFont!

简单易用,跨平台,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 。

写一个在线位图字体制作工具!BitmapFont!

拖入文件代码 。

合成大图

参考Cocos Store中的一个插件代码,将所有图绘制在一个Canvas上.

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

写一个在线位图字体制作工具!BitmapFont!

合成大图代码 。

预览效果

根据图片xoffsetyoffsetxadvance的信息,采用Canvas画布渲染.

写一个在线位图字体制作工具!BitmapFont!

预览效果代码 。

导出文件

直接使用FileSaver.js 。

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

写一个在线位图字体制作工具!BitmapFont!

导出文件代码 。

体验

在线体验地址:https://lamyoung.gitee.io/web/bitmapFont/ 。

代码打包下载:https://gitee.com/lamyoung/web/raw/master/bitmapFont/source.zip 。

以上为白玉无冰使用HTML + JS实现"位图字体制作工具"的过程分享.

原文链接:https://mp.weixin.qq.com/s?__biz=MzI1Nzk1MzExNw==&mid=2247485825&idx=1&sn=a188b2c84545d3606055130d898e5db4&utm_source=tuicool&utm_medium=referral 。

最后此篇关于写一个在线位图字体制作工具!BitmapFont!的文章就讲到这里了,如果你想了解更多关于写一个在线位图字体制作工具!BitmapFont!的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com